chore(example): fix types

Author: lodev09

example/src/components/sheets/BasicSheet.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useRef, type Ref, useImperativeHandle } from 'react'
-import { type ViewStyle } from 'react-native'
+import { StyleSheet } from 'react-native'
 import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet'
 
 import { DARK, DARK_BLUE, GRABBER_COLOR, SPACING } from '../../utils'
@@ -44,7 +44,7 @@ export const BasicSheet = forwardRef((props: BasicSheetProps, ref: Ref<TrueSheet
     <TrueSheet
       sizes={['auto', '80%', 'large']}
       ref={sheetRef}
-      contentContainerStyle={$content}
+      contentContainerStyle={styles.content}
       blurTint="dark"
       backgroundColor={DARK}
       cornerRadius={12}
@@ -92,7 +92,7 @@ export const BasicSheet = forwardRef((props: BasicSheetProps, ref: Ref<TrueSheet
         ref={childSheet}
         sizes={['auto']}
         backgroundColor={DARK}
-        contentContainerStyle={$content}
+        contentContainerStyle={styles.content}
         FooterComponent={<Footer />}
       >
         <DemoContent color={DARK_BLUE} />
@@ -104,8 +104,10 @@ export const BasicSheet = forwardRef((props: BasicSheetProps, ref: Ref<TrueSheet
   )
 })
 
-const $content: ViewStyle = {
-  padding: SPACING,
-}
+const styles = StyleSheet.create({
+  content: {
+    padding: SPACING,
+  },
+})
 
 BasicSheet.displayName = 'BasicSheet'

example/src/components/sheets/BlankSheet.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, type Ref } from 'react'
-import { Text, type ViewStyle } from 'react-native'
+import { StyleSheet, Text } from 'react-native'
 import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet'
 
 import { $WHITE_TEXT, DARK, SPACING } from '../../utils'
@@ -16,16 +16,18 @@ export const BlankSheet = forwardRef((props: BlankSheetProps, ref: Ref<TrueSheet
       edgeToEdge
       backgroundColor={DARK}
       keyboardMode="pan"
-      contentContainerStyle={$content}
+      contentContainerStyle={styles.content}
       {...props}
     >
       <Text style={$WHITE_TEXT}>Blank Sheet</Text>
     </TrueSheet>
   )
 })
 
-const $content: ViewStyle = {
-  padding: SPACING,
-}
+const styles = StyleSheet.create({
+  content: {
+    padding: SPACING,
+  },
+})
 
 BlankSheet.displayName = 'BlankSheet'

example/src/components/sheets/GestureSheet.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useRef, type Ref, useImperativeHandle } from 'react'
-import { useWindowDimensions, type ViewStyle } from 'react-native'
+import { StyleSheet, useWindowDimensions, type ViewStyle } 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'
@@ -49,7 +49,7 @@ export const GestureSheet = forwardRef((props: GestureSheetProps, ref: Ref<TrueS
     <TrueSheet
       sizes={['auto']}
       ref={sheetRef}
-      contentContainerStyle={$content}
+      contentContainerStyle={styles.content}
       blurTint="dark"
       edgeToEdge
       backgroundColor={DARK}
@@ -67,11 +67,11 @@ export const GestureSheet = forwardRef((props: GestureSheetProps, ref: Ref<TrueS
       FooterComponent={<Footer />}
       {...props}
     >
-      <GestureHandlerRootView style={$gestureRoot}>
+      <GestureHandlerRootView style={styles.gestureRoot}>
         <GestureDetector gesture={pan}>
-          <Animated.View style={[$panContainer, $animatedContainer]}>
+          <Animated.View style={[styles.panContainer, $animatedContainer]}>
             {times(BOXES_COUNT, (i) => (
-              <DemoContent key={i} text={String(i + 1)} style={$box} />
+              <DemoContent key={i} text={String(i + 1)} style={styles.box} />
             ))}
           </Animated.View>
         </GestureDetector>
@@ -81,28 +81,27 @@ export const GestureSheet = forwardRef((props: GestureSheetProps, ref: Ref<TrueS
   )
 })
 
-const $gestureRoot: ViewStyle = {
-  flexGrow: 1,
-}
-
-const $box: ViewStyle = {
-  alignItems: 'center',
-  backgroundColor: DARK_GRAY,
-  height: BOX_SIZE,
-  justifyContent: 'center',
-  width: BOX_SIZE,
-}
-
-const $content: ViewStyle = {
-  padding: SPACING,
-}
-
-const $panContainer: ViewStyle = {
-  flexDirection: 'row',
-  gap: BOX_GAP,
-  height: CONTAINER_HEIGHT,
-  marginBottom: SPACING,
-  paddingVertical: SPACING,
-}
+const styles = StyleSheet.create({
+  gestureRoot: {
+    flexGrow: 1,
+  },
+  box: {
+    alignItems: 'center',
+    backgroundColor: DARK_GRAY,
+    height: BOX_SIZE,
+    justifyContent: 'center',
+    width: BOX_SIZE,
+  },
+  content: {
+    padding: SPACING,
+  },
+  panContainer: {
+    flexDirection: 'row',
+    gap: BOX_GAP,
+    height: CONTAINER_HEIGHT,
+    marginBottom: SPACING,
+    paddingVertical: SPACING,
+  },
+})
 
 GestureSheet.displayName = 'GestureSheet'

example/src/components/sheets/PromptSheet.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useRef, type Ref, useImperativeHandle, useState } from 'react'
-import type { ViewStyle } from 'react-native'
+import { StyleSheet } from 'react-native'
 import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet'
 
 import { DARK, DARK_BLUE, GRABBER_COLOR, SPACING } from '../../utils'
@@ -39,7 +39,7 @@ export const PromptSheet = forwardRef((props: PromptSheetProps, ref: Ref<TrueShe
       edgeToEdge
       name="prompt-sheet"
       sizes={['auto', 'large']}
-      contentContainerStyle={$content}
+      contentContainerStyle={styles.content}
       blurTint="dark"
       backgroundColor={DARK}
       cornerRadius={12}
@@ -65,8 +65,10 @@ export const PromptSheet = forwardRef((props: PromptSheetProps, ref: Ref<TrueShe
   )
 })
 
-PromptSheet.displayName = 'PromptSheet'
+const styles = StyleSheet.create({
+  content: {
+    padding: SPACING,
+  },
+})
 
-const $content: ViewStyle = {
-  padding: SPACING,
-}
+PromptSheet.displayName = 'PromptSheet'