Question about Modals

[JanOwiesniak]

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

[gazedash]

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

[timomeara]

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 :|

[JanOwiesniak]

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.