docs: added gesture handler view to examples

gorhom · Oct 19, 2024 · 2628425 · 2628425
1 parent ace0da7
commit 2628425
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 35 deletions.
diff --git a/website/docs/components/bottomsheetbackdrop.md b/website/docs/components/bottomsheetbackdrop.md
@@ -87,7 +87,8 @@ Pressing the backdrop will call the `onPress` function, it will be called before
 ```tsx
 import React, { useCallback, useMemo, useRef } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import BottomSheet, { BottomSheetBackdrop } from "@gorhom/bottom-sheet";
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import BottomSheet, { BottomSheetView, BottomSheetBackdrop } from "@gorhom/bottom-sheet";
 
 const App = () => {
 	// ref
@@ -113,19 +114,20 @@ const App = () => {
 		[]
 	);
 	return (
-		<View style={styles.container}>
+		<GestureHandlerRootView style={styles.container}>
 			<BottomSheet
 				ref={bottomSheetRef}
 				index={1}
 				snapPoints={snapPoints}
 				backdropComponent={renderBackdrop}
+        enableDynamicSizing={false}
 				onChange={handleSheetChanges}
 			>
-				<View style={styles.contentContainer}>
+				<BottomSheetView style={styles.contentContainer}>
 					<Text>Awesome 🎉</Text>
-				</View>
+				</BottomSheetView>
 			</BottomSheet>
-		</View>
+		</GestureHandlerRootView>
 	);
 };
 

diff --git a/website/docs/components/bottomsheetflashlist.md b/website/docs/components/bottomsheetflashlist.md
@@ -27,6 +27,7 @@ This needed when bottom sheet used with multiple scrollables to allow bottom she
 ```tsx
 import React, { useCallback, useRef, useMemo } from "react";
 import { StyleSheet, View, Text, Button } from "react-native";
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import BottomSheet, { BottomSheetFlashList } from "@gorhom/bottom-sheet";
 
 
@@ -63,7 +64,7 @@ const App = () => {
     );
   }, []);
   return (
-    <View style={styles.container}>
+    <GestureHandlerRootView style={styles.container}>
       <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
       <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
       <Button title="Close" onPress={() => handleClosePress()} />
@@ -79,7 +80,7 @@ const App = () => {
           estimatedItemSize={43.3}
         />
       </BottomSheet>
-    </View>
+    </GestureHandlerRootView>
   );
 };
 

