CODEWITHSUNDEEP
iosreact-nativereact-native-ios
jasan
jasan

Reputation: 12937

How do I retrieve iOS Status Bar height in React-Native app?

For Android I know I can use StatusBar.currentHeight but I'm not sure how to do so for iOS.

The answer to how to retrieve the size in Swift(native) has already been answered but I need this in a react native app.

Upvotes: 24

Views: 37166

Answers (3)

dcangulo
dcangulo

Reputation: 2107

If you're using Expo you can use Constants.statusBarHeight.

import Constants from 'expo-constants';
const statusBarHeight = Constants.statusBarHeight;

If you're using Vanilla React Native with React Navigation you can use the following:

import { useSafeAreaInsets } from 'react-native-safe-area-context';
const insets = useSafeAreaInsets();
const statusBarHeight = insets.top;

See: https://reactnavigation.org/docs/handling-safe-area/#use-the-hook-for-more-control

Sample Code:

import * as React from 'react';
import { Text, View, StatusBar } from 'react-native';
import Constants from 'expo-constants';
import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaProvider>
      <ChildScreen />
    </SafeAreaProvider>
  );
}

function ChildScreen() {
  const insets = useSafeAreaInsets();
  
  return (
    <View style={{ flex: 1, justifyContent: 'center'}}>
      <Text>
        {insets.top}
      </Text>
      <Text>
        {Constants.statusBarHeight}
      </Text>
      <Text>
        {StatusBar.currentHeight ?? 'N/A'}
      </Text>
    </View>
  );
}

Output:

Samsung Galaxy S10 5G iPhone 8 Plus iPhone 11 Pro Max Web
insets.top 39.71428680419922 20 44 0
Constants.statusBarHeight 39 20 44 0
StatusBar.currentHeight ?? 'N/A' 39.42856979370117 N/A N/A N/A

Live code: https://snack.expo.dev/@dcangulo/statusbarheight

Upvotes: 29

Cyber
Cyber

Reputation: 161

You can use this package, it has very good documentation. react-native-status-bar-height

Upvotes: 3

Oleksandr Cherniavenko
Oleksandr Cherniavenko

Reputation: 1575

You can use React Navigation that already have support of iPhone X.

Even if you don't want use this library because of some reason - you still can read source code to copy implementation in your code

Upvotes: 4

Related Questions