Skip to content

Commit df840f7

Browse files
EQuimperEQuimper
committed
fix(gorhom-bottom-sheet): fix issue with gorhom bottom sheet
1 parent 42b1cdd commit df840f7

File tree

8 files changed

+30275
-816
lines changed

8 files changed

+30275
-816
lines changed

‎example/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,15 @@
99
"web": "expo start --web"
1010
},
1111
"dependencies": {
12+
"@gorhom/bottom-sheet": "^4.6.3",
1213
"expo": "~50.0.17",
1314
"expo-status-bar": "~1.11.1",
1415
"react": "18.2.0",
1516
"react-dom": "18.2.0",
1617
"react-native": "0.73.6",
18+
"react-native-gesture-handler": "~2.14.0",
19+
"react-native-reanimated": "~3.6.2",
20+
"react-native-safe-area-context": "4.8.2",
1721
"react-native-web": "~0.19.6"
1822
},
1923
"devDependencies": {

‎example/src/App.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
import * as React from 'react';
22

3-
import { StyleSheet, View, Text } from 'react-native';
3+
import { StyleSheet } from 'react-native';
4+
import { GorhomBottomSheetExample } from './third-party/gorhom-bottom-sheet';
5+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
6+
import { SafeAreaProvider } from 'react-native-safe-area-context';
47

58
export default function App() {
69
return (
7-
<View style={styles.container}>
8-
<Text>To Be There</Text>
9-
</View>
10+
<GestureHandlerRootView style={styles.container}>
11+
<SafeAreaProvider>
12+
<GorhomBottomSheetExample />
13+
</SafeAreaProvider>
14+
</GestureHandlerRootView>
1015
);
1116
}
1217

1318
const styles = StyleSheet.create({
1419
container: {
1520
flex: 1,
16-
alignItems: 'center',
17-
justifyContent: 'center',
1821
},
1922
box: {
2023
width: 60,

‎example/src/third-party/gorhom-bottom-sheet/index.tsx‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import React, { useCallback, useMemo, useRef } from 'react';
2+
import { View, StyleSheet, Button } from 'react-native';
3+
import {
4+
BottomSheetModal,
5+
BottomSheetView,
6+
BottomSheetModalProvider,
7+
BottomSheetBackdrop,
8+
type BottomSheetBackdropProps,
9+
} from '@gorhom/bottom-sheet';
10+
import { MagicScroll } from '../../../../src';
11+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
12+
13+
const Form = () => {
14+
const insets = useSafeAreaInsets();
15+
16+
return (
17+
<MagicScroll.ScrollView
18+
scollViewProps={{
19+
contentContainerStyle: {
20+
paddingHorizontal: 16,
21+
paddingBottom: insets.bottom + 20,
22+
backgroundColor: 'red',
23+
paddingTop: 100,
24+
},
25+
style: { backgroundColor: 'blue' },
26+
}}
27+
>
28+
<MagicScroll.TextInput
29+
name="username"
30+
textInputProps={{
31+
placeholder: 'Username',
32+
style: {
33+
height: 50,
34+
backgroundColor: '#ddd',
35+
borderRadius: 6,
36+
paddingHorizontal: 16,
37+
},
38+
}}
39+
/>
40+
<MagicScroll.TextInput
41+
name="first_name"
42+
containerStyle={{ marginTop: 8 }}
43+
textInputProps={{
44+
placeholder: 'First Name',
45+
style: {
46+
height: 50,
47+
backgroundColor: '#ddd',
48+
borderRadius: 6,
49+
paddingHorizontal: 16,
50+
},
51+
}}
52+
/>
53+
<MagicScroll.TextInput
54+
name="last_name"
55+
containerStyle={{ marginTop: 8 }}
56+
textInputProps={{
57+
placeholder: 'Last Name',
58+
style: {
59+
height: 50,
60+
backgroundColor: '#ddd',
61+
borderRadius: 6,
62+
paddingHorizontal: 16,
63+
},
64+
}}
65+
/>
66+
<MagicScroll.TextInput
67+
name="email"
68+
containerStyle={{ marginTop: 8 }}
69+
textInputProps={{
70+
placeholder: 'Email',
71+
style: {
72+
height: 50,
73+
backgroundColor: '#ddd',
74+
borderRadius: 6,
75+
paddingHorizontal: 16,
76+
},
77+
}}
78+
/>
79+
<MagicScroll.TextInput
80+
name="password"
81+
containerStyle={{ marginTop: 8 }}
82+
textInputProps={{
83+
placeholder: 'Password',
84+
style: {
85+
height: 50,
86+
backgroundColor: '#ddd',
87+
borderRadius: 6,
88+
paddingHorizontal: 16,
89+
},
90+
}}
91+
/>
92+
</MagicScroll.ScrollView>
93+
);
94+
};
95+
96+
const Example = () => {
97+
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
98+
99+
const snapPoints = useMemo(() => ['25%', '80%'], []);
100+
101+
const handlePresentModalPress = useCallback(() => {
102+
bottomSheetModalRef.current?.present();
103+
}, []);
104+
105+
const renderBackdrop = useCallback(
106+
(props: BottomSheetBackdropProps) => (
107+
<BottomSheetBackdrop
108+
{...props}
109+
disappearsOnIndex={-1}
110+
appearsOnIndex={1}
111+
pressBehavior="close"
112+
/>
113+
),
114+
[]
115+
);
116+
117+
return (
118+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
119+
<Button
120+
onPress={handlePresentModalPress}
121+
title="Present Modal"
122+
color="black"
123+
/>
124+
<BottomSheetModal
125+
ref={bottomSheetModalRef}
126+
index={1}
127+
backdropComponent={renderBackdrop}
128+
snapPoints={snapPoints}
129+
enablePanDownToClose
130+
>
131+
<BottomSheetView style={[styles.contentContainer]}>
132+
<MagicScroll.SmartScrollView>
133+
<Form />
134+
</MagicScroll.SmartScrollView>
135+
</BottomSheetView>
136+
</BottomSheetModal>
137+
</View>
138+
);
139+
};
140+
141+
const styles = StyleSheet.create({
142+
container: {
143+
flex: 1,
144+
padding: 24,
145+
justifyContent: 'center',
146+
backgroundColor: 'grey',
147+
},
148+
contentContainer: {
149+
flex: 1,
150+
minHeight: 100,
151+
},
152+
});
153+
154+
export const GorhomBottomSheetExample = () => (
155+
<BottomSheetModalProvider>
156+
<Example />
157+
</BottomSheetModalProvider>
158+
);

0 commit comments

Comments
 (0)