react-native-immersive
react-native-immersive copied to clipboard
Question about Modals
What i have done
I followed the installation process and these instructions to integrate the package into my project but things are not behaving like i expected.
What i'm trying to achieve
I want to disable Androids System Bottom Navigation wherever possible because it conflicts with my UI.
What i observed
It seems like every kind of modal opens the Android Navigation.
Other examples in my code base which opens the Android Navigation
- https://github.com/joinspontaneous/react-native-loading-spinner-overlay/issues/74
- https://github.com/okgrow/react-native-copilot
- https://github.com/rafaelmotta/react-native-scl-alert
If that helps someone, here's what I did in MainActivity, manually without this package:
// Set the content to appear under the system bars so that the
// content doesn't resize when the system bars hide and show.
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
// Hide the nav bar and status bar
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION;
// This flag below hides status bar, try to uncomment if needed to hide status bar:
// | View.SYSTEM_UI_FLAG_FULLSCREEN
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
final View decorView = getWindow().getDecorView();
decorView
.setOnSystemUiVisibilityChangeListener(new View.OnSystemUiVisibilityChangeListener() {
@Override
public void onSystemUiVisibilityChange(int visibility) {
if ((visibility & View.SYSTEM_UI_FLAG_FULLSCREEN) == 0) {
decorView.setSystemUiVisibility(flags);
}
}
});
decorView.setSystemUiVisibility(
flags
);
}
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
getWindow().getDecorView().setSystemUiVisibility(
flags);
}
}
But maybe this is also possible with react-native-immersive
If that helps someone, here's what I did in MainActivity, manually without this package:
// Set the content to appear under the system bars so that the // content doesn't resize when the system bars hide and show. | View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN // Hide the nav bar and status bar | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION; // This flag below hides status bar, try to uncomment if needed to hide status bar: // | View.SYSTEM_UI_FLAG_FULLSCREEN @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); final View decorView = getWindow().getDecorView(); decorView .setOnSystemUiVisibilityChangeListener(new View.OnSystemUiVisibilityChangeListener() { @Override public void onSystemUiVisibilityChange(int visibility) { if ((visibility & View.SYSTEM_UI_FLAG_FULLSCREEN) == 0) { decorView.setSystemUiVisibility(flags); } } }); decorView.setSystemUiVisibility( flags ); } @Override public void onWindowFocusChanged(boolean hasFocus) { super.onWindowFocusChanged(hasFocus); if (hasFocus) { getWindow().getDecorView().setSystemUiVisibility( flags); } }
But maybe this is also possible with react-native-immersive
does this work for you? i've seen this example in quite a few places but my modals are still showing the nav/bottom bar :|
If that helps someone, here's what I did in MainActivity, manually without this package:
// Set the content to appear under the system bars so that the // content doesn't resize when the system bars hide and show. | View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN // Hide the nav bar and status bar | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION; // This flag below hides status bar, try to uncomment if needed to hide status bar: // | View.SYSTEM_UI_FLAG_FULLSCREEN @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); final View decorView = getWindow().getDecorView(); decorView .setOnSystemUiVisibilityChangeListener(new View.OnSystemUiVisibilityChangeListener() { @Override public void onSystemUiVisibilityChange(int visibility) { if ((visibility & View.SYSTEM_UI_FLAG_FULLSCREEN) == 0) { decorView.setSystemUiVisibility(flags); } } }); decorView.setSystemUiVisibility( flags ); } @Override public void onWindowFocusChanged(boolean hasFocus) { super.onWindowFocusChanged(hasFocus); if (hasFocus) { getWindow().getDecorView().setSystemUiVisibility( flags); } }
But maybe this is also possible with react-native-immersive
does this work for you? i've seen this example in quite a few places but my modals are still showing the nav/bottom bar :|
I've seen similar approaches as well. This does not work in my case.