Skip to content

Commit 1e829cc

Browse files
ammarahm-edammarahm-ed
authored
Merge pull request #330 from ammarahm-ed/v9-stable
v0.9.0
2 parents fb7ce07 + 416f9e9 commit 1e829cc

File tree

136 files changed

+40792
-28126
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

136 files changed

+40792
-28126
lines changed

‎.npmignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,13 @@ node_modules/
77
# assets/
88
assets/
99

10+
# docs
11+
docs/
1012

1113
# Example
1214
example/
13-
docs/
1415
expo-example/
16+
app/
1517
#gifs
1618
gifs/
1719
index.tsx

‎app/components/button.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import {Text, TextStyle, TouchableOpacity} from 'react-native';
2+
import {TouchableOpacityProps} from 'react-native-gesture-handler';
3+
4+
export function Button(
5+
props: TouchableOpacityProps & {
6+
btnTitleStyle?: TextStyle;
7+
title: string;
8+
},
9+
) {
10+
return (
11+
<TouchableOpacity
12+
{...props}
13+
style={[
14+
{
15+
height: 50,
16+
justifyContent: 'center',
17+
alignItems: 'center',
18+
alignSelf: 'center',
19+
backgroundColor: '#2563eb',
20+
paddingHorizontal: 10,
21+
borderRadius: 10,
22+
elevation: 5,
23+
shadowColor: 'black',
24+
shadowOffset: {width: 0.3 * 4, height: 0.5 * 4},
25+
shadowOpacity: 0.2,
26+
shadowRadius: 0.7 * 4,
27+
width: '100%',
28+
marginBottom: 10,
29+
},
30+
props.style,
31+
]}>
32+
<Text
33+
style={[
34+
{
35+
color: 'white',
36+
fontWeight: 'bold',
37+
},
38+
props.btnTitleStyle,
39+
]}>
40+
{props.title}
41+
</Text>
42+
</TouchableOpacity>
43+
);
44+
}

‎app/examples.tsx‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
/* eslint-disable curly */
2+
import React from 'react';
3+
import {
4+
Linking,
5+
SafeAreaView,
6+
ScrollView,
7+
StatusBar,
8+
StyleSheet,
9+
Text,
10+
TouchableOpacity,
11+
} from 'react-native';
12+
import {SheetManager} from 'react-native-actions-sheet';
13+
14+
const MainScreen = () => {
15+
const examples: {
16+
title: string;
17+
onOpen: () => void;
18+
}[] = [
19+
{
20+
title: 'Hello',
21+
onOpen: () => {
22+
SheetManager.show('hello');
23+
},
24+
},
25+
{
26+
title: 'Draw under status bar',
27+
onOpen: () => {
28+
SheetManager.show('draw-under-statusbar');
29+
},
30+
},
31+
{
32+
title: 'Gestures',
33+
onOpen: () => {
34+
SheetManager.show('gestures');
35+
},
36+
},
37+
{
38+
title: 'I can snap!',
39+
onOpen: () => {
40+
SheetManager.show('snap-me');
41+
},
42+
},
43+
{
44+
title: 'Keyboard handling',
45+
onOpen: () => {
46+
SheetManager.show('input');
47+
},
48+
},
49+
{
50+
title: 'Open with data',
51+
onOpen: () => {
52+
const candyNames = [
53+
'Candy 🍬',
54+
'Chocolate 🍫',
55+
'Lollipop 🍭',
56+
'Cookie 🍪',
57+
'Cake 🍰',
58+
'Ice-cream 🍦',
59+
'Doughnut 🍩',
60+
];
61+
SheetManager.show('payload', {
62+
payload: {
63+
candy: candyNames[Math.floor(Math.random() * candyNames.length)],
64+
},
65+
});
66+
},
67+
},
68+
{
69+
title: 'Return data from sheet',
70+
onOpen: () => {
71+
SheetManager.show('return-data').then(result => {
72+
console.log('User will star on github?', result);
73+
if (result) {
74+
Linking.openURL(
75+
'https://github.com/ammarahm-ed/react-native-actions-sheet',
76+
);
77+
}
78+
});
79+
},
80+
},
81+
{
82+
title: 'Interact with background',
83+
onOpen: () => {
84+
SheetManager.show('background-interaction');
85+
},
86+
},
87+
{
88+
title: 'Always open',
89+
onOpen: () => {
90+
SheetManager.show('always-open');
91+
},
92+
},
93+
{
94+
title: 'ScrollView',
95+
onOpen: () => {
96+
SheetManager.show('scrollview');
97+
},
98+
},
99+
{
100+
title: 'FlatList',
101+
onOpen: () => {
102+
SheetManager.show('flatlist');
103+
},
104+
},
105+
{
106+
title: 'FlashList',
107+
onOpen: () => {
108+
SheetManager.show('flashlist');
109+
},
110+
},
111+
{
112+
title: 'Resize',
113+
onOpen: () => {
114+
SheetManager.show('scrollview-resize');
115+
},
116+
},
117+
{
118+
title: 'Nested sheets',
119+
onOpen: () => {
120+
SheetManager.show('nested-sheets');
121+
},
122+
},
123+
{
124+
title: 'Sheet Router',
125+
onOpen: () => {
126+
SheetManager.show('sheet-router');
127+
},
128+
},
129+
];
130+
131+
// Examples left to add
132+
// 5. Resize with animation on add/remove item.
133+
134+
return (
135+
<>
136+
<SafeAreaView style={styles.safeareview}>
137+
<StatusBar
138+
translucent
139+
backgroundColor="transparent"
140+
barStyle="dark-content"
141+
/>
142+
143+
<Text
144+
style={{
145+
color: 'black',
146+
fontWeight: '100',
147+
fontSize: 30,
148+
alignSelf: 'center',
149+
}}>
150+
Examples
151+
</Text>
152+
153+
<ScrollView
154+
style={{
155+
width: '100%',
156+
flex: 1,
157+
marginTop: 20,
158+
paddingHorizontal: 12,
159+
}}>
160+
{examples.map(item => (
161+
<TouchableOpacity
162+
key={item.title}
163+
onPress={() => {
164+
item.onOpen();
165+
}}
166+
style={styles.btn}>
167+
<Text style={styles.btnTitle}>{item.title}</Text>
168+
</TouchableOpacity>
169+
))}
170+
</ScrollView>
171+
</SafeAreaView>
172+
</>
173+
);
174+
};
175+
176+
export default MainScreen;
177+
178+
const styles = StyleSheet.create({
179+
btn: {
180+
height: 50,
181+
justifyContent: 'center',
182+
alignItems: 'center',
183+
alignSelf: 'center',
184+
backgroundColor: '#2563eb',
185+
paddingHorizontal: 10,
186+
borderRadius: 10,
187+
elevation: 5,
188+
shadowColor: 'black',
189+
shadowOffset: {width: 0.3 * 4, height: 0.5 * 4},
190+
shadowOpacity: 0.2,
191+
shadowRadius: 0.7 * 4,
192+
width: '100%',
193+
marginBottom: 10,
194+
},
195+
safeareview: {
196+
justifyContent: 'center',
197+
flex: 1,
198+
backgroundColor: 'white',
199+
alignItems: 'center',
200+
gap: 10,
201+
paddingTop: 40,
202+
},
203+
btnTitle: {
204+
color: 'white',
205+
fontWeight: 'bold',
206+
},
207+
});

‎app/examples/always-open.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import {Text, View} from 'react-native';
3+
import ActionSheet, {useSheetRef} from 'react-native-actions-sheet';
4+
import {Button} from '../components/button';
5+
6+
function AlwaysOpen() {
7+
const ref = useSheetRef();
8+
return (
9+
<ActionSheet
10+
isModal={false}
11+
backgroundInteractionEnabled
12+
snapPoints={[30, 100]}
13+
gestureEnabled
14+
closable={false}
15+
disableDragBeyondMinimumSnapPoint
16+
containerStyle={{
17+
borderWidth: 1,
18+
borderColor: '#f0f0f0',
19+
}}>
20+
<View
21+
style={{
22+
paddingHorizontal: 12,
23+
height: 400,
24+
alignItems: 'center',
25+
paddingVertical: 20,
26+
gap: 10
27+
}}>
28+
<Text
29+
style={{
30+
color: 'black',
31+
fontSize: 20,
32+
textAlign: 'center',
33+
}}>
34+
I always stay at the bottom
35+
</Text>
36+
37+
<Button
38+
title="Until you close me..."
39+
onPress={() => {
40+
ref.current.hide();
41+
}}
42+
/>
43+
</View>
44+
</ActionSheet>
45+
);
46+
}
47+
48+
export default AlwaysOpen;

‎app/examples/background-interaction.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
import {Text, View} from 'react-native';
3+
import ActionSheet from 'react-native-actions-sheet';
4+
5+
function BackgroundInteraction() {
6+
return (
7+
<ActionSheet
8+
isModal={false}
9+
backgroundInteractionEnabled={true}
10+
snapPoints={[30, 100]}
11+
gestureEnabled
12+
containerStyle={{
13+
borderWidth: 1,
14+
borderColor: '#f0f0f0',
15+
}}>
16+
<View
17+
style={{
18+
paddingHorizontal: 12,
19+
height: 400,
20+
alignItems: 'center',
21+
paddingVertical: 20,
22+
}}>
23+
<Text
24+
style={{
25+
color: 'black',
26+
fontSize: 20,
27+
textAlign: 'center',
28+
}}>
29+
Interact with the views and buttons in background too?! 😲
30+
</Text>
31+
</View>
32+
</ActionSheet>
33+
);
34+
}
35+
36+
export default BackgroundInteraction;

‎app/examples/draw-under-statusbar.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import {Text, View} from 'react-native';
3+
import ActionSheet from 'react-native-actions-sheet';
4+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
5+
6+
function DrawUnderStatusBar() {
7+
const insets = useSafeAreaInsets();
8+
return (
9+
<ActionSheet
10+
indicatorStyle={{
11+
width: 150,
12+
}}
13+
gestureEnabled
14+
safeAreaInsets={insets}
15+
drawUnderStatusBar
16+
containerStyle={{
17+
height: '100%',
18+
}}>
19+
<View
20+
style={{
21+
alignItems: 'center',
22+
justifyContent: 'center',
23+
height: '100%',
24+
}}>
25+
<Text
26+
style={{
27+
color: 'black',
28+
fontSize: 30,
29+
}}>
30+
I draw under status bar!
31+
</Text>
32+
</View>
33+
</ActionSheet>
34+
);
35+
}
36+
37+
export default DrawUnderStatusBar;

0 commit comments

Comments
 (0)