[RNKC-036] - aware scroll view example (wip)

example/src/constants/screenNames.ts

@@ -2,6 +2,7 @@ export enum ScreenNames {
   ANIMATED_EXAMPLE = 'ANIMATED_EXAMPLE',
   REANIMATED_CHAT = 'REANIMATED_CHAT',
   EVENTS = 'EVENTS',
+  AWARE_SCROLL_VIEW = 'AWARE_SCROLL_VIEW',
   EXAMPLES_STACK = 'EXAMPLES_STACK',
   EXAMPLES = 'EXAMPLES',
 }

example/src/navigation/ExamplesStack/index.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
 
 import { createStackNavigator } from '@react-navigation/stack';
+
 import { ScreenNames } from '../../constants/screenNames';
 import KeyboardAnimation from '../../screens/Examples/KeyboardAnimation';
 import ReanimatedChat from '../../screens/Examples/ReanimatedChat';
 import Events from '../../screens/Examples/Events';
+import AwareScrollView from '../../screens/Examples/AwareScrollView';
 
 type ExamplesStackParamList = {
   [ScreenNames.ANIMATED_EXAMPLE]: undefined;
   [ScreenNames.REANIMATED_CHAT]: undefined;
   [ScreenNames.EVENTS]: undefined;
+  [ScreenNames.AWARE_SCROLL_VIEW]: undefined;
 };
 
 const Stack = createStackNavigator<ExamplesStackParamList>();
@@ -24,6 +27,9 @@ const options = {
   [ScreenNames.EVENTS]: {
     title: 'Events',
   },
+  [ScreenNames.AWARE_SCROLL_VIEW]: {
+    title: 'Aware scroll view',
+  },
 };
 
 const ExamplesStack = () => (
@@ -43,6 +49,11 @@ const ExamplesStack = () => (
       component={Events}
       options={options[ScreenNames.EVENTS]}
     />
+    <Stack.Screen
+      name={ScreenNames.AWARE_SCROLL_VIEW}
+      component={AwareScrollView}
+      options={options[ScreenNames.AWARE_SCROLL_VIEW]}
+    />
   </Stack.Navigator>
 );
 

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

@@ -0,0 +1,101 @@
+import React, { useEffect } from 'react';
+import { TextInput, LogBox, View, Dimensions } from 'react-native';
+import { KeyboardEvents } from 'react-native-keyboard-controller';
+import Reanimated, {
+  useAnimatedRef,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+LogBox.ignoreAllLogs();
+
+function randomColor() {
+  return '#' + Math.floor(Math.random() * 16777215).toString(16);
+}
+
+const screenHeight = Dimensions.get('window').height;
+
+export default function BottomTabs() {
+  const aref = useAnimatedRef<Reanimated.ScrollView>();
+  const scrollPosition = useSharedValue(0);
+  const click = useSharedValue(0);
+  const position = useSharedValue(0);
+  const fakeViewHeight = useSharedValue(0);
+
+  const onScroll = useAnimatedScrollHandler({
+    onScroll: (e) => {
+      position.value = e.contentOffset.y;
+    },
+  });
+
+  useEffect(() => {
+    const show = KeyboardEvents.addListener('keyboardWillShow', (e) => {
+      fakeViewHeight.value = e.height;
+    });
+    const hide = KeyboardEvents.addListener('keyboardWillHide', () => {
+      fakeViewHeight.value = 0;
+    });
+
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+
+  const view = useAnimatedStyle(() => ({
+    height: fakeViewHeight.value,
+    width: '100%',
+  }));
+
+  return (
+    <View
+      style={{ flex: 1 }}
+      onTouchStart={(e) => {
+        click.value = e.nativeEvent.pageY;
+        scrollPosition.value = position.value;
+
+        console.log('touchMove', e.nativeEvent.pageY);
+      }}
+    >
+      <Reanimated.ScrollView
+        ref={aref}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+        style={{ flex: 1 }}
+      >
+        {new Array(10).fill(0).map((_, i) => (
+          <TextInput
+            key={i}
+            placeholder={`${i}`}
+            placeholderTextColor="black"
+            style={{
+              width: '100%',
+              height: 50,
+              backgroundColor: randomColor(),
+              marginTop: 50,
+            }}
+          />
+        ))}
+        <Reanimated.View
+          onLayout={(e) => {
+            if (e.nativeEvent.layout.height !== 0) {
+              const visibleRect = screenHeight - fakeViewHeight.value;
+
+              if (click.value > visibleRect) {
+                const target = click.value - visibleRect;
+
+                aref.current?.scrollTo({
+                  x: 0,
+                  y: target + scrollPosition.value + 50,
+                  animated: true,
+                });
+              }
+            }
+          }}
+          style={view}
+        />
+      </Reanimated.ScrollView>
+    </View>
+  );
+}

example/src/screens/Examples/Main/constants.ts

@@ -9,4 +9,9 @@ export const examples: Example[] = [
   },
   { title: 'Chat', info: ScreenNames.REANIMATED_CHAT, icons: '💬' },
   { title: 'Events', info: ScreenNames.EVENTS, icons: '🎃 📅' },
+  {
+    title: 'Aware scroll view (WIP)',
+    info: ScreenNames.AWARE_SCROLL_VIEW,
+    icons: '🤓',
+  },
 ];