feat: Add useScrollToFocusedInput() hook

Author: codinsonn

features/@app-core/components/styled.tsx

@@ -6,6 +6,7 @@ import {
     View as RNView,
     Pressable as RNPressable,
     ScrollView as RNScrollView,
+    KeyboardAvoidingView as RNKeyboardAvoidingView,
 } from 'react-native'
 import { Link as UniversalLink } from '@green-stack/navigation/Link'
 import { UniversalLinkProps } from '@green-stack/navigation/Link.types'
@@ -34,6 +35,8 @@ export const ScrollView = remapProps(styled(RNScrollView), {
     contentContainerClassName: 'contentContainerStyle',
 })
 
+export const KeyboardAvoidingView = styled(RNKeyboardAvoidingView, '')
+
 /* --- Typography ------------------------------------------------------------------------------ */
 
 export const H1 = styled(RNText, 'font-bold text-3xl')

features/@app-core/screens/FormsScreen.tsx

@@ -1,9 +1,9 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { StatusBar } from 'expo-status-bar'
-import { View, Text, H1, H2, H3, Link, ScrollView } from '../components/styled'
+import { View, Text, H1, H2, H3, Link, ScrollView, KeyboardAvoidingView } from '../components/styled'
 import BackButton from '../components/BackButton'
 import { TextInput } from '../forms/TextInput.styled'
-import { NumberStepper } from '../forms/NumberStepper'
+import { NumberStepper } from '../forms/NumberStepper.styled'
 import { Checkbox } from '../forms/Checkbox.styled'
 import { useFormState } from '@green-stack/forms/useFormState'
 import { z, schema } from '@green-stack/schemas'
@@ -12,6 +12,8 @@ import { CheckList } from '../forms/CheckList.styled'
 import { RadioGroup } from '../forms/RadioGroup.styled'
 import { Select } from '../forms/Select.styled'
 import { isEmpty } from '@green-stack/utils/commonUtils'
+import { useScrollToFocusedInput } from '@green-stack/hooks/useScrollToFocusedInput'
+import { TextArea } from '../forms/TextArea.styled'
 
 /* --- Schema --------------------------------------------------------------------------------- */
 
@@ -21,6 +23,7 @@ const TestForm = schema('TestForm', {
   identifiesWith: z.string().optional(),
   excitingFeatures: z.array(z.string()).default([]),
   minHourlyPrice: z.number().optional(),
+  feedbackSuggestions: z.string().optional(),
 })
 
 type TestForm = z.input<typeof TestForm>
