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

[radelcom]

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

[ghost]

I'm having the same issue

[radelcom]

@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

[kfiroo]

@radelcom Awesome solution!
Maybe we need to use it internally so it will be transparent to users of gifted-chat?

Anyone wants to put together a quick PR for this?

[ghost]

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

[kelset]

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)

[ghost]

The framework works for me, I forgot to say that

[booboothefool]

Hahaha, I have the exact same setup: react-native-gifted-chat, react-native-router-flux with tabs
and this was driving me nuts.

Thanks for the sick fork, @radelcom! Works great. 👍

[aamir-munir]

I am using the same setup: react-native-gifted-chat, react-native-router-flux with tabs, but I ma not sure how I can use this keyboard layout.

Any help please?

[yash2code]

provide example please .........facing same issue

[kelset]

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

[yash2code]

@kelset I tried and getting the error: Cannot read property 'setAdjustResize' of undefined

[kelset]

Have you installed the library properly?

[yash2code]

@kelset I rebuild the app , that error is gone but its not working ......tried offcial KeyboardAvoidingView in giftedchat.js , it worked at first then stopped working !

[kelset]

I think then you should create a dedicated issue for that issue :/

[webraptor]

@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.

[hugoh59]

Having same issue here. How could we specify windowSoftInputMode only for specific views?

[nandiniparimi1107]

Is this fixed yet?

[steinroe]

having the same issue... Any fix?

[skizzo]

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

[steinroe]

For anyone requiring a quick fix:

The package react-native-set-soft-input-mode allows you to change the softInputMode on the flow. Just put the following in the component that wraps the chat - it works like a charm.

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