refactor: resolved one more TODO

kirillzyusko · Oct 29, 2023 · b2b93a6 · b2b93a6
1 parent 2c5bfc4
commit b2b93a6
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 20 deletions.
diff --git a/TODO b/TODO
@@ -4,7 +4,7 @@
 - (x) mention in readme/package.json
 - (x) design a multifunctional API
 - (x) draw lottie animation (re-use existing one? for KAV?)
-- test StickyFooter on chat examples
-- test how keyboard changes size
-- use common TextInput component - same as usual KeyboardAwareScrollView example
+- (x) test StickyFooter on chat examples
+- (x) test how keyboard changes size
+- (x) use common TextInput component - same as usual KeyboardAwareScrollView example
 - port example to Fabric
diff --git a/...ns/Examples/AwareScrollView/TextInput.tsx → example/src/components/TextInput/index.tsx b/...ns/Examples/AwareScrollView/TextInput.tsx → example/src/components/TextInput/index.tsx
diff --git a/example/src/screens/Examples/AwareScrollView/index.tsx b/example/src/screens/Examples/AwareScrollView/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useResizeMode } from 'react-native-keyboard-controller';
 
 import KeyboardAwareScrollView from '../../../components/AwareScrollView';
-import TextInput from './TextInput';
+import TextInput from '../../../components/TextInput';
 import { styles } from './styles';
 
 export default function AwareScrollView() {

diff --git a/example/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx b/example/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx
@@ -1,11 +1,12 @@
-import React, { useCallback, useState } from 'react';
-import { LayoutChangeEvent, TextInput, View, Text, Button } from 'react-native';
+import React, { useCallback, useMemo, useState } from 'react';
+import { LayoutChangeEvent, View, Text, Button } from 'react-native';
 import { useResizeMode, KeyboardStickyView } from 'react-native-keyboard-controller';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { randomColor } from '../../../utils';
 
 import KeyboardAwareScrollView from '../../../components/AwareScrollView';
+import TextInput from '../../../components/TextInput';
 import { styles } from './styles';
 
 export default function AwareScrollViewStickyFooter() {
@@ -17,40 +18,33 @@ export default function AwareScrollViewStickyFooter() {
   const handleLayout = useCallback((evt: LayoutChangeEvent) => {
     setFooterHeight(evt.nativeEvent.layout.height);
   }, []);
+  const offset = useMemo(() => ({closed: 0, opened: bottom }), [bottom]);
 
   return (
     <View style={[styles.pageContainer, { paddingBottom: bottom }]}>
       <KeyboardAwareScrollView
         style={styles.container}
+        contentContainerStyle={styles.content}
         bottomOffset={footerHeight + 50}
         keyboardShouldPersistTaps="handled"
       >
         {new Array(10).fill(0).map((_, i) => (
           <TextInput
             key={i}
-            placeholder={`${i}`}
-            placeholderTextColor="black"
+            placeholder={`TextInput#${i}`}
             keyboardType={i % 2 === 0 ? 'numeric' : 'default'}
-            style={{
-              width: '100%',
-              height: 50,
-              backgroundColor: randomColor(),
-              marginTop: 50,
-            }}
           />
         ))}
       </KeyboardAwareScrollView>
-      {/*<KeyboardStickyView
-        offset={{closed: 0, opened: bottom }}
-      >
+      <KeyboardStickyView offset={offset}>
         <View onLayout={handleLayout} style={styles.footer}>
           <Text style={styles.footerText}>A mocked sticky footer</Text>
           <Button title="Click me" />
         </View>
-          </KeyboardStickyView>*/}
-      <KeyboardStickyView offset={{closed: -50, opened: bottom - 25}}>
+          </KeyboardStickyView>
+      {/*<KeyboardStickyView offset={{closed: -50, opened: bottom - 25}}>
         <View style={{position: 'absolute', bottom: 0, right: 30, justifyContent: "flex-end", width: 60, height: 60, borderRadius: 30, backgroundColor: "#002099"}} />
-      </KeyboardStickyView>
+          </KeyboardStickyView>*/}
     </View>
   );
 }
diff --git a/example/src/screens/Examples/AwareScrollViewStickyFooter/styles.ts b/example/src/screens/Examples/AwareScrollViewStickyFooter/styles.ts
@@ -3,6 +3,10 @@ import { StyleSheet } from 'react-native';
 export const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
+    paddingHorizontal: 16,
+  },
+  content: {
+    paddingTop: 50,
   },
   pageContainer: {
     flex: 1,