View goes hidden when status bar is set

Question

I have a component it has a view of flex: 1 with a status bar component and a child component, when the status bar element isn't there the indicator shows, but when I add the status bar element, the indicator goes hidden, Please how can i make the indicator show while the status bar is added, what is making it go hidden

With the StatusBar(The indicator goes hidden)

Without the StatusBar(The Indicator shows)

THE CODE

CHILD COMPONENT(On)

import {BoxShadow} from 'react-native-shadow';

export default class On extends Component {
render() {
    const shadowOpt = {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height / 10,
        color: "#000",
        border: 10,
        opacity: '0.15',
        radius: 20,
        x: 0,
        y: 5,
    }
    const dimensions = Dimensions.get('window');
    const Height = (dimensions.height);
    const Width = dimensions.width;
    return (
        <View style={{flex: 1}}><View name="indicator" style={{flexDirection: 'row',}}>
            <View style={{backgroundColor: '#cbcdda', width: Width, height: Height / 60}}>
            </View>
            <View style={{
                backgroundColor: '#EFB879',
                width: (this.state.width),
                height: Height / 60,
                position: 'absolute'
            }}>
            </View>
        </View>
            <ViewPagerAndroid
                onPageSelected={this.onPageSelected.bind(this)}
                ref={(viewPager) => {
                    this.viewPager = viewPager
                }}
                style={{height: Height - ((Height / 30) + (Height / 10))}}
                initialPage={0}>
                <View style={{
                    backgroundColor: 'white',
                    alignItems: 'center',
                    alignSelf: 'center',
                    justifyContent: 'center',
                    flexDirection: 'column'
                }} key="1">
                    <Image style={{marginBottom: 50,}} source={require('../on1.png')}/>
                    <Text style={{
                        fontFamily: 'mont',
                        color: '#000',
                        fontSize: 22,
                        letterSpacing: 0.5,
                        marginBottom: 12
                    }}>
                        Welcome to Sẹlẹ
                    </Text>
                    <Text style={{
                        fontFamily: 'mont',
                        color: '#615D5D',
                        fontSize: 16,
                        letterSpacing: 1,
                        textAlign: 'center'
                    }}>
                        Hire services and buy and sell {'\n'} on Sẹlẹ
                    </Text>
                </View>
                <View style={{
                    backgroundColor: 'white',
                    alignItems: 'center',
                    alignSelf: 'center',
                    justifyContent: 'center',
                    flexDirection: 'column'
                }} key="2">
                    <Image style={{marginBottom: 50, width: '35%', height: '35%'}}
                           source={require('../sele2.png')}/>
                    <Text style={{
                        fontFamily: 'mont',
                        color: '#000',
                        fontSize: 22,
                        letterSpacing: 0.5,
                        marginBottom: 12
                    }}>
                        With Sẹlẹ, you can
                    </Text>
                    <Text style={{
                        fontFamily: 'mont',
                        color: '#615D5D',
                        fontSize: 16,
                        letterSpacing: 1,
                        textAlign: 'center'
                    }}>
                        Hire services and buy and sell {'\n'} on Sẹlẹ
                    </Text>
                </View>
                <View style={{
                    backgroundColor: 'white',
                    alignItems: 'center',
                    alignSelf: 'center',
                    justifyContent: 'center',
                    flexDirection: 'column'
                }} key="3">
                    <Text style={{
                        fontFamily: 'mont',
                        color: '#000',
                        fontSize: 22,
                        letterSpacing: 0.5,
                        marginBottom: 12
                    }}>
                        Select your School
                    </Text>
                    <Text style={{
                        fontFamily: 'mont',
                        color: '#615D5D',
                        fontSize: 16,
                        letterSpacing: 1,
                        textAlign: 'center'
                    }}>
                        You've made it this far {'\n'} select your school on the next page {'\n'} and let's get
                        started
                    </Text>
                </View>
            </ViewPagerAndroid>
            <BoxShadow setting={shadowOpt}>
                <View style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    flex: 1,
                    backgroundColor: 'white',
                }}>
                    <TouchableNativeFeedback>
                        <Text style={{
                            fontSize: 18,
                            marginLeft: 25,
                            fontFamily: 'mont',
                            color: '#615D5D',
                            marginBottom: 10
                        }}>Skip</Text>
                    </TouchableNativeFeedback>
                    <View style={{flexDirection: 'row'}}><View
                        style={{marginRight: 14, alignSelf: 'center'}}>
                        <View style={this.state.no == "0" ? styles.selected : styles.unselected}>
                        </View>
                    </View>
                        <View style={{marginRight: 14}}>
                            <View
                                style={this.state.no == "1" ? styles.selected : styles.unselected}>
                            </View>
                        </View>
                        <View
                            style={this.state.no == "2" ? styles.selected : styles.unselected}>
                        </View></View>
                    <TouchableNativeFeedback onPress={this.update.bind(this)}>
                        <Text style={{
                            fontFamily: 'mont',
                            color: '#EFB879',
                            fontSize: 18,
                            marginRight: 25,
                            marginBottom: 10
                        }}>Next</Text>
                    </TouchableNativeFeedback>
                </View>
            </BoxShadow>
        </View>
    );
}
}

PARENT ELEMENT

export default class Parent extends Component {
constructor(props) {
    super(props);
    this.state = {
        timePassed: false,
    };
}
render() {
        return (
            <View style={{flex: 1}}>
                <StatusBar backgroundColor='#EE8F62' translucent={true} barStyle='light-content'/><On/>
            </View>
        );

    }
}

Answer 1

We had similar problem for android, This is how we handle it was, may be this will help you to find a better solution.

You need to create a const and assign status bar size as a value.

const NAVBAR_HEIGHT = Platform.select({
  ios: { marginTop: 0 },
  android: { marginTop: window.height / 8 }
});

Then in the style section should add this line,

marginTop: NAVBAR_HEIGHT.marginTop

Like this,

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#E7EBF0",
    marginTop: NAVBAR_HEIGHT.marginTop
  }
});

This is how we create status bar for our application,

<View style={styles.container}>
        {/* if ios status bar will be added to the screen */}
        {Platform.OS === "ios" ? (
          <Statusbar backgroundColor="#000000" barStyle="light-content" />
        ) : null}
</View>