change statusbar color for ios react native

Harpreet_Singh answered on May 16, 2022 Popularity 9/10 Helpfulness 3/10

answer change statusbar color for ios react native

related react native status bar color

change statusbar color for ios react native

Comment

import React from 'react';
import { SafeAreaView, StatusBar, StyleSheet, View } from 'react-native';
import AppNavigator from './src/Routes/Main';
import colors from './src/Theme/colors';

const STATUSBAR_HEIGHT = StatusBar.currentHeight;
const App = () => {
  const MyStatusBar = ({ backgroundColor, ...props }) => (
    <View style={[styles.statusBar, { backgroundColor }]}>
      <SafeAreaView>
        <StatusBar translucent backgroundColor={backgroundColor} {...props} />
      </SafeAreaView>
    </View>
  );
  return (
    <View style={styles.container}>
      <MyStatusBar
        backgroundColor={colors.LightWhite}
        barStyle="dark-content" />
      <AppNavigator />
    </View>
  )
}

export default App

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  statusBar: {
    height: STATUSBAR_HEIGHT,
  },
})

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: ios javascript react-native statusbar

Link to this answer
Share Copy Link

Contributed on Jun 21 2023

Harpreet_Singh

0 Answers Avg Quality 2/10

Closely Related Answers

react native status bar color

Comment

import { StatusBar } from 'react-native'

<StatusBar backgroundColor="#FFF" style="dark-content" />

Popularity 10/10 Helpfulness 9/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 16 2022

florinrelea

0 Answers Avg Quality 2/10

change statusbar color for ios react native

Contents

More Related Answers

change statusbar color for ios react native

Closely Related Answers

react native status bar color

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.