react-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

setup tabs using router-flux
have 1 tab use embedded webpage that has textfield input in it.
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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 20 (5 by maintainers)

Most upvoted comments

@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

+10

radelcom on Jan 24, 2017

@kelset You’re solution does work in changing the windowSoftInputMode setting for specific components. However, doesn’t fix the issue (or at least doesn’t fix it for all possible cases).

Anyway, relying on a specific setting that can be easily changed by recompiling the project (windowSoftInputMode) is not really good for the package. There’s lots of us having either adjustPan or adjustResize in our apps, and limiting giftedChat to one or the other isn’t really good policy, and the code behind must have some serious UI issues if it only works in properly in one case.

webraptor on Aug 16, 2017

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();
  }

kelset on Jul 22, 2017

Thank you for the framework, I will give this a shot, I’ll edit this comment to let you know if it works for me

ghost on Jan 25, 2017

I ended up writing my own chat component. This library is great for the very basics (and thanks for the hard work!), but as soon as things need to be customized, it’s either hacky or straight up impossible to make it work like it’s supposed to.

For example, I couldn’t find a way of using different link colors (left/right) for parsed text in the chat bubbles. Going down the rabbit hole of injecting custom renderers and functionality feels like solving 1 problem and creating 2 more…

skizzo on May 28, 2020

The framework works for me, I forgot to say that

ghost on Feb 15, 2017

What proposed by @radelcom worked quite well for me, set aside that the npm package has not been updated to the repo you are pointing 😕 I wrote how to overcome it here: https://github.com/zubricky/react-native-android-keyboard-adjust/pull/6 (since technically you linked to a fork and so the npm install doesn’t install the version able to work with latest versions - let’s hope the owner of the original merges that PR)

kelset on Feb 2, 2017