React-native-navigation: [V4][Android] Empty spaces in place of hidden status and navigation bars

[vitali-kastsiuk]

Issue Description

After upgrading react-native from 0.59.19 to 0.61.5 and react-native-navigation from 2.26.5 to 4.4.0 i see empty spaces in place of hidden status and navigation bars, like navigation activity not fullscreen.

Steps to Reproduce / Code Snippets / Screenshots

index.js

Navigation.registerComponent('App', () => App);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      component: {
        name: 'App'
      }
    }
  });
});

App.js

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar hidden />
      <View style={{backgroundColor: 'red', height: '100%'}} />
    </>
  );
};

export default App;

MainActivity.java

public class MainActivity extends NavigationActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        hideNavigationBar();
    }

    @Override
    protected void onResume() {
        super.onResume();
        hideNavigationBar();
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            hideNavigationBar();
        }
    }

    private void hideNavigationBar() {
        View decorView = getWindow().getDecorView();

        int uiOptions = View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                        | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                        | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                        | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                        | View.SYSTEM_UI_FLAG_FULLSCREEN
                        | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
        decorView.setSystemUiVisibility(uiOptions);
    }
}

styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:windowFullscreen">true</item>
</style>

---

Environment

• React Native Navigation version: 4.4.0
• React Native version: 0.61.5
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator Nexus 5X API 28 Debug

[sintylapse]

The same thing after upgrade, I have white space in place of topBar and statusBar when using drawBehind: true inside setDefaultOptions.

But when I move this options inside component's options, everything works. So it seems the problem is in combination of drawBehind: true and setDefaultOptions

[vitali-kastsiuk]

@sintylapse i don't use any options for component is this example, i have issues with Android bars. If you mean setting {topBar: {drawBehind: true}} directly in root component's options is doesn't help, i don't use react-native-navigation topBar at all

[sintylapse]

I mean this style of setting options

class SomeScreen extends React.PureComponent {
    static options() {
        return {
            topBar: {
                drawBehind: true,
                background: {
                    translucent: true,
                    color: 'transparent',
                },
            },
            statusBar: {
                drawBehind: true,
                translucent: true,
            },
        }
    }

it must at least fix your statusBar. Also for bottom tabs it might help

[vitali-kastsiuk]

@sintylapse thanks! that helped with statusBar, mb you have idea how to fix bottom? I tried set some bottomTabs and navigationBar options but no success

[sintylapse]

Unfortunately don’t know how to fix bottom, I don’t use it in my app. I was hoping the issue with bottomTabs the same as statusBar

[alexxsanchezm]

This issue should be accepted as a bug, I've been doing some tests with 2 different devices, both of them have notches but in one of them the screen shows such blank spaces. Also I'm trying to setup the topBar but no luck.

Env info:
System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 206.85 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.6.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.13.2 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 19, 21, 22, 23, 24, 25, 26, 27, 28, 7
Build Tools: 22.0.1, 23.0.1, 23.0.3, 25.0.1, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.3, 28.0.0, 28.0.2, 28.0.3, 29.0.2
System Images: android-22 | Google APIs Intel x86 Atom_64, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.3/11C29 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5
npmGlobalPackages:
babel-preset-react-native: 5.0.2
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-create-library: 3.1.2
react-native-git-upgrade: 0.2.7

This is my RNN setup:

Navigation.registerComponent("com.sampler.MainScrn", () => App);
const singleSideMenu = () => {
    Navigation.setRoot({
        root: {
            sideMenu: {
                left: {
                    component: {
                        name: 'com.sampler.MainScrn',
                    }
                },
                center: {
                    component: {
                        name: "com.sampler.MainScrn",
                        options: {
                            topBar: {
                                title: {
                                    text: 'Sampler'
                                },
                                drawBehind: true,
                                visible: true,
                                animate: false,
                                background: {
                                    color: '#3a97e5',
                                }
                            }
                        }
                    },
                }
            }
        }
    });
};

Navigation.events().registerAppLaunchedListener(() => {
    singleSideMenu();
});

And this is a brand new project I created just for this.

[guyca]

Hey guys, <StatusBar> component is used in some of the snippets posted here. Can you please remove it and change StatusBar through options?
AFAIK, <StatusBar> is not compatible with RNN

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stachu2k]

It is still present in v6. Unfortunately it completely messed up my video player in fullscreen.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[markorusic]

The same issue, screens have empty spaces on android when fullscreen mode si present with react-native-video.

[batuhansahan]

still issue

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[akamittal]

Is there any solution for this yet?

[mreed49]

Any update? Running into this issue as well

[airman00]

Running into this issue too - only on Android API 30 , R

[airman00]

Here is the solution:

Your MainActivity should look like this to support FullScreen mode

public class MainActivity extends NavigationActivity {
    private Activity mActivity;

    private final int UI_FLAG_HIDE_NAV_BAR = View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // hide nav bar
            | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            | View.SYSTEM_UI_FLAG_FULLSCREEN
            | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;

    void hideSystemBars(Activity mActivity) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            getWindow().setDecorFitsSystemWindows(false);
            final WindowInsetsController controller = getWindow().getInsetsController();
            if (controller != null){
                controller.setSystemBarsBehavior(WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE);
                controller.hide(WindowInsets.Type.systemBars());
                //                controller.hide(WindowInsets.Type.statusBars() | WindowInsets.Type.navigationBars()); // alternatively if you want control
            }
        }
        else{
            mActivity.getWindow().getDecorView().setSystemUiVisibility(UI_FLAG_HIDE_NAV_BAR);
            mActivity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
            mActivity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        }

    }
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // lazy load Google Cast context
        CastContext.getSharedInstance(this);

        mActivity = this;
        View decorView = mActivity.getWindow().getDecorView();
        decorView.setOnSystemUiVisibilityChangeListener
                (new View.OnSystemUiVisibilityChangeListener() {
                    @Override
                    public void onSystemUiVisibilityChange(int visibility) {
                        hideSystemBars(mActivity);
                    }
                });
    }

    @Override
    protected void onResume() {
        super.onResume();
        hideSystemBars(this);
    }
}

You also need to modify this line ChildController.java
(located in viewcontrollers/ for [v4] I think, and on the latest version here: https://github.com/wix/react-native-navigation/blob/32dd3540bc091a2ed237eb9d4d12c4023d29e52f/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/child/ChildController.java#L38

    @Override
    public T getView() {
        if (view == null) {
            super.getView();
//            view.setFitsSystemWindows(true); // remove this
            view.setFitsSystemWindows(false);  // change it from true to false
            ViewCompat.setOnApplyWindowInsetsListener(view, this::onApplyWindowInsets);
        }
        return view;
    }