React-native-gifted-chat: android keyboard scrolled too high

[evollu]

In android when I focus on the input, the input field got scrolled up twice keyboard height. Does anyone have the same issue?

I'm using [email protected]

[llgoer]

did you npm install the package react-native-extra-dimensions-android?
see the example https://github.com/FaridSafi/react-native-gifted-messenger/blob/master/GiftedMessengerExample/GiftedMessengerContainer.js
about the "STATUS_BAR_HEIGHT"

[evollu]

no. looks like the system is pushing up the view and in the mean time gifted messager reduced the height of view

[evollu]

found fix:
I added android:windowSoftInputMode="adjustResize" to AndroidManifest.xml and android stopped pushing the view up. Works perfect now.
source: http://blog.arjun.io/react-native/mobile/cross-platform/2016/04/01/handling-the-keyboard-in-react-native.html

[FaridSafi]

This is documented in the readme :)

[JonathanWi]

Hey @FaridSafi, I'm having the exact same issue here, even with an updated AndroidManifest, would you mind telling me what's wrong here :

<application
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:largeHeap="true"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:windowSoftInputMode="adjustResize"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity
        android:name=".Activity"
        android:launchMode="singleTop">
        <receiver
            android:name="com.google.android.gms.gcm.GcmReceiver"
            android:exported="true"
            android:permission="com.google.android.c2dm.permission.SEND" >
            <intent-filter>
                <action android:name="com.google.android.c2dm.intent.RECEIVE" />
                <category android:name="${applicationId}" />
            </intent-filter>
        </receiver>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

Thanks a lot in advance!

[FaridSafi]

Hi, your manifest looks good. Did you rebuild the project? react-native run-android

[JonathanWi]

Unfortunately yes, times & times again :

I'm running a Wiko on 4.2.1 if that's relevant?

EDIT : I don't know why, but it appears that putting the app in background, and re-opening it fixes the issue...

[FaridSafi]

which RN version are you using?

[JonathanWi]

RN 0.24.0

[FaridSafi]

@JonathanWi Are you hiding the status bar?

[JonathanWi]

Oh my god yes, removing StatusBar.setHidden(true); fixed it. Thanks a lot, you just saved me from a 4 hours nightmare!

[FaridSafi]

👍

[beccax]

Hi I'm having the same problem. Where can I find StatusBar.setHidden(true); ?

[FaridSafi]

@beccax You need to

import { StatusBar } from 'react-native';

[beccax]

Thanks! Looks like StatusBar's not my problem then. My problem is the first time I open the app, the input box is too high, then as you type in it, the box drop down to the right place. Opening the input box again will cause the same problem. Then if you put the app in the background, and re-open it, it corrects itself. Restart the app, and you'll see the problem again.

[adrienthiery]

Hi @FaridSafi,

I love the component, really well done and working super well. Thanks for the awesome work!

Except I have this bug regularly on Android.

I have put adjustResize in my Manifest, the component is nested in a flex: 1 View (not using a modal) and I am not hiding the StatusBar... I really don't get it.
Weirdly enough, the problem disappears as soon as I send/display an Image with the chat.
But then it comes back later.

It did it consistently on any react-native version I was on, since 0.19 until now on 0.36

Any leads for me? 😢

Reproduced the error on Android 4.3, 5, 6 on a Samsung galaxy Nexus, Samsung galaxy s5 and Oneplus 3 so it is not android/hardware related...

[adrienthiery]

God dammit, why is it always so...

Just after writing the comment, and reading for the 20th time an article about Android and the keyboard, I finally realised that I am dumb and I put the adjustResize in the <application and not the <activity

😭

Sorry about that...

[Feng999]

@FaridSafi Hi, i have the same issue and problem fixed by adding status bar . Is there any other way to resolve this problem without adding status bar? cause my app have been ask to remove status bar.