CODEWITHSUNDEEP
androidreact-nativereact-native-gifted-chat
psteinroe
psteinroe

Reputation: 533

react native android keyboard empty space

I am trying to fix a problem we are having with the keyboard on android. Due to react-native-gifted-chat, we have to use android:windowSoftInputMode="adjustResize" instead of adjustPan. The problem is, that the chat breaks without adjustResize and all the other stuff (e.g. some textfields in a form) break without adjustPan. I also tried adjustResize|adjustPan, adjustPan|adjustResize and tried to use KeyboardAvoidingView on the Form components, but nothing seems to work. Here is how it looks like when using adjustResize without any KeyboardAvoidingView. It creates some not-clickable grey area above the keyboard. Note that there is no way around adjustResize due to the chat...

Thanks in advance!

The form Screen When clicking a textinput

Upvotes: 0

Views: 1958

Answers (1)

psteinroe
psteinroe

Reputation: 533

For anyone struggling with the same:

The package react-native-set-soft-input-mode allows you to change the softInputMode, e.g. for the chat, the following works fine:

useEffect(() => {
    if (Platform.OS === 'android') {
      SoftInputMode.set(SoftInputMode.ADJUST_RESIZE);
    }
    return () => {
      if (Platform.OS === 'android') {
        SoftInputMode.set(SoftInputMode.ADJUST_PAN);
      }
    };
  }, []);

Upvotes: 1

Related Questions