diff --git a/website/docs/components/bottomsheetflatlist.md b/website/docs/components/bottomsheetflatlist.md
@@ -34,6 +34,7 @@ These props will be ignored if they were passed, because of the internal integra
 ```tsx
 import React, { useCallback, useRef, useMemo } from "react";
 import { StyleSheet, View, Text, Button } from "react-native";
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import BottomSheet, { BottomSheetFlatList } from "@gorhom/bottom-sheet";
 
 const App = () => {
@@ -71,14 +72,15 @@ const App = () => {
     []
   );
   return (
-    <View style={styles.container}>
+    <GestureHandlerRootView style={styles.container}>
       <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
       <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
       <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
       <Button title="Close" onPress={() => handleClosePress()} />
       <BottomSheet
         ref={sheetRef}
         snapPoints={snapPoints}
+        enableDynamicSizing={false}
         onChange={handleSheetChange}
       >
         <BottomSheetFlatList
@@ -88,7 +90,7 @@ const App = () => {
           contentContainerStyle={styles.contentContainer}
         />
       </BottomSheet>
-    </View>
+    </GestureHandlerRootView>
   );
 };
 

diff --git a/website/docs/components/bottomsheetfooter.md b/website/docs/components/bottomsheetfooter.md
@@ -40,6 +40,7 @@ Component to be placed in the footer.
 ```tsx
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import BottomSheet, { BottomSheetFooter } from '@gorhom/bottom-sheet';
 
 const App = () => {
@@ -61,7 +62,7 @@ const App = () => {
     []
   );
   return (
-    <View style={styles.container}>
+    <GestureHandlerRootView style={styles.container}>
       <BottomSheet
         ref={bottomSheetRef}
         index={1}
@@ -72,7 +73,7 @@ const App = () => {
           <Text>Awesome 🎉</Text>
         </View>
       </BottomSheet>
-    </View>
+    </GestureHandlerRootView>
   );
 };
 

diff --git a/website/docs/components/bottomsheetscrollview.md b/website/docs/components/bottomsheetscrollview.md
@@ -34,6 +34,7 @@ These props will be ignored if they were passed, because of the internal integra
 ```tsx
 import React, { useCallback, useRef, useMemo } from "react";
 import { StyleSheet, View, Text, Button } from "react-native";
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import BottomSheet, { BottomSheetScrollView } from "@gorhom/bottom-sheet";
 
 const App = () => {
@@ -71,7 +72,7 @@ const App = () => {
     []
   );
   return (
-    <View style={styles.container}>
+    <GestureHandlerRootView style={styles.container}>
       <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
       <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
       <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
@@ -80,13 +81,14 @@ const App = () => {
         ref={sheetRef}
         index={1}
         snapPoints={snapPoints}
+        enableDynamicSizing={false}
         onChange={handleSheetChange}
       >
         <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
           {data.map(renderItem)}
         </BottomSheetScrollView>
       </BottomSheet>
-    </View>
+    </GestureHandlerRootView>
   );
 };
 

diff --git a/website/docs/components/bottomsheetsectionlist.md b/website/docs/components/bottomsheetsectionlist.md
@@ -34,6 +34,7 @@ These props will be ignored if they were passed, because of the internal integra
 ```tsx
 import React, { useCallback, useRef, useMemo } from "react";
 import { StyleSheet, View, Text, Button } from "react-native";
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import BottomSheet, { BottomSheetSectionList } from "@gorhom/bottom-sheet";
 
 const App = () => {
@@ -84,7 +85,7 @@ const App = () => {
     []
   );
   return (
-    <View style={styles.container}>
+    <GestureHandlerRootView style={styles.container}>
       <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
       <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
       <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
@@ -93,6 +94,7 @@ const App = () => {
         ref={sheetRef}
         index={1}
         snapPoints={snapPoints}
+        enableDynamicSizing={false}
         onChange={handleSheetChange}
       >
         <BottomSheetSectionList
@@ -103,7 +105,7 @@ const App = () => {
           contentContainerStyle={styles.contentContainer}
         />
       </BottomSheet>
-    </View>
+    </GestureHandlerRootView>
   );
 };
 

diff --git a/website/docs/components/bottomsheettextinput.md b/website/docs/components/bottomsheettextinput.md
@@ -18,7 +18,8 @@ Inherits `TextInputProps` from `react-native`.
 ```tsx
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import BottomSheet, { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import BottomSheet, { BottomSheetView, BottomSheetTextInput } from '@gorhom/bottom-sheet';
 
 const App = () => {
   // ref
@@ -34,20 +35,21 @@ const App = () => {
 
   // renders
   return (
-    <View style={styles.container}>
+    <GestureHandlerRootView style={styles.container}>
       <BottomSheet
         ref={bottomSheetRef}
         index={1}
         snapPoints={snapPoints}
         keyboardBehavior="fillParent"
+        enableDynamicSizing={false}
         onChange={handleSheetChanges}
       >
         <BottomSheetTextInput style={styles.input} />
-        <View style={styles.contentContainer}>
+        <BottomSheetView style={styles.contentContainer}>
           <Text>Awesome 🎉</Text>
-        </View>
+        </BottomSheetView>
       </BottomSheet>
-    </View>
+    </GestureHandlerRootView>
   );
 };
 

diff --git a/website/docs/components/bottomsheetview.md b/website/docs/components/bottomsheetview.md
@@ -26,6 +26,7 @@ This needed when bottom sheet used with multiple scrollables to allow bottom she
 ```tsx
 import React, { useCallback, useRef, useMemo } from "react";
 import { StyleSheet, View, Text, Button } from "react-native";
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
 
 const App = () => {
@@ -48,21 +49,22 @@ const App = () => {
 
   // render
   return (
-    <View style={styles.container}>
+    <GestureHandlerRootView style={styles.container}>
       <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
       <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
       <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
       <Button title="Close" onPress={() => handleClosePress()} />
       <BottomSheet
         ref={sheetRef}
         snapPoints={snapPoints}
+        enableDynamicSizing={false}
         onChange={handleSheetChange}
       >
-        <BottomSheetView>
+        <BottomSheetView style={styles.contentContainer}>
           <Text>Awesome 🔥</Text>
         </BottomSheetView>
       </BottomSheet>
-    </View>
+    </GestureHandlerRootView>
   );
 };
 
@@ -71,6 +73,11 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingTop: 200,
   },
+  contentContainer: {
+    flex: 1,
+    padding: 36,
+    alignItems: 'center',
+  },
 });
 
 export default App;

diff --git a/website/docs/components/bottomsheetvirtualizedlist.md b/website/docs/components/bottomsheetvirtualizedlist.md
@@ -34,6 +34,7 @@ These props will be ignored if they were passed, because of the internal integra
 ```tsx
 import React, { useCallback, useRef, useMemo } from "react";
 import { StyleSheet, View, Text, Button } from "react-native";
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import BottomSheet, { BottomSheetVirtualizedList } from "@gorhom/bottom-sheet";
 
 const App = () => {
@@ -71,14 +72,15 @@ const App = () => {
     []
   );
   return (
-    <View style={styles.container}>
+    <GestureHandlerRootView style={styles.container}>
       <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
       <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
       <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
       <Button title="Close" onPress={() => handleClosePress()} />
       <BottomSheet
         ref={sheetRef}
         snapPoints={snapPoints}
+        enableDynamicSizing={false}
         onChange={handleSheetChange}
       >
         <BottomSheetVirtualizedList
@@ -90,7 +92,7 @@ const App = () => {
           contentContainerStyle={styles.contentContainer}
         />
       </BottomSheet>
-    </View>
+    </GestureHandlerRootView>
   );
 };
 

diff --git a/website/docs/modal/usage.md b/website/docs/modal/usage.md
@@ -11,6 +11,7 @@ Here is a simple usage of the **Bottom Sheet Modal**, with non-scrollable conten
 ```tsx
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View, Text, StyleSheet, Button } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import {
   BottomSheetModal,
   BottomSheetView,
@@ -21,9 +22,6 @@ const App = () => {
   // ref
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
-  // variables
-  const snapPoints = useMemo(() => ['25%', '50%'], []);
-
   // callbacks
   const handlePresentModalPress = useCallback(() => {
     bottomSheetModalRef.current?.present();
@@ -35,23 +33,21 @@ const App = () => {
   // renders
   return (
     <BottomSheetModalProvider>
-      <View style={styles.container}>
+      <GestureHandlerRootView style={styles.container}>
         <Button
           onPress={handlePresentModalPress}
           title="Present Modal"
           color="black"
         />
         <BottomSheetModal
           ref={bottomSheetModalRef}
-          index={1}
-          snapPoints={snapPoints}
           onChange={handleSheetChanges}
         >
           <BottomSheetView style={styles.contentContainer}>
             <Text>Awesome 🎉</Text>
           </BottomSheetView>
         </BottomSheetModal>
-      </View>
+      </GestureHandlerRootView>
     </BottomSheetModalProvider>
   );
 };

diff --git a/website/docs/usage.md b/website/docs/usage.md
@@ -11,6 +11,7 @@ Here is a simple usage of the **Bottom Sheet**, with non-scrollable content. For
 ```tsx
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
 
 const App = () => {
@@ -24,7 +25,7 @@ const App = () => {
 
   // renders
   return (
-    <View style={styles.container}>
+    <GestureHandlerRootView style={styles.container}>
       <BottomSheet
         ref={bottomSheetRef}
         onChange={handleSheetChanges}
@@ -33,18 +34,18 @@ const App = () => {
           <Text>Awesome 🎉</Text>
         </BottomSheetView>
       </BottomSheet>
-    </View>
+    </GestureHandlerRootView>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 24,
     backgroundColor: 'grey',
   },
   contentContainer: {
     flex: 1,
+    padding: 36,
     alignItems: 'center',
   },
 });