Closed vitali-kastsiuk closed 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
@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
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
@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
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
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.
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
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.
It is still present in v6. Unfortunately it completely messed up my video player in fullscreen.
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.
The same issue, screens have empty spaces on android when fullscreen mode si present with react-native-video.
still issue
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.
The issue has been closed for inactivity.
Is there any solution for this yet?
Any update? Running into this issue as well
Running into this issue too - only on Android API 30 , R
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;
}
Hey @airman00, I tried your solution and it managed to remove the blank space from virtual navigation but messed up my statusBar.
2022, any solution?
+1
+1 why is this a closed issue ?
2024, having the same problem here.
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
App.js
MainActivity.java
styles.xml
Environment