search

wix / react-native-navigation

A complete native navigation solution for React Native
https://wix.github.io/react-native-navigation/
MIT License
13.02k stars 2.67k forks source link

[V4][Android] Empty spaces in place of hidden status and navigation bars #5841

Closed vitali-kastsiuk closed 4 years ago

vitali-kastsiuk commented 4 years ago

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

Screenshot 2020-01-10 at 16 17 37 Screenshot 2020-01-10 at 16 19 08

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

sintylapse commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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.

WhatsApp Image 2020-01-17 at 4 01 42 PM WhatsApp Image 2020-01-17 at 4 02 25 PM

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 commented 4 years ago

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] commented 4 years ago

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 commented 4 years ago

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

stale[bot] commented 4 years ago

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 commented 4 years ago

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

batuhansahan commented 4 years ago

still issue

stale[bot] commented 4 years ago

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] commented 4 years ago

The issue has been closed for inactivity.

akamittal commented 4 years ago

Is there any solution for this yet?

mreed49 commented 3 years ago

Any update? Running into this issue as well

airman00 commented 3 years ago

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

airman00 commented 3 years ago

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;
    }
syednytro commented 2 years ago

Hey @airman00, I tried your solution and it managed to remove the blank space from virtual navigation but messed up my statusBar.

pjsandwich commented 2 years ago

2022, any solution?

richterd commented 1 year ago

+1

JanKaram2020 commented 1 year ago

+1 why is this a closed issue ?

martinhofilho commented 2 months ago

2024, having the same problem here.