chore: add gesture sheet example

Author: lodev09

example/package.json

@@ -16,7 +16,9 @@
     "@react-native/virtualized-lists": "0.75.0-main",
     "expo": "~50.0.15",
     "react": "18.2.0",
-    "react-native": "0.73.6"
+    "react-native": "0.73.6",
+    "react-native-gesture-handler": "~2.14.0",
+    "react-native-reanimated": "~3.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

example/src/App.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react'
 import { View, type ViewStyle } from 'react-native'
 import { TrueSheet } from '@lodev09/react-native-true-sheet'
 
-import { BasicSheet, FlatListSheet, PromptSheet, ScrollViewSheet } from './sheets'
+import { BasicSheet, FlatListSheet, GestureSheet, PromptSheet, ScrollViewSheet } from './sheets'
 import { Button } from './components'
 import { BLUE } from './utils'
 
@@ -11,6 +11,7 @@ export default function App() {
   const promptSheet = useRef<TrueSheet>(null)
   const scrollViewSheet = useRef<TrueSheet>(null)
   const flatListSheet = useRef<TrueSheet>(null)
+  const gestureSheet = useRef<TrueSheet>(null)
 
   const presentBasicSheet = async (index = 0) => {
     await basicSheet.current?.present(index)
@@ -23,11 +24,13 @@ export default function App() {
       <Button text="TrueSheet Prompt" onPress={() => promptSheet.current?.present()} />
       <Button text="TrueSheet ScrollView" onPress={() => scrollViewSheet.current?.present()} />
       <Button text="TrueSheet FlatList" onPress={() => flatListSheet.current?.present()} />
+      <Button text="TrueSheet Gestures" onPress={() => gestureSheet.current?.present()} />
 
       <BasicSheet ref={basicSheet} />
       <PromptSheet ref={promptSheet} />
       <ScrollViewSheet ref={scrollViewSheet} />
       <FlatListSheet ref={flatListSheet} />
+      <GestureSheet ref={gestureSheet} />
     </View>
   )
 }

example/src/sheets/GestureSheet.tsx

@@ -0,0 +1,97 @@
+import React, { forwardRef, useRef, type Ref, useImperativeHandle } from 'react'
+import { type ViewStyle, useWindowDimensions } from 'react-native'
+import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet'
+import Animated, { useAnimatedStyle, useSharedValue, withDecay } from 'react-native-reanimated'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+
+import { DARK, DARK_GRAY, GRABBER_COLOR, SPACING, times } from '../utils'
+import { Button, DemoContent, Footer } from '../components'
+
+const BOXES_COUNT = 20
+const CONTAINER_HEIGHT = 200
+const BOX_GAP = SPACING
+const BOX_SIZE = CONTAINER_HEIGHT - SPACING * 2
+
+interface GestureSheetProps extends TrueSheetProps {}
+
+export const GestureSheet = forwardRef((props: GestureSheetProps, ref: Ref<TrueSheet>) => {
+  const sheetRef = useRef<TrueSheet>(null)
+
+  const scrollX = useSharedValue(0)
+  const dimensions = useWindowDimensions()
+
+  const dismiss = async () => {
+    await sheetRef.current?.dismiss()
+  }
+
+  const $animatedContainer: ViewStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: scrollX.value }],
+  }))
+
+  const pan = Gesture.Pan()
+    .onChange((e) => {
+      scrollX.value += e.changeX
+    })
+    .onFinalize((e) => {
+      scrollX.value = withDecay({
+        velocity: e.velocityX,
+        rubberBandEffect: true,
+        clamp: [-((BOX_SIZE + BOX_GAP) * BOXES_COUNT) + dimensions.width - SPACING, 0],
+      })
+    })
+    .activeOffsetX([-10, 10])
+
+  useImperativeHandle<TrueSheet | null, TrueSheet | null>(ref, () => sheetRef.current)
+
+  return (
+    <TrueSheet
+      sizes={['auto']}
+      ref={sheetRef}
+      contentContainerStyle={$content}
+      blurTint="dark"
+      backgroundColor={DARK}
+      cornerRadius={12}
+      grabberProps={{ color: GRABBER_COLOR }}
+      onDismiss={() => console.log('Gesture sheet dismissed!')}
+      onPresent={({ index, value }) =>
+        console.log(`Gesture sheet presented with size of ${value} at index: ${index}`)
+      }
+      onSizeChange={({ index, value }) => console.log(`Resized to:`, value, 'at index:', index)}
+      FooterComponent={<Footer />}
+      {...props}
+    >
+      <GestureHandlerRootView>
+        <GestureDetector gesture={pan}>
+          <Animated.View style={[$panContainer, $animatedContainer]}>
+            {times(BOXES_COUNT, (i) => (
+              <DemoContent key={i} text={String(i + 1)} style={$box} />
+            ))}
+          </Animated.View>
+        </GestureDetector>
+        <Button text="Dismis" onPress={dismiss} />
+      </GestureHandlerRootView>
+    </TrueSheet>
+  )
+})
+
+GestureSheet.displayName = 'GestureSheet'
+
+const $content: ViewStyle = {
+  padding: SPACING,
+}
+
+const $panContainer: ViewStyle = {
+  height: CONTAINER_HEIGHT,
+  flexDirection: 'row',
+  paddingVertical: SPACING,
+  marginBottom: SPACING,
+  gap: BOX_GAP,
+}
+
+const $box: ViewStyle = {
+  backgroundColor: DARK_GRAY,
+  width: BOX_SIZE,
+  height: BOX_SIZE,
+  alignItems: 'center',
+  justifyContent: 'center',
+}

example/src/sheets/index.ts

@@ -2,3 +2,4 @@ export * from './BasicSheet'
 export * from './PromptSheet'
 export * from './ScrollViewSheet'
 export * from './FlatListSheet'
+export * from './GestureSheet'