From b2b93a66c0579a72f140dbaddc127955a16cdff2 Mon Sep 17 00:00:00 2001
From: kirillzyusko <zyusko.kirik@gmail.com>
Date: Sun, 29 Oct 2023 20:32:29 +0100
Subject: [PATCH] refactor: resolved one more TODO

---
 TODO                                          |  6 ++---
 .../TextInput/index.tsx}                      |  0
 .../Examples/AwareScrollView/index.tsx        |  2 +-
 .../AwareScrollViewStickyFooter/index.tsx     | 26 +++++++------------
 .../AwareScrollViewStickyFooter/styles.ts     |  4 +++
 5 files changed, 18 insertions(+), 20 deletions(-)
 rename example/src/{screens/Examples/AwareScrollView/TextInput.tsx => components/TextInput/index.tsx} (100%)

diff --git a/TODO b/TODO
index b4e1bd052..685f096e0 100644
--- 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/example/src/screens/Examples/AwareScrollView/TextInput.tsx b/example/src/components/TextInput/index.tsx
similarity index 100%
rename from example/src/screens/Examples/AwareScrollView/TextInput.tsx
rename to example/src/components/TextInput/index.tsx
diff --git a/example/src/screens/Examples/AwareScrollView/index.tsx b/example/src/screens/Examples/AwareScrollView/index.tsx
index d7f53be02..61968a6aa 100644
--- 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
index 00f56c08a..7dfb5b244 100644
--- 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
index c72d49ce2..1f08ac6ea 100644
--- 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,