feat: KeyboardStickyView + example with KeyboardAwareScrollView (#245)

Co-authored-by: kirillzyusko <[email protected]>

Author: MarceloPrado

FabricExample/src/screens/Examples/AwareScrollView/KeyboardAwareScrollView.tsx renamed to 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) => {

FabricExample/src/components/AwareScrollView/index.ts

@@ -0,0 +1 @@
+export { default } from "./KeyboardAwareScrollView";

FabricExample/src/screens/Examples/AwareScrollView/useSmoothKeyboardHandler.ts renamed to FabricExample/src/components/AwareScrollView/useSmoothKeyboardHandler.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',

FabricExample/src/screens/Examples/AwareScrollView/TextInput.tsx renamed to FabricExample/src/components/TextInput/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}

FabricExample/src/constants/screenNames.ts

@@ -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}

FabricExample/src/navigation/ExamplesStack/index.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { LayoutChangeEvent, View, Text, Button } from 'react-native';
+import { StackScreenProps } from '@react-navigation/stack';
+import { useResizeMode, KeyboardStickyView } from 'react-native-keyboard-controller';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { ExamplesStackParamList } from '../../../navigation/ExamplesStack';
+import KeyboardAwareScrollView from '../../../components/AwareScrollView';
+import TextInput from '../../../components/TextInput';
+import { styles } from './styles';
+
+type Props = StackScreenProps<ExamplesStackParamList>;
+
+const variants = ['v1', 'v2', 'v3'] as const;
+type Variant = typeof variants[number];
+
+export default function AwareScrollViewStickyFooter({ navigation }: Props) {
+  useResizeMode();
+
+  const { bottom } = useSafeAreaInsets();
+  const [footerHeight, setFooterHeight] = useState(0);
+  const [variant, setVariant] = useState<Variant>("v1");
+
+  const handleLayout = useCallback((evt: LayoutChangeEvent) => {
+    setFooterHeight(evt.nativeEvent.layout.height);
+  }, []);
+  const offset = useMemo(() => ({closed: 0, opened: variant === "v1" ? 0 : bottom }), [bottom, variant]);
+  const offsetV3 = useMemo(() => ({closed: -50, opened: bottom - 25}), [bottom]);
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <Text
+          style={styles.header}
+          onPress={() => {
+            const index = variants.indexOf(variant);
+            setVariant(
+              variants[index === variants.length - 1 ? 0 : index + 1]
+            );
+          }}
+        >
+          {variant}
+        </Text>
+      ),
+    });
+  }, [variant]);
+
+  const v1v2 = variant === "v1" || variant === "v2";
+
+  return (
+    <View style={[styles.pageContainer, { paddingBottom: variant === "v1" ? 0 : bottom }]}>
+      <KeyboardAwareScrollView
+        style={styles.container}
+        contentContainerStyle={styles.content}
+        bottomOffset={(v1v2 ? footerHeight : 0) + 50}
+        keyboardShouldPersistTaps="handled"
+      >
+        {new Array(10).fill(0).map((_, i) => (
+          <TextInput
+            key={i}
+            placeholder={`TextInput#${i}`}
+            keyboardType={i % 2 === 0 ? 'numeric' : 'default'}
+          />
+        ))}
+      </KeyboardAwareScrollView>
+      {v1v2 && (
+        <KeyboardStickyView offset={offset}>
+          <View onLayout={handleLayout} style={styles.footer}>
+            <Text style={styles.footerText}>A mocked sticky footer</Text>
+            <Button title="Click me" />
+          </View>
+        </KeyboardStickyView>
+      )}
+      {variant === "v3" && (
+        <KeyboardStickyView offset={offsetV3}>
+          <View style={styles.circle} />
+        </KeyboardStickyView>
+      )}
+    </View>
+  );
+}

FabricExample/src/screens/Examples/AwareScrollView/index.tsx

@@ -0,0 +1,40 @@
+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',
+  },
+  circle: {
+    position: 'absolute',
+    bottom: 0,
+    right: 30,
+    justifyContent: "flex-end",
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: "#002099",
+  },
+  header: {
+    color: 'black',
+    paddingRight: 12,
+  },
+});

FabricExample/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx

@@ -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,