Closed 1280103995 closed 2 years ago
That's a little be harder than this, since constants are initialized at app startup (the native status bar module suffer from the same issue).
What can be done for now:
That's a little be harder than this, since constants are initialized at app startup (the native status bar module suffer from the same issue).
What can be done for now:
- Replacing constants with methods that return Promises (not a huge fan of that).
- Find a way to detect this change and override constants on the JS side. That's what I do with https://github.com/zoontek/react-native-localize
You are right, referring to react native's approach is I was wrong.
I can receive the latest value by doing this, but the component needs to be rendered.
RNBarsModule.java
public void init() {
...
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
ViewCompat.setOnApplyWindowInsetsListener(activity.getWindow().getDecorView(), (v, insets) -> {
int naviHeight;
if (insets != null) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
naviHeight = insets.getInsets(WindowInsets.Type.navigationBars()).bottom;
} else {
naviHeight = insets.getSystemWindowInsetBottom();
}
sendEvent(PixelUtil.toDIPFromPixel(naviHeight));
}
if (insets != null) {
return ViewCompat.onApplyWindowInsets(v, insets);
}
return null;
});
}
}
private static void sendEvent(float naviHeight) {
if (mReactContext == null) return;
WritableMap event = Arguments.createMap();
event.putDouble("navigationBarHeight", naviHeight);
mReactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("rnBarsNavHeight", event);
}
NavigationBar.tsx
import * as React from "react";
import { DeviceEventEmitter, Platform } from "react-native";
import { NativeModule } from "./module";
import { NavigationBarProps } from "./types";
const isSupportedPlatform = Platform.OS === "android" && Platform.Version >= 27;
// Listen here
DeviceEventEmitter.addListener('rnBarsNavHeight', data => {
StatusBar.currentHeight = data.navigationBarHeight;
console.log('NavigationBar Change: ', StatusBar.currentHeight)
})
export class NavigationBar extends React.Component<StatusBarProps> {
private static propsStack: NavigationBarProps[] = [];
private static immediate: NodeJS.Immediate | null = null;
private static mergedProps: NavigationBarProps | null = null;
........
}
I will probably just remove the constants, it's better to use https://github.com/th3rdwave/react-native-safe-area-context which achieve exactly the same job (and more!)
I removed these constants in favor of react-native-safe-area-context: https://github.com/zoontek/react-native-bars/releases/tag/1.1.0
Bug summary
In the phone settings, after switching the button navigation to the sliding gesture navigation, the height obtained through
NavigationBar.currentHeight
is still the previous value.Reading
NavigationBar.tsx
can seestatic currentHeight = NativeModule?.navigationBarHeight;
, here a fixed value is returned.In the
StatusBar.js
source code:In the
NativeStatusBarManagerAndroid.js
source code:I am not familiar with
flow
andtypescript
, and I cannot push a PR:disappointed:. Can we learn from this approach?Device: Samsung Galaxy A51 (Android 11)
Library version
1.0.4
Environment info
Steps to reproduce
App.tsx
, callNavigationBar.currentHeight
.Reproducible sample code