Code to solve ViewPropTypes issue

[Shota Tamura]

Due to ViewPropTypes things, react-native-keyboard-spacer no longer works after react-native v0.69.
So I rewrote this library with minimal requirements.
Hope this code helps someone.

import { css } from '@emotion/native'
import { FC, useEffect, useState } from 'react'
import {
  Keyboard,
  KeyboardEvent,
  LayoutAnimation,
  LayoutAnimationConfig,
  Platform,
  useWindowDimensions,
  View,
  ViewProps,
} from 'react-native'

const defaultAnimation: LayoutAnimationConfig = {
  duration: 500,
  create: {
    duration: 300,
    type: LayoutAnimation.Types.easeInEaseOut,
    property: LayoutAnimation.Properties.opacity,
  },
  update: {
    type: LayoutAnimation.Types.spring,
    springDamping: 200,
  },
}

export const KeyboardSpacer: FC<ViewProps> = () => {
  const { height: screenHeight } = useWindowDimensions()
  const [keyboardSpace, setKeyboardSpace] = useState(0)

  useEffect(() => {
    const updateKeyboardSpace = (event: KeyboardEvent) => {
      if (!event.endCoordinates) {
        return
      }

      let animationConfig = defaultAnimation
      if (Platform.OS === 'ios') {
        animationConfig = LayoutAnimation.create(
          event.duration,
          LayoutAnimation.Types[event.easing],
          LayoutAnimation.Properties.opacity,
        )
      }
      LayoutAnimation.configureNext(animationConfig)

      const keyboardSpace = screenHeight - event.endCoordinates.screenY
      setKeyboardSpace(keyboardSpace)
    }

    const resetKeyboardSpace = (event: KeyboardEvent) => {
      let animationConfig = defaultAnimation
      if (Platform.OS === 'ios') {
        animationConfig = LayoutAnimation.create(
          event.duration,
          LayoutAnimation.Types[event.easing],
          LayoutAnimation.Properties.opacity,
        )
      }
      LayoutAnimation.configureNext(animationConfig)

      setKeyboardSpace(0)
    }

    const updateListener =
      Platform.OS === 'android' ? 'keyboardDidShow' : 'keyboardWillShow'
    const resetListener =
      Platform.OS === 'android' ? 'keyboardDidHide' : 'keyboardWillHide'

    const listeners = [
      Keyboard.addListener(updateListener, updateKeyboardSpace),
      Keyboard.addListener(resetListener, resetKeyboardSpace),
    ]

    return () => {
      listeners.forEach(listener => listener.remove())
    }
  }, [screenHeight])

  return (
    <View
      style={css({
        left: 0,
        right: 0,
        bottom: 0,
        height: keyboardSpace,
      })}
    />
  )
}

[Lucas]

thank you. I was using patch-package to fix it but it's way better to have the whole in a function component.

[estebanInnventto]

Thank you very much. This helped me a lot

[Nasir Iqbal]

Thanks really appreciate it

[Shota Tamura]

👍