feat: update example

lodev09 · Dec 12, 2024 · fc57d2f · fc57d2f
1 parent 55dc18e
commit fc57d2f
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 95 deletions.
diff --git a/android/build.gradle b/android/build.gradle
@@ -26,10 +26,9 @@ def isNewArchitectureEnabled() {
 apply plugin: "com.android.library"
 apply plugin: "kotlin-android"
 
-// TODO: Getting build error with this block :(
-// if (isNewArchitectureEnabled()) {
-//   apply plugin: "com.facebook.react"
-// }
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
 
 def getExtOrDefault(name) {
   return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["TrueSheet_" + name]

diff --git a/example/android/app/src/main/res/values/styles.xml b/example/android/app/src/main/res/values/styles.xml
@@ -1,7 +1,9 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <!-- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar"> -->
+    <!-- https://github.com/zoontek/react-native-edge-to-edge?tab=readme-ov-file#bare-react-native -->
+    <style name="AppTheme" parent="Theme.EdgeToEdge">
         <!-- Customize your theme here. -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     </style>

diff --git a/example/package.json b/example/package.json
@@ -12,8 +12,7 @@
   "dependencies": {
     "react": "18.3.1",
     "react-native": "0.76.3",
-    "react-native-gesture-handler": "^2.21.2",
-    "react-native-is-edge-to-edge": "^1.1.6",
+    "react-native-edge-to-edge": "^1.1.3",
     "react-native-maps": "^1.20.1",
     "react-native-reanimated": "^3.16.3"
   },

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -51,6 +51,7 @@ export default function App() {
         ref={sheetRef}
         blurTint="dark"
         backgroundColor={DARK}
+        edgeToEdge
         contentContainerStyle={{ padding: SPACING, paddingBottom: SPACING * 3 }}
         dimmedIndex={2}
         dismissible={false}

diff --git a/example/src/components/DemoContent.tsx b/example/src/components/DemoContent.tsx
@@ -1,11 +1,4 @@
-import {
-  View,
-  type ColorValue,
-  type ViewProps,
-  type TextStyle,
-  type ViewStyle,
-  Text,
-} from 'react-native'
+import { View, type ColorValue, type ViewProps, Text, StyleSheet } from 'react-native'
 import { BORDER_RADIUS, SPACING } from '../utils'
 
 interface DemoContentProps extends ViewProps {
@@ -18,23 +11,24 @@ export const DemoContent = (props: DemoContentProps) => {
   const { text, radius = BORDER_RADIUS, style: $style, color = 'rgba(0,0,0,0.2)', ...rest } = props
   return (
     <View
-      style={[$demoContent, { backgroundColor: color, borderRadius: radius }, $style]}
+      style={[styles.content, { backgroundColor: color, borderRadius: radius }, $style]}
       {...rest}
     >
-      {text && <Text style={$demoText}>{text}</Text>}
+      {text && <Text style={styles.text}>{text}</Text>}
     </View>
   )
 }
 
-const $demoContent: ViewStyle = {
-  height: 100,
-  marginBottom: 16,
-  padding: SPACING / 2,
-  alignItems: 'center',
-}
-
-const $demoText: TextStyle = {
-  fontSize: 16,
-  lineHeight: 20,
-  color: 'white',
-}
+const styles = StyleSheet.create({
+  content: {
+    height: 100,
+    marginBottom: 16,
+    padding: SPACING / 2,
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 20,
+    color: 'white',
+  },
+})
diff --git a/example/src/sheets/GestureSheet.tsx b/example/src/sheets/GestureSheet.tsx
@@ -1,13 +1,13 @@
 import { forwardRef, useRef, type Ref, useImperativeHandle } from 'react'
-import { type ViewStyle, useWindowDimensions, StyleSheet } from 'react-native'
+import { StyleSheet, Text } 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 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'
+import { DARK, DARK_GRAY, GRABBER_COLOR, SPACING } from '../utils'
+import { Button, Footer, Spacer } from '../components'
 
-const BOXES_COUNT = 20
+// const BOXES_COUNT = 20
 const CONTAINER_HEIGHT = 200
 const BOX_GAP = SPACING
 const BOX_SIZE = CONTAINER_HEIGHT - SPACING * 2
@@ -17,29 +17,29 @@ 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 scrollX = useSharedValue(0)
+  // const dimensions = useWindowDimensions()
 
   const dismiss = async () => {
     await sheetRef.current?.dismiss()
   }
 
-  const $animatedContainer: ViewStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: scrollX.value }],
-  }))
+  // 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])
+  // 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)
 
