statusbar.md

The StatusBar Problem

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:

1. The status bar is translucent by default in Expo apps
2. 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.

What about Paper?

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.

1. 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
})

2. 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

The solution

1. Emulate the default behaviour of Expo apps:

<StatusBar translucent backgroundColor="rgba(0,0,0,0.4)" />

2. Add a monkey patch to make global.__expo available, so react-native-paper will use it later

// expo-polyfill.js
import Constants from 'expo-constants'

global.__expo = {
  Constants
}