From 3044e02ddd57d007f4a39721d89a779a0829e3f0 Mon Sep 17 00:00:00 2001
From: kirillzyusko <zyusko.kirik@gmail.com>
Date: Sun, 29 Oct 2023 21:55:53 +0100
Subject: [PATCH] refactor: port to fabric

---
 .../KeyboardAwareScrollView.tsx               | 15 +++---
 .../src/components/AwareScrollView/index.ts   |  1 +
 .../useSmoothKeyboardHandler.ts               |  0
 .../TextInput/index.tsx}                      |  2 +-
 FabricExample/src/constants/screenNames.ts    |  1 +
 .../src/navigation/ExamplesStack/index.tsx    | 10 ++++
 .../Examples/AwareScrollView/index.tsx        |  6 +--
 .../AwareScrollViewStickyFooter/index.tsx     | 48 +++++++++++++++++++
 .../AwareScrollViewStickyFooter/styles.ts     | 26 ++++++++++
 .../src/screens/Examples/Main/constants.ts    |  5 ++
 TODO                                          | 10 ----
 .../AwareScrollViewStickyFooter/index.tsx     |  2 -
 12 files changed, 104 insertions(+), 22 deletions(-)
 rename FabricExample/src/{screens/Examples => components}/AwareScrollView/KeyboardAwareScrollView.tsx (95%)
 create mode 100644 FabricExample/src/components/AwareScrollView/index.ts
 rename FabricExample/src/{screens/Examples => components}/AwareScrollView/useSmoothKeyboardHandler.ts (100%)
 rename FabricExample/src/{screens/Examples/AwareScrollView/TextInput.tsx => components/TextInput/index.tsx} (96%)
 create mode 100644 FabricExample/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx
 create mode 100644 FabricExample/src/screens/Examples/AwareScrollViewStickyFooter/styles.ts
 delete mode 100644 TODO

diff --git a/FabricExample/src/screens/Examples/AwareScrollView/KeyboardAwareScrollView.tsx b/FabricExample/src/components/AwareScrollView/KeyboardAwareScrollView.tsx
similarity index 95%
rename from FabricExample/src/screens/Examples/AwareScrollView/KeyboardAwareScrollView.tsx
rename to FabricExample/src/components/AwareScrollView/KeyboardAwareScrollView.tsx
index 6019acf6e..3d028f080 100644
--- a/FabricExample/src/screens/Examples/AwareScrollView/KeyboardAwareScrollView.tsx
+++ b/FabricExample/src/components/AwareScrollView/KeyboardAwareScrollView.tsx
@@ -13,7 +13,9 @@ import Reanimated, {
 } from 'react-native-reanimated';
 import { useSmoothKeyboardHandler } from './useSmoothKeyboardHandler';
 
-const BOTTOM_OFFSET = 50;
+type KeyboardAwareScrollViewProps = {
+  bottomOffset?: number;
+} & ScrollViewProps;
 
 /**
  * Everything begins from `onStart` handler. This handler is called every time,
@@ -53,8 +55,9 @@ const BOTTOM_OFFSET = 50;
  * +============================+       +============================+        +=====================================+
  *
  */