@@ -60,7 +60,14 @@ export const GestureSheet = forwardRef((props: GestureSheetProps, ref: Ref<TrueS
       FooterComponent={<Footer />}
       {...props}
     >
-      <GestureHandlerRootView>
+      <Text style={styles.text}>
+        react-native-gesture-handler is causing build issues on Android at this time 🤷‍♂️
+      </Text>
+      <Spacer />
+      <Text style={styles.text}>Removed for now.</Text>
+      <Spacer />
+      <Button text="Dismis" onPress={dismiss} />
+      {/*<GestureHandlerRootView>
         <GestureDetector gesture={pan}>
           <Animated.View style={[styles.panContainer, $animatedContainer]}>
             {times(BOXES_COUNT, (i) => (
@@ -69,7 +76,7 @@ export const GestureSheet = forwardRef((props: GestureSheetProps, ref: Ref<TrueS
           </Animated.View>
         </GestureDetector>
         <Button text="Dismis" onPress={dismiss} />
-      </GestureHandlerRootView>
+      </GestureHandlerRootView>*/}
     </TrueSheet>
   )
 })
@@ -94,4 +101,9 @@ const styles = StyleSheet.create({
     marginBottom: SPACING,
     paddingVertical: SPACING,
   },
+  text: {
+    fontSize: 16,
+    lineHeight: 20,
+    color: 'white',
+  },
 })
diff --git a/src/TrueSheet.types.ts b/src/TrueSheet.types.ts
@@ -231,11 +231,9 @@ export interface TrueSheetProps extends ViewProps {
   keyboardMode?: 'resize' | 'pan'
 
   /**
-   * Determines how the software keyboard will impact the layout of the sheet.
-   * Set to `pan` if you're working with `FlatList` with a `TextInput`.
+   * Supports edge-to-edge on Android.
    *
    * @platform android
-   * @default `true` is `react-native-edge-to-edge` is installed, `false` otherwise
    */
   edgeToEdge?: boolean
 

diff --git a/yarn.lock b/yarn.lock
@@ -3284,15 +3284,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@egjs/hammerjs@npm:^2.0.17":
-  version: 2.0.17
-  resolution: "@egjs/hammerjs@npm:2.0.17"
-  dependencies:
-    "@types/hammerjs": ^2.0.36
-  checksum: 8945137cec5837edd70af3f2e0ea621543eb0aa3b667e6269ec6485350f4d120c2434b37c7c30b1cf42a65275dd61c1f24626749c616696d3956ac0c008c4766
-  languageName: node
-  linkType: hard
-
 "@eslint-community/eslint-utils@npm:^4.2.0":
   version: 4.4.1
   resolution: "@eslint-community/eslint-utils@npm:4.4.1"
@@ -4998,13 +4989,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/hammerjs@npm:^2.0.36":
-  version: 2.0.46
-  resolution: "@types/hammerjs@npm:2.0.46"
-  checksum: caba6ec788d19905c71092670b58514b3d1f5eee5382bf9205e8df688d51e7857b7994e2dd7aed57fac8977bdf0e456d67fbaf23440a4385b8ce25fe2af1ec39
-  languageName: node
-  linkType: hard
-
 "@types/hast@npm:^3.0.0":
   version: 3.0.4
   resolution: "@types/hast@npm:3.0.4"
@@ -10913,7 +10897,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0":
+"hoist-non-react-statics@npm:^3.1.0":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -17382,28 +17366,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-gesture-handler@npm:^2.21.2":
-  version: 2.21.2
-  resolution: "react-native-gesture-handler@npm:2.21.2"
-  dependencies:
-    "@egjs/hammerjs": ^2.0.17
-    hoist-non-react-statics: ^3.3.0
-    invariant: ^2.2.4
-    prop-types: ^15.7.2
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-  checksum: 0a42cedb8860a326b465085d0f7622ba03f038b0f0bdd1b1fe5703e58d62cb08bfb82a686c069a1a1410705c2ae0d82971b0449d83796fdd6d071131cf88e68b
-  languageName: node
-  linkType: hard
-
-"react-native-is-edge-to-edge@npm:^1.1.6":
-  version: 1.1.6
-  resolution: "react-native-is-edge-to-edge@npm:1.1.6"
+"react-native-edge-to-edge@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "react-native-edge-to-edge@npm:1.1.3"
   peerDependencies:
     react: ">=18.2.0"
     react-native: ">=0.73.0"
-  checksum: 4e07c1e34c01c8d50fd7c1d0460db06f6f0515197405230386a8ffb950cb724b10743af032310d1384df0a90059bfb8992ba2d93344ce86315315f0493feccc2
+  checksum: 712c4cab722640dee0153fe7ba5663cb34a3a30310a9e3792678ac2b58b9cf6acd1677a2cdd73b63aeca3bfa99e5fb6f18cded7752f52ed3aa0eea120e39916d
   languageName: node
   linkType: hard
 
@@ -17462,8 +17431,7 @@ __metadata:
     react: 18.3.1
     react-native: 0.76.3
     react-native-builder-bob: ^0.33.3
-    react-native-gesture-handler: ^2.21.2
-    react-native-is-edge-to-edge: ^1.1.6
+    react-native-edge-to-edge: ^1.1.3
     react-native-maps: ^1.20.1
     react-native-reanimated: ^3.16.3
   languageName: unknown