Merge pull request #2224 from gluestack/feat/added-gorhom-bottom-sheet

feat: added gorhom bottom sheet
gluestack · Jun 12, 2024 · 6ea1e41 · 6ea1e41
2 parents bbcd1d6 + f58d048
commit 6ea1e41
Show file tree

Hide file tree

Showing 9 changed files with 2,016 additions and 52 deletions.
diff --git a/example/storybook-nativewind/.ondevice/preview.js b/example/storybook-nativewind/.ondevice/preview.js
@@ -24,6 +24,7 @@ export const parameters = {
 
 import { useDarkMode } from '../src/hooks/useDarkMode';
 import { Platform } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 export const decorators = [
   withBackgrounds,
@@ -45,11 +46,13 @@ export const decorators = [
       }
     }
     return (
-      <GluestackUIProvider config={config}>
-        <Box flex={1} p="$10">
-          <Story />
-        </Box>
-      </GluestackUIProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <GluestackUIProvider config={config}>
+          <Box flex={1} p="$10">
+            <Story />
+          </Box>
+        </GluestackUIProvider>
+      </GestureHandlerRootView>
     );
   },
 ];
@@ -75,9 +78,11 @@ addParameters({
       }
       return (
         <DocsContainer context={context}>
-          <GluestackUIProvider config={config} colorMode={getColorMode()}>
-            {children}
-          </GluestackUIProvider>
+          <GestureHandlerRootView style={{ flex: 1 }}>
+            <GluestackUIProvider config={config} colorMode={getColorMode()}>
+              {children}
+            </GluestackUIProvider>
+          </GestureHandlerRootView>
         </DocsContainer>
       );
     },

diff --git a/example/storybook-nativewind/.storybook/preview.js b/example/storybook-nativewind/.storybook/preview.js
@@ -4,6 +4,7 @@ import { OverlayProvider } from '@gluestack-ui/overlay';
 import { ToastProvider } from '@gluestack-ui/toast';
 
 import { GluestackUIProvider as GluestackUIWithNativewindProvider } from '../src/core-components/nativewind/gluestack-ui-provider';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 // global css getting resolved from babel.config.js
 import 'global.css';
@@ -136,21 +137,27 @@ export const decorators = [
 
     return (
       <GluestackUIWithGluestackStyleProvider colorMode={getColorMode()}>
-        <GluestackUIWithNativewindProvider mode={getColorMode()}>
-          <OverlayProvider style={{ flex: 1 }}>
-            <ToastProvider>
-              <View
-                style={{
-                  flex: 1,
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}
-              >
-                <Story />
-              </View>
-            </ToastProvider>
-          </OverlayProvider>
-        </GluestackUIWithNativewindProvider>
+        <GestureHandlerRootView
+          style={{ flex: 1, display: 'flex', height: '100vh' }}
+        >
+          <GluestackUIWithNativewindProvider mode={getColorMode()}>
+            <OverlayProvider style={{ flex: 1, display: 'flex' }}>
+              <ToastProvider>
+                <View
+                  style={{
+                    flex: 1,
+                    display: 'flex',
+                    width: '100%',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                >
+                  <Story />
+                </View>
+              </ToastProvider>
+            </OverlayProvider>
+          </GluestackUIWithNativewindProvider>
+        </GestureHandlerRootView>
       </GluestackUIWithGluestackStyleProvider>
     );
   },
@@ -165,9 +172,11 @@ addParameters({
         <GluestackUIWithGluestackStyleProvider>
           <GluestackUIWithNativewindProvider>
             <DocsContainer context={context}>
-              <OverlayProvider style={{ flex: 1 }}>
-                <ToastProvider>{children}</ToastProvider>
-              </OverlayProvider>
+              <GestureHandlerRootView style={{ flex: 1 }}>
+                <OverlayProvider style={{ flex: 1 }}>
+                  <ToastProvider>{children}</ToastProvider>
+                </OverlayProvider>
+              </GestureHandlerRootView>
             </DocsContainer>
           </GluestackUIWithNativewindProvider>
         </GluestackUIWithGluestackStyleProvider>

diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json
@@ -34,6 +34,7 @@
     "@gluestack-ui/config": "^1.1.18",
     "@gluestack-ui/themed": "^1.1.29",
     "@gluestack/design-system": "^0.5.36",
+    "@gorhom/bottom-sheet": "^5.0.0-alpha.10",
     "@legendapp/motion": "^2.2.0",
     "@react-aria/button": "^3.7.0",
     "@react-aria/focus": "^3.11.0",
@@ -62,8 +63,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "0.72.4",
-    "react-native-gesture-handler": "^2.12.1",
-    "react-native-reanimated": "~3.3.0",
+    "react-native-gesture-handler": "~2.14.0",
+    "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-svg": "13.4.0",
     "react-native-vector-icons": "^10.0.0",

diff --git a/example/storybook-nativewind/src/components/BottomSheet/BottomSheet.stories.tsx b/example/storybook-nativewind/src/components/BottomSheet/BottomSheet.stories.tsx
@@ -0,0 +1,12 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import BottomSheet from './BottomSheet';
+
+const BottomSheetMeta: ComponentMeta<typeof BottomSheet> = {
+  title: 'stories/BottomSheet',
+  component: BottomSheet,
+  argTypes: {},
+};
+
+export default BottomSheetMeta;
+
+export { BottomSheet };
diff --git a/example/storybook-nativewind/src/components/BottomSheet/BottomSheet.tsx b/example/storybook-nativewind/src/components/BottomSheet/BottomSheet.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  BottomSheet,
+  BottomSheetBackdrop,
+  BottomSheetContent,
+  BottomSheetDragIndicator,
+  BottomSheetItem,
+  BottomSheetItemText,
+  BottomSheetPortal,
+  BottomSheetTrigger,
+} from '@/components/ui/bottomsheet';
+import { Text } from '@/components/ui/text';
+
+const BottomSheetBasic = ({
+  text = 'Open Action Sheet',
+  _colorMode,
+  ...props
+}: any) => {
+  return (
+    <BottomSheet {...props}>
+      <BottomSheetTrigger>
+        <Text>{text}</Text>
+      </BottomSheetTrigger>
+      <BottomSheetPortal
+        snapPoints={['25%', '50%']}
+        backdropComponent={BottomSheetBackdrop}
+        handleComponent={BottomSheetDragIndicator}
+      >
+        <BottomSheetContent>
+          <BottomSheetItem>
+            <BottomSheetItemText>Item 1</BottomSheetItemText>
+          </BottomSheetItem>
+          <BottomSheetItem>
+            <BottomSheetItemText>Item 2</BottomSheetItemText>
+          </BottomSheetItem>
+          <BottomSheetItem>
+            <BottomSheetItemText>Item 3</BottomSheetItemText>
+          </BottomSheetItem>
+        </BottomSheetContent>
+      </BottomSheetPortal>
+    </BottomSheet>
+  );
+};
+
+BottomSheetBasic.description =
+  'This is a basic BottomSheet component example. The BottomSheet component lets you quickly and easily add status indicators to your interface for improved usability. They are designed to be attention-grabbing and quickly convey important information.';
+
+export default BottomSheetBasic;
+
+export { BottomSheet };