-const KeyboardAwareScrollView: FC<ScrollViewProps> = ({
+const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
   children,
+  bottomOffset = 0,
   ...rest
 }) => {
   const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
@@ -85,11 +88,11 @@ const KeyboardAwareScrollView: FC<ScrollViewProps> = ({
     const visibleRect = height - keyboardHeight.value;
     const point = (layout.value?.layout.absoluteY || 0) + (layout.value?.layout.height || 0);
 
-    if (visibleRect - point <= BOTTOM_OFFSET) {
+    if (visibleRect - point <= bottomOffset) {
       const interpolatedScrollTo = interpolate(
         e,
         [initialKeyboardSize.value, keyboardHeight.value],
-        [0, keyboardHeight.value - (height - point) + BOTTOM_OFFSET]
+        [0, keyboardHeight.value - (height - point) + bottomOffset]
       );
       const targetScrollY =
         Math.max(interpolatedScrollTo, 0) + scrollPosition.value;
@@ -99,7 +102,7 @@ const KeyboardAwareScrollView: FC<ScrollViewProps> = ({
     }
 
     return 0;
-  }, []);
+  }, [bottomOffset]);
 
   useSmoothKeyboardHandler(
     {
@@ -158,7 +161,7 @@ const KeyboardAwareScrollView: FC<ScrollViewProps> = ({
         scrollPosition.value = position.value;
       },
     },
-    [height]
+    [height, maybeScroll]
   );
 
   useAnimatedReaction(() => input.value, (current, previous) => {
diff --git a/FabricExample/src/components/AwareScrollView/index.ts b/FabricExample/src/components/AwareScrollView/index.ts
new file mode 100644
index 000000000..5903f0ef7
--- /dev/null
+++ b/FabricExample/src/components/AwareScrollView/index.ts
@@ -0,0 +1 @@
+export { default } from "./KeyboardAwareScrollView";
diff --git a/FabricExample/src/screens/Examples/AwareScrollView/useSmoothKeyboardHandler.ts b/FabricExample/src/components/AwareScrollView/useSmoothKeyboardHandler.ts
similarity index 100%
rename from FabricExample/src/screens/Examples/AwareScrollView/useSmoothKeyboardHandler.ts
rename to FabricExample/src/components/AwareScrollView/useSmoothKeyboardHandler.ts
diff --git a/FabricExample/src/screens/Examples/AwareScrollView/TextInput.tsx b/FabricExample/src/components/TextInput/index.tsx
similarity index 96%
rename from FabricExample/src/screens/Examples/AwareScrollView/TextInput.tsx
rename to FabricExample/src/components/TextInput/index.tsx
index 00846b8f8..f9b92bf5a 100644
--- a/FabricExample/src/screens/Examples/AwareScrollView/TextInput.tsx
+++ b/FabricExample/src/components/TextInput/index.tsx
@@ -7,7 +7,7 @@ const TextInput = (props: TextInputProps) => {
       placeholderTextColor="#6c6c6c"
       style={styles.container}
       multiline
-      numberOfLines={10}
+      numberOfLines={2}
       {...props}
       placeholder={`${props.placeholder} (${props.keyboardType === 'default' ? 'text' : 'numeric'})`}
     />
diff --git a/FabricExample/src/constants/screenNames.ts b/FabricExample/src/constants/screenNames.ts
index 6020257e6..911d71bba 100644
--- a/FabricExample/src/constants/screenNames.ts
+++ b/FabricExample/src/constants/screenNames.ts
@@ -3,6 +3,7 @@ export enum ScreenNames {
   REANIMATED_CHAT = 'REANIMATED_CHAT',
   EVENTS = 'EVENTS',
   AWARE_SCROLL_VIEW = 'AWARE_SCROLL_VIEW',
+  AWARE_SCROLL_VIEW_STICKY_FOOTER = 'AWARE_SCROLL_VIEW_STICKY_FOOTER',
   STATUS_BAR = 'STATUS_BAR',
   LOTTIE = 'LOTTIE',
   EXAMPLES_STACK = 'EXAMPLES_STACK',
diff --git a/FabricExample/src/navigation/ExamplesStack/index.tsx b/FabricExample/src/navigation/ExamplesStack/index.tsx
index b6c7e497d..61d8f62bc 100644
--- a/FabricExample/src/navigation/ExamplesStack/index.tsx
+++ b/FabricExample/src/navigation/ExamplesStack/index.tsx
@@ -15,12 +15,14 @@ import InteractiveKeyboardIOS from '../../screens/Examples/InteractiveKeyboardIO
 import NativeStack from '../NestedStack';
 import KeyboardAvoidingViewExample from '../../screens/Examples/KeyboardAvoidingView';
 import EnabledDisabled from '../../screens/Examples/EnabledDisabled';
+import AwareScrollViewStickyFooter from '../../screens/Examples/AwareScrollViewStickyFooter';
 
 export type ExamplesStackParamList = {
   [ScreenNames.ANIMATED_EXAMPLE]: undefined;
   [ScreenNames.REANIMATED_CHAT]: undefined;
   [ScreenNames.EVENTS]: undefined;
   [ScreenNames.AWARE_SCROLL_VIEW]: undefined;
+  [ScreenNames.AWARE_SCROLL_VIEW_STICKY_FOOTER]: undefined;
   [ScreenNames.STATUS_BAR]: undefined;
   [ScreenNames.LOTTIE]: undefined;
   [ScreenNames.NON_UI_PROPS]: undefined;
@@ -46,6 +48,9 @@ const options = {
   [ScreenNames.AWARE_SCROLL_VIEW]: {
     title: 'Aware scroll view',
   },
+  [ScreenNames.AWARE_SCROLL_VIEW_STICKY_FOOTER]: {
+    title: 'Aware scroll view sticky footer',
+  },
   [ScreenNames.STATUS_BAR]: {
     headerShown: false,
     title: 'Status bar manipulation',
@@ -95,6 +100,11 @@ const ExamplesStack = () => (
       component={AwareScrollView}
       options={options[ScreenNames.AWARE_SCROLL_VIEW]}
     />
+    <Stack.Screen
+      name={ScreenNames.AWARE_SCROLL_VIEW_STICKY_FOOTER}
+      component={AwareScrollViewStickyFooter}
+      options={options[ScreenNames.AWARE_SCROLL_VIEW_STICKY_FOOTER]}
+    />
     <Stack.Screen
       name={ScreenNames.STATUS_BAR}
       component={StatusBar}
diff --git a/FabricExample/src/screens/Examples/AwareScrollView/index.tsx b/FabricExample/src/screens/Examples/AwareScrollView/index.tsx
index 482dc3fea..61968a6aa 100644
--- a/FabricExample/src/screens/Examples/AwareScrollView/index.tsx
+++ b/FabricExample/src/screens/Examples/AwareScrollView/index.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { useResizeMode } from 'react-native-keyboard-controller';
 
-import KeyboardAwareScrollView from './KeyboardAwareScrollView';
-import TextInput from './TextInput';
+import KeyboardAwareScrollView from '../../../components/AwareScrollView';
+import TextInput from '../../../components/TextInput';
 import { styles } from './styles';
 
 export default function AwareScrollView() {
   useResizeMode();
 
   return (
-    <KeyboardAwareScrollView style={styles.container} contentContainerStyle={styles.content}>
+    <KeyboardAwareScrollView bottomOffset={50} style={styles.container} contentContainerStyle={styles.content}>
       {new Array(10).fill(0).map((_, i) => (
         <TextInput
           key={i}
diff --git a/FabricExample/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx b/FabricExample/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx
new file mode 100644
index 000000000..e8ff07849
--- /dev/null
+++ b/FabricExample/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx
@@ -0,0 +1,48 @@
+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 KeyboardAwareScrollView from '../../../components/AwareScrollView';
+import TextInput from '../../../components/TextInput';
+import { styles } from './styles';
+
+export default function AwareScrollViewStickyFooter() {
+  useResizeMode();
+
+  const { bottom } = useSafeAreaInsets();
+  const [footerHeight, setFooterHeight] = useState(0);
+
+  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={`TextInput#${i}`}
+            keyboardType={i % 2 === 0 ? 'numeric' : 'default'}
+          />
+        ))}
+      </KeyboardAwareScrollView>
+      <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}}>
+        <View style={{position: 'absolute', bottom: 0, right: 30, justifyContent: "flex-end", width: 60, height: 60, borderRadius: 30, backgroundColor: "#002099"}} />
+          </KeyboardStickyView>*/}
+    </View>
+  );
+}
diff --git a/FabricExample/src/screens/Examples/AwareScrollViewStickyFooter/styles.ts b/FabricExample/src/screens/Examples/AwareScrollViewStickyFooter/styles.ts
new file mode 100644
index 000000000..1f08ac6ea
--- /dev/null
+++ b/FabricExample/src/screens/Examples/AwareScrollViewStickyFooter/styles.ts
@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    paddingHorizontal: 16,
+  },
+  content: {
+    paddingTop: 50,
+  },
+  pageContainer: {
+    flex: 1,
+  },
+  footer: {
+    backgroundColor: 'green',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+    width: '100%',
+    gap: 10,
+  },
+  footerText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+});
diff --git a/FabricExample/src/screens/Examples/Main/constants.ts b/FabricExample/src/screens/Examples/Main/constants.ts
index 910863099..290352c1d 100644
--- a/FabricExample/src/screens/Examples/Main/constants.ts
+++ b/FabricExample/src/screens/Examples/Main/constants.ts
@@ -14,6 +14,11 @@ export const examples: Example[] = [
     info: ScreenNames.AWARE_SCROLL_VIEW,
     icons: '🤓',
   },
+  {
+    title: 'Aware scroll view sticky footer',
+    info: ScreenNames.AWARE_SCROLL_VIEW_STICKY_FOOTER,
+    icons: '🤓🩹',
+  },
   {
     title: 'Status Bar',
     info: ScreenNames.STATUS_BAR,
diff --git a/TODO b/TODO
deleted file mode 100644
index 685f096e0..000000000
--- a/TODO
+++ /dev/null
@@ -1,10 +0,0 @@
-- (x) input changes color when keyboard appear/disappear <- on layout on inner view
-- (x) export `KeyboardStickyView`/`StickyKeyboardView`/`StickyFooter` component from src
-- (x) write documentation
-- (x) mention in readme/package.json
-- (x) design a multifunctional API
-- (x) draw lottie animation (re-use existing one? for KAV?)
-- (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/AwareScrollViewStickyFooter/index.tsx b/example/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx
index 7dfb5b244..e8ff07849 100644
--- a/example/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx
+++ b/example/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx
@@ -3,8 +3,6 @@ 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';