CODEWITHSUNDEEP
androidiosreact-nativestatusbarexpo
Ayyoub
Ayyoub

Reputation: 1375

react-native statusBar with expo on iOS

I was trying to change the color of the statusBar on my react-native app.

I am working with expo and on their documentation they are just specifying to add : "androidStatusBar": { "backgroundColor": "#2E1D59" }

that works fine with android, but they did not mention how to do so with iOS statusBar.

Anyone has an idea about this ?

Upvotes: 10

Views: 18131

Answers (4)

Rahul Dasgupta
Rahul Dasgupta

Reputation: 809

You cannot set the StatusBar background color in iOS. However, theres a work-around. You have to define the background color of the header in the Stack Navigator of @react-navigation/stack

import React, {useState, useEffect} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

//Pages
import Dashboard from "./Dashboard";

const AppLoad = createStackNavigator();

const App = () => {
  return (
      <NavigationContainer>
        <AppLoad.Navigator initialRouteName='Dashboard'>
          <AppLoad.Screen name="Dashboard" component={Dashboard}
              options={{
                headerTitle: null,
                headerLeft: null,
                headerStyle: {
                  backgroundColor: '#0891b2',
                  shadowColor: 'transparent',
                  elevation: 0,
                  height: 48,
                },
              }}/>
        </AppLoad.Navigator>
      </NavigationContainer>
    )
  }

iPhone 14 Expo Go

Upvotes: 0

Sidak Singh
Sidak Singh

Reputation: 1

You can just download the following package: npm i ios-status-bar

I usually end up using doing this.

<IOSStatusBar color={"rgba(255, 173, 25, 1.0)"};

Upvotes: 0

Casey Gibson
Casey Gibson

Reputation: 2863

You can't set the background color of the StatusBar itself, but your components can fill the space and you set the color on the component. Then use the StatusBar component to tell iOS to change the text color.

import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState } from 'react';
import { Appearance, View } from 'react-native';

export default function App() {
  const [colorScheme, setColorScheme] = useState(Appearance.getColorScheme());

  useEffect(() => {
    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
      setColorScheme(colorScheme);
    });

    return () => {
      subscription.remove();
    };
  }, []);

  return (
    <View style={{ flex: 1, backgroundColor: colorScheme === 'dark' ? 'black' : 'white' }}>
      <StatusBar style={colorScheme === 'dark' ? 'light' : 'dark'} />
      {/* Your app content */}
    </View>
  );
}

Upvotes: 0

jevakallio
jevakallio

Reputation: 35890

You can't change the color of the iOS status bar.

You can use the React Native StatusBar module to either hide it, or set the text color to light (white) or dark (black).

You can just drop the component in your app's root component:

 <StatusBar barStyle="light-content" />

Upvotes: 18

Related Questions