React Native Make View “Hug” the Top of the Keyboard

Question

Let\'s say I have a view that is positioned absolute at the bottom of the screen. This view contains a text input. When the text input is focused, I want the bottom of the view

Answer 1

Using Functional Component. This works for both iOS and Android

useEffect(() => {
const keyboardVisibleListener = Keyboard.addListener(
  Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
  handleKeyboardVisible
);
const keyboardHiddenListener = Keyboard.addListener(
  Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide",
  handleKeyboardHidden
);

return () => {
  keyboardHiddenListener.remove();
  keyboardVisibleListener.remove();
};}, []);


const handleKeyboardVisible = (event) => {
Animated.timing(paddingInput, {
  duration: event.duration,
  toValue: 60,
  useNativeDriver: false,
});};

 const handleKeyboardHidden = (event: any) => {
Animated.timing(paddingInput, {
  duration: event.duration,
  toValue: 0,
  useNativeDriver: false,
});};