Breaking News: Grepper is joining You.com. Read the official announcement!

platform check in react native for status bar color

Jittery Jellyfish answered on April 6, 2021 Popularity 1/10 Helpfulness 1/10

answer platform check in react native for status bar color

platform check in react native for status bar color

Comment

import React, {
  Component,
} from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  StatusBar,
  Platform,
  SafeAreaView
} from 'react-native';

const MyStatusBar = ({backgroundColor, ...props}) => (
  <View style={[styles.statusBar, { backgroundColor }]}>
    <SafeAreaView>
      <StatusBar translucent backgroundColor={backgroundColor} {...props} />
    </SafeAreaView>
  </View>
);

class DarkTheme extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MyStatusBar backgroundColor="#5E8D48" barStyle="light-content" />
        <View style={styles.appBar} />
        <View style={styles.content} />
      </View>
    );
  }
}

const STATUSBAR_HEIGHT = StatusBar.currentHeight;
const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  statusBar: {
    height: STATUSBAR_HEIGHT,
  },
  appBar: {
    backgroundColor:'#79B45D',
    height: APPBAR_HEIGHT,
  },
  content: {
    flex: 1,
    backgroundColor: '#33373B',
  },
});

AppRegistry.registerComponent('App', () => DarkTheme);

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript platform react-native status

Link to this answer
Share Copy Link

Contributed on Apr 06 2021

Jittery Jellyfish

0 Answers Avg Quality 2/10

platform check in react native for status bar color

Contents

More Related Answers

platform check in react native for status bar color

Grepper

Documentation

Social

Legal

Contact

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