React-native: android:windowSoftInputMode="adjustResize" will not work when StatusBar hidden="true" Android

Created on 17 Mar 2017  路  7Comments  路  Source: facebook/react-native

Ill provide more info about this issue #12980

android:windowSoftInputMode="adjustResize" at android/app/src/main/AndroidManifiest.xml (by default in the lastest version) prevent the content collapses out of the screen when keyboard appears and works well, but here the problem, if you want to hide the StatusBar then adjustResize will not work, content collapses and if you have a ScrollView and many TextInputs you have to hide the keyboard in order to navigate to the next input.

How to reproduce?
here i opened a repo with an example, the main code is in App.js
https://github.com/CodeXtinction/bug-react-native

gif example.
when Statusbar hidden prop is set false, will work well

alt tag

but then this happen when hidden={true}

alt tag

im on Android 6.0
you will find the code and package.json in the repo example provided.

Locked

Most helpful comment

This issue is still occurring for me at least on Android 6.0 and rn48. This was a true mystery bug! I would never have thought these two things - status bar and window resizing on keyboard - to be somehow related.

Proposed fix:
A note could be added to react native StatusBar documentation that such issue might exist - especially since _android:windowSoftInputMode="adjustResize"_ is a default setting in the latest RN release.

All 7 comments

I think this is a bug of Android, you can get more info from here or here.

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

  • Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
  • If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
  • Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

This issue is still occurring for me at least on Android 6.0 and rn48. This was a true mystery bug! I would never have thought these two things - status bar and window resizing on keyboard - to be somehow related.

Proposed fix:
A note could be added to react native StatusBar documentation that such issue might exist - especially since _android:windowSoftInputMode="adjustResize"_ is a default setting in the latest RN release.

This issue is still occurring for me with latest react native 0.53. A problem occurred while hiding status bar and using android:windowSoftInputMode="adjustResize" property. You should reopen the issue and fix it.

^ I am also having the same issue as @shahchaitanya

EDIT: I am working around this by setting android:windowSoftInputMode="adjustPan" instead.

This is a known bug of Android itself as reported on https://issuetracker.google.com/issues/36911528

I was able to bypass the problem based on a comment of https://stackoverflow.com/questions/7417123/android-how-to-adjust-layout-in-full-screen-mode-when-softkeyboard-is-visible/19494006#answer-42261118

Here's my final code:

AndroidBug5497Workaround:

import android.app.Activity;
import android.graphics.Rect;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.FrameLayout;

import com.facebook.react.ReactActivity;

/**
 * Created based on https://stackoverflow.com/questions/7417123/android-how-to-adjust-layout-in-full-screen-mode-when-softkeyboard-is-visible/19494006#answer-42261118
 */

public class AndroidBug5497Workaround extends ReactActivity {

    // For more information, see https://issuetracker.google.com/issues/36911528
    // To use this class, simply invoke assistActivity() on an Activity that already has its content view set.


    private View rootView;
    private ViewGroup contentContainer;
    private ViewTreeObserver viewTreeObserver;
    private ViewTreeObserver.OnGlobalLayoutListener listener = () -> possiblyResizeChildOfContent();
    private Rect contentAreaOfWindowBounds = new Rect();
    private FrameLayout.LayoutParams rootViewLayout;
    private int usableHeightPrevious = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        contentContainer = (ViewGroup) findViewById(android.R.id.content);
        rootView = contentContainer.getChildAt(0);
        rootViewLayout = (FrameLayout.LayoutParams) rootView.getLayoutParams();
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (viewTreeObserver.isAlive()) {
            viewTreeObserver.removeOnGlobalLayoutListener(listener);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (viewTreeObserver == null || !viewTreeObserver.isAlive()) {
            viewTreeObserver = rootView.getViewTreeObserver();
        }

        viewTreeObserver.addOnGlobalLayoutListener(listener);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        rootView = null;
        contentContainer = null;
        viewTreeObserver = null;
    }

    private void possiblyResizeChildOfContent() {
        contentContainer.getWindowVisibleDisplayFrame(contentAreaOfWindowBounds);
        int usableHeightNow = contentAreaOfWindowBounds.height();

        if (usableHeightNow != usableHeightPrevious) {
            rootViewLayout.height = usableHeightNow;
            rootView.layout(contentAreaOfWindowBounds.left, contentAreaOfWindowBounds.top, contentAreaOfWindowBounds.right, contentAreaOfWindowBounds.bottom);
            rootView.requestLayout();

            usableHeightPrevious = usableHeightNow;
        }
    }
}

Now just make your MainActivity extend from AndroidBug5497Workaround and you'll be able to use the adjustResize mode

@reyalpsirc Thanky you for sharing! Your workaround works ;)

Was this page helpful?
0 / 5 - 0 ratings