React-Native: Scrollview + Keyboard handling

keyboard-view.js

import React, { useEffect, useState } from 'react'
import { Keyboard, TextInput, UIManager, Platform } from 'react-native'

const AndroidKeyboardView = () => {
  return null
}

const IOSKeyboardView = props => {
  const [keyboardInfo, setKeyboardInfo] = useState(0)
  const [keyboardDidShowEvent, setKeyboardDidShowEvent] = useState(null)
  const [keyboardDidHideEvent, setKeyboardDidHideEvent] = useState(null)
  const [lastFocusedInputInfo, setLastFocusedInputInfo] = useState(null)

  useEffect(() => {
    setKeyboardDidShowEvent(
      Keyboard.addListener('keyboardDidShow', e => {
        setKeyboardInfo(e)
      })
    )

    setKeyboardDidHideEvent(
      Keyboard.addListener('keyboardDidHide', () => {
        setKeyboardInfo(null)
      })
    )
  }, [])

  useEffect(() => {
    return () => {
      if (!keyboardDidShowEvent) {
        return
      }

      keyboardDidShowEvent.remove()
      keyboardDidHideEvent.remove()
    }
  }, [keyboardDidShowEvent, keyboardDidHideEvent])

  useEffect(() => {
    const { State: TextInputState } = TextInput
    const currentlyFocusedField = TextInputState.currentlyFocusedField()

    const scrollView = props.scrollView.current

    if (currentlyFocusedField && keyboardInfo) {
      UIManager.measure(
        currentlyFocusedField,
        (originX, originY, width, height, pageX, pageY) => {
          setLastFocusedInputInfo({
            originX,
            originY,
            width,
            height,
            pageX,
            pageY,
          })
          const keyboardY = keyboardInfo.endCoordinates.screenY
          const inputY = pageY + height

          const distance = inputY - keyboardY

          if (distance > 0) {
            const scrollPositionTarget = keyboardY - distance
            scrollView.setNativeProps({
              contentInset: { bottom: 200, top: 0, left: 0, right: 0 },
            })
            scrollView.scrollTo({ y: scrollPositionTarget })
          }
        }
      )
    } else {
      scrollView.setNativeProps({
        contentInset: { bottom: 0, top: 0, left: 0, right: 0 },
      })

      if (lastFocusedInputInfo) {
        scrollView.scrollTo({ y: lastFocusedInputInfo.originY })
      }
    }
  }, [keyboardInfo])

  return null
}

export const KeyboardView = props => {
  if (Platform.OS === 'ios') {
    return <IOSKeyboardView {...props} />
  }

  return <AndroidKeyboardView {...props} />
}

usage.md

Usage

const scrollViewRef = useRef(null)

<ScrollView
    keyboardShouldPersistTaps='always'
    keyboardDismissMode='on-drag'
    ref={scrollViewRef}
  >
  <View>
    ......
    <KeyboardView scrollView={scrollViewRef} />
  </View>
</ScrollView>