From Expo docs:
Keep in mind that the Android status bar is translucent by default in Expo apps.
And also I'm almost sure that the background color in Expo apps is like
rgba(0,0,0,0.4)
So, in short:
- The status bar is translucent by default in Expo apps
- The status bar background color is black transparent
Since the status bar is translucent, a Expo app has the whole app canvas to show
components, which is not possible in a standalone RN app, at least without using
<StatusBar translucent />
explicitly.
From Paper docs:
If you are using Expo, we assume translucent status bar and set a height for status bar automatically.
Aja! react-native-paper
takes advance of these points above mentioned to show
a nice status bar.
- Aproximate the status bar height using the following code. See in the github repo
import { Platform } from 'react-native'
// @ts-ignore
const expo = global.__expo
const DEFAULT_STATUSBAR_HEIGHT_EXPO = expo?.Constants
? expo.Constants.statusBarHeight
: 0
export const APPROX_STATUSBAR_HEIGHT = Platform.select({
android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
})
- Use the
APPROX_STATUSBAR_HEIGHT
in some places of the library, for example:
-
In the
<AppBar.Header />
component to add a margin top. See in the github repo -
In the
<Menu />
component to add an addional vertical space. See in the github repo
- Emulate the default behaviour of Expo apps:
<StatusBar translucent backgroundColor="rgba(0,0,0,0.4)" />
- Add a monkey patch to make
global.__expo
available, soreact-native-paper
will use it later
// expo-polyfill.js
import Constants from 'expo-constants'
global.__expo = {
Constants
}