Keyboard pushes panel outside the window

[samiede]

Issue Description

Keyboard pushes whole view up even with avoidKeyboard: false set as prop

Steps to Reproduce / Code Snippets / Screenshots

I used a TextInput in the Content area of the sliding panel. Pressing the text input opens the keyboard as expected, but also pushes up the whole panel so that it exits the screen, which is something I need to avoid.

Environment

• Version: 2.2.0
• React Native version: 0.59.8
• Platform(s) (iOS, Android, or both?): Android 9.0
• Device info (Simulator/Device? OS version? Debug/Release?): all

[octopitus]

Can I have a screenshot? Is the TextInput covered by the keyboard?

[samiede]

Sure!

It can best be seen when the panel is fully extended:

I have deliberately made the panel shorter than the optimal height so that the map is visible for demonstration purposes so the problem is more prominent. Now clicking on the text input, in our application, should simply open the keyboard and overlay it over the panel, handling what content is covered would be done by us, but what happens is that the whole panel is pushed upwards and outside of the screen:

I need the panel to remain in the position it was and not be moved by the keyboard. I've tried about everything as it might be an issue with how android handles components that are positioned as 'absolute': https://github.com/facebook/react-native/issues/6785

Thanks!

[octopitus]

Can you try to add {flex: 1, position: 'relative'} to the parent component of the panel? RN doesn't have position: 'fixed' like web, so i'm using position: 'absolute' to achieve the same effect. I think this is maybe the problem.

[mattyx96]

Same problem here, the keyboard pushes the whole panel up. I tried to add {flex: 1, position: 'relative'} to the parent component of the panel but nothing happened..

[samiede]

I ended up fixing the problem, unfortunately I don't fully remember how, since it's been a while.

I think I solved it by setting the height of the container like this:

onLayout={(event) => { this.height = event.nativeEvent.height }}>

and then calculating the height of the other views accordingly.

[Drzaln]

Hey, anyone know how to fix this? I'm facing same issue with keyboard

[superokid]

My parent component has absolute position, and I don't want to recreate all the layout and styling of existing code. I ended up creating a keyboard listener, based on the visibility state set the containerStyle to the height I wanted.

[kimkong88]

Facing same problem here. I found undocumented "avoidKeyboard" prop, seems it doesn't help. Was hoping to see if you use KeyboardAvoidingView but no luck. I will try to hack around with above solutions but it would be appreciated if anyone can provide intuitive and simple solution to this.

edit: figured this is only happening on Android devices.. https://stackoverflow.com/questions/39344140/react-native-how-to-control-what-keyboard-pushes-up might help me.. since its not happening on ios devices, I will try to add "android":{"softwareKeyboardLayoutMode": "pan"}, to my configuration file and see if it works on Android.

[m4rv4ul3r]

This is a good way for me:

Adding Keyboard show and hide listener and save the keyboard height in state. Set it to 0 if the keyboard is hidden.

const [keyboardHeight, setKeyboardHeight] = React.useState(0);

  const onKeyboardDidShow: KeyboardEventListener = e => {
    setKeyboardHeight(e.endCoordinates.height);
  };

  const onKeyboardDidHide = () => {
    setKeyboardHeight(0);
  };

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      onKeyboardDidShow,
    );

    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      onKeyboardDidHide,
    );

    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
  }, []);

Subtract the keyboard height from the range. Setting 'avoidKeyboard' to false improves the behavior for me.

 <RNSlideUpPanel
      ref={slideUpPanelRef}
      avoidKeyboard={false}
      snappingPoints={[
        SLIDE_UP_COLLAPSED_HEIGHT,
        SLIDE_UP_EXPANDED_HEIGHT - keyboardHeight,
      ]}
      draggableRange={{
        bottom: SLIDE_UP_COLLAPSED_HEIGHT,
        top: SLIDE_UP_EXPANDED_HEIGHT - keyboardHeight,
      }}>