Solvedreact native gifted chat android:windowSoftInputMode="adjustResize" causes different parts of the app to adjust size

Issue Description

Everything in gifted chat part is fine, however, when I set android:windowSoftInputMode="adjustResize" in the app, The rest of the app is also gets affected. I have an embedded web page that takes login credentials inside a Tab component(using router-flux).

When the textfields are in focus inside the web view, the tab bar is shifted and the whole screen size is also adjusted.

I know android:windowSoftInputMode="adjustResize" is required in gifted chat. Is there a way to ensure other parts of the app that requires keyboard wont get affected?

Steps to Reproduce / Code Snippets

  1. setup tabs using router-flux
  2. have 1 tab use embedded webpage that has textfield input in it.
  3. have gifted chat set up with required android:windowSoftInputMode="adjustResize" configuration.

Expected Results

embedded webpage screen with textfield input should not be affected by the resizing

Additional Information

  • React Native version: 0.39.0
  • react-native-gifted-chat version: 0.0.10
  • Platform(s) (iOS, Android, or both?): android
21 Answers

✔️Accepted Answer

@mrnahidtalukder a workaround for now is to use another package and set the softinputmode programatically.

https://github.com/jr-k/react-native-android-keyboard-adjust

Other Answers:

So, this is an extrapolation of the code I've used when I faced this issue (at the time of my previous comment):

// things I have used
import { GiftedChat, Bubble } from 'react-native-gifted-chat';
import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust';

// In the component

  componentWillMount(){
    // console.log("setting to resize")
    AndroidKeyboardAdjust.setAdjustResize();
  }

  componentWillUnmount(){
    // console.log("setting back to pan")
    AndroidKeyboardAdjust.setAdjustPan();
  }

More Issues: