chore: update scrollview & flatlist examples

Author: lodev09

example/shared/src/components/Footer.tsx

@@ -1,7 +1,7 @@
 import { Platform, StyleSheet, Text, View, type PressableProps, Pressable } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { DARK_GRAY, FOOTER_HEIGHT } from '../utils';
+import { DARK_GRAY, FOOTER_HEIGHT, SPACING } from '../utils';
 
 const isIPad = Platform.OS === 'ios' && Platform.isPad;
 
@@ -28,10 +28,10 @@ const styles = StyleSheet.create({
   },
   container: {
     height: FOOTER_HEIGHT,
-    alignItems: 'center',
-    justifyContent: 'center',
+    padding: SPACING,
   },
   text: {
+    textAlign: 'center',
     color: '#fff',
   },
 });

example/shared/src/components/sheets/ScrollViewSheet.tsx

@@ -13,6 +13,8 @@ import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet
 import { BORDER_RADIUS, DARK, FOOTER_HEIGHT, GAP, LIGHT_GRAY, SPACING, times } from '../../utils';
 import { Footer } from '../Footer';
 import { Header } from '../Header';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Input } from '../Input';
 
 interface ScrollViewSheetProps extends TrueSheetProps {}
 
@@ -40,6 +42,7 @@ const HeavyItem = ({ index }: { index: number }) => {
 };
 
 export const ScrollViewSheet = forwardRef<TrueSheet, ScrollViewSheetProps>((props, ref) => {
+  const insets = useSafeAreaInsets();
   return (
     <TrueSheet
       ref={ref}
@@ -48,13 +51,24 @@ export const ScrollViewSheet = forwardRef<TrueSheet, ScrollViewSheetProps>((prop
       scrollable
       backgroundColor={Platform.select({ android: DARK })}
       header={<Header />}
-      footer={<Footer />}
+      footer={
+        <Footer>
+          <Input />
+        </Footer>
+      }
       onDidDismiss={() => console.log('Sheet ScrollView dismissed!')}
       onDidPresent={() => console.log(`Sheet ScrollView presented!`)}
       {...props}
     >
-      <ScrollView nestedScrollEnabled contentContainerStyle={styles.content} indicatorStyle="black">
-        {times(500, (i) => (
+      <ScrollView
+        nestedScrollEnabled
+        contentContainerStyle={[
+          styles.content,
+          { paddingBottom: FOOTER_HEIGHT + SPACING + insets.bottom },
+        ]}
+        indicatorStyle="black"
+      >
+        {times(20, (i) => (
           <HeavyItem key={i} index={i} />
         ))}
       </ScrollView>

example/shared/src/screens/ModalScreen.tsx

@@ -2,9 +2,9 @@ import { useRef, useState, useEffect } from 'react';
 import { Modal, StyleSheet, Text, View } from 'react-native';
 import { TrueSheet, TrueSheetProvider } from '@lodev09/react-native-true-sheet';
 
-import { BLUE, DARK, DARK_BLUE, DARK_GRAY, GAP, LIGHT_GRAY, SPACING } from '../utils';
-import { Button, DemoContent, Input, Spacer } from '../components';
-import { PromptSheet, FlatListSheet } from '../components/sheets';
+import { BLUE, DARK_GRAY, GAP, LIGHT_GRAY, SPACING } from '../utils';
+import { Button, Input, Spacer } from '../components';
+import { PromptSheet, FlatListSheet, ScrollViewSheet } from '../components/sheets';
 
 export interface ModalScreenProps {
   onNavigateToTest?: () => void;
@@ -16,12 +16,13 @@ export const ModalScreen = ({ onNavigateToTest, onDismiss }: ModalScreenProps) =
   const flatlistSheet = useRef<TrueSheet>(null);
 
   const [modalVisible, setModalVisible] = useState(false);
-  const modalSimpleSheet = useRef<TrueSheet>(null);
+  const modalPromptSheet = useRef<TrueSheet>(null);
   const modalFlatlistSheet = useRef<TrueSheet>(null);
+  const modalScrollViewSheet = useRef<TrueSheet>(null);
 
   useEffect(() => {
     if (modalVisible) {
-      modalSimpleSheet.current?.present();
+      modalPromptSheet.current?.present();
     }
   }, [modalVisible]);
 
@@ -58,23 +59,18 @@ export const ModalScreen = ({ onNavigateToTest, onDismiss }: ModalScreenProps) =
                   This is a React Native Modal. You can present TrueSheets from here!
                 </Text>
               </View>
-              <Button text="Simple Sheet" onPress={() => modalSimpleSheet.current?.present()} />
+              <Button text="Prompt Sheet" onPress={() => modalPromptSheet.current?.present()} />
+              <Button
+                text="ScrollView Sheet"
+                onPress={() => modalScrollViewSheet.current?.present()}
+              />
               <Button text="FlatList Sheet" onPress={() => modalFlatlistSheet.current?.present()} />
               <Spacer />
               <Button text="Close Modal" onPress={() => setModalVisible(false)} />
 
-              <TrueSheet
-                ref={modalSimpleSheet}
-                detents={['auto']}
-                // initialDetentIndex={0}
-                dimmed={false}
-                style={styles.simpleSheet}
-                backgroundColor={DARK}
-              >
-                <DemoContent color={DARK_BLUE} text="Simple Sheet" />
-                <Button text="Dismiss" onPress={() => modalSimpleSheet.current?.dismiss()} />
-              </TrueSheet>
+              <PromptSheet ref={modalPromptSheet} />
               <FlatListSheet ref={modalFlatlistSheet} />
+              <ScrollViewSheet ref={modalScrollViewSheet} />
             </View>
           </TrueSheetProvider>
         </Modal>
@@ -98,10 +94,6 @@ const styles = StyleSheet.create({
     padding: SPACING,
     gap: GAP,
   },
-  simpleSheet: {
-    padding: SPACING,
-    gap: GAP,
-  },
   heading: {
     marginBottom: SPACING * 2,
   },