@@ -32,6 +35,14 @@ const FormsScreen = (props: TestForm) => {
   const { setParams } = useRouter()
   const params = useRouteParams(props)
 
+  // Refs
+  const emailInputRef = useRef<any$Ignore>(null)
+  const ageInputRef = useRef<any$Ignore>(null)
+  const feedbackInputRef = useRef<any$Ignore>(null)
+
+  // Hooks
+  const kbScroller = useScrollToFocusedInput()
+
   // State
   const [validateOnChange, setValidateOnChange] = useState(!!params.validateOnChange)
   const [showFormState, setShowFormState] = useState(false)
@@ -61,9 +72,10 @@ const FormsScreen = (props: TestForm) => {
   // -- Render --
 
   return (
-    <>
+    <KeyboardAvoidingView {...kbScroller.avoidingViewProps}>
       <StatusBar style="dark" />
       <ScrollView
+        {...kbScroller.scrollViewProps}
         className="flex flex-1 min-h-screen bg-white"
         contentContainerClassName="min-h-screen"
       >
@@ -79,6 +91,7 @@ const FormsScreen = (props: TestForm) => {
             <TextInput
               placeholder="e.g. [email protected]"
               {...formState.getTextInputProps('email')}
+              {...kbScroller.registerInput(emailInputRef)}
             />
 
             <Text className="text-sm text-secondary mt-2">
@@ -95,6 +108,7 @@ const FormsScreen = (props: TestForm) => {
               max={150}
               step={1}
               {...formState.getInputProps('age')}
+              {...kbScroller.registerInput(ageInputRef)}
             />
 
             <Text className="text-sm text-secondary mt-2">
@@ -187,6 +201,26 @@ const FormsScreen = (props: TestForm) => {
 
             <View className="h-1 w-12 my-6 bg-slate-300" />
 
+            {/* -- TextArea -- */}
+
+            <H2 className="text-black">
+              What's missing?
+            </H2>
+
+            <View className="h-4" />
+
+            <TextArea
+              placeholder="How could we further improve your workflow?"
+              {...formState.getTextInputProps('feedbackSuggestions')}
+              {...kbScroller.registerInput(feedbackInputRef)}
+            />
+
+            <Text className="text-sm text-secondary mt-2">
+              Feedback or suggestions appreciated
+            </Text>
+
+            <View className="h-1 w-12 my-6 bg-slate-300" />
+
             {/* -- useFormstate -- */}
 
             {validateOnChange && (
@@ -219,11 +253,14 @@ const FormsScreen = (props: TestForm) => {
               </>
             )}
 
+            {kbScroller.keyboardPaddedView}
+
           </View>
         </View>
+
       </ScrollView>
       <BackButton backLink="/subpages/Universal%20Nav" color="#333333" />
-    </>
+    </KeyboardAvoidingView>
   )
 }
 

packages/@green-stack-core/hooks/useScrollToFocusedInput.tsx

@@ -0,0 +1,122 @@
+import { useState, useEffect, useRef, ComponentProps, MutableRefObject } from 'react'
+import { Platform, Keyboard, TextInput, KeyboardAvoidingView } from 'react-native'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
+
+/* --- useScrollToFocusedInput() --------------------------------------------------------------- */
+
+export const useScrollToFocusedInput = () => {
+  // Refs
+  const scrollViewRef = useRef<any$Ignore>(null)
+  const scrollYRef = useRef(0)
+  const focusedInputY = useRef(0)
+  
+  // State
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState(Keyboard.isVisible())
+  
+  // Vars
+  type KeyboardBehaviour = ComponentProps<typeof KeyboardAvoidingView>['behavior']
+  const keyboardBehaviour = Platform.OS === 'ios' ? 'padding' : 'height'
+  const keyboardPadding = Platform.OS === 'ios' ? 300 : 250
+  const scrollY = scrollYRef.current
+  
+  // -- Keyboard Management --
+
+  useEffect(() => {
+
+    const keyboardDidShow = () => setIsKeyboardVisible(true)
+    const keyboardDidHide = () => {
+      setIsKeyboardVisible(false)
+      focusedInputY.current = 0
+    }
+
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', keyboardDidShow)
+    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', keyboardDidHide)
+
+    return () => {
+      keyboardDidShowListener.remove()
+      keyboardDidHideListener.remove()
+    }
+  }, [])
+
+  useEffect(() => {
+    setTimeout(() => {
+      scrollViewRef.current?.scrollTo?.({
+        x: 0,
+        y: focusedInputY.current || scrollYRef.current,
+        animated: true,
+      })
+    }, 100)
+  }, [isKeyboardVisible])
+
+  // -- Scroll Management --
+
+  const handleScroll = (e: any$Ignore) => (scrollYRef.current = e.nativeEvent.contentOffset.y)
+
+  const handleFocusInput = (inputRef: MutableRefObject<TextInput | null>) => {
+    return (nativeEvent: any$Ignore) => {
+      inputRef?.current?.measure((_x, y, _w, h, _px, py) => {
+        const focusY = scrollYRef.current + py // = Input position inside the ScrollView
+        const shouldScroll = focusY > keyboardPadding
+        const newInputY = focusY - keyboardPadding - h - 8
+        focusedInputY.current = shouldScroll ? newInputY : 0
+      })
+    }
+  }
+
+  // -- Target Management --
+
+  const registerInput = (inputRef: MutableRefObject<any$Ignore>) => {
+    return {
+      ref: inputRef,
+      onFocus: handleFocusInput(inputRef),
+    }
+  }
+
+  // -- Prerender --
+
+  const height = useSharedValue(0)
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: withTiming(height.value, { duration: 90 }),
+  }), [height.value])
+
+  useEffect(() => {
+    height.value = isKeyboardVisible ? keyboardPadding : 0
+  }, [isKeyboardVisible])
+
+  const keyboardPaddedView = Platform.OS !== 'web' ? (
+    <Animated.View
+      style={[
+        {
+          position: 'relative',
+          width: '100%',
+          height: 0,
+        },
+        animatedStyle,
+      ]}
+    />
+  ) : null
+
+  // -- Return --
+
+  return {
+    scrollViewRef,
+    scrollPosition: scrollY,
+    handleScroll,
+    handleFocusInput,
+    keyboardBehaviour,
+    keyboardPadding,
+    keyboardPaddedView,
+    isKeyboardVisible,
+    avoidingViewProps: {
+      behavior: keyboardBehaviour as KeyboardBehaviour,
+      style: { flex: 1 },
+      enabled: true,
+    },
+    scrollViewProps: {
+      ref: scrollViewRef,
+      scrollEventThrottle: 16,
+      onScroll: handleScroll,
+    },
+    registerInput,
+  }
+}