CODEWITHSUNDEEP
react-nativeiphone-x
Soullivaneuh
Soullivaneuh

Reputation: 3863

How to have different colors on top and bottom of SafeAreaView with Iphone X

This question was already answered, but the proposed solution is not working anymore:

return (
  <Fragment>
    <SafeAreaView style={{ flex:0, backgroundColor: 'red' }} />
    <SafeAreaView style={{ flex:1, backgroundColor: 'gray' }}>
      <View style={{ flex: 1, backgroundColor: 'white' }} />
    </SafeAreaView>
  </Fragment>
);

Should give me:

enter image description here

Gave me instead:

enter image description here

As you can see, the view order is not the same.

I have the same issue on iOS.

I am using react 16.13.1, maybe something changed since the last answer?

What are my alternatives?

Thanks

Upvotes: 4

Views: 3102

Answers (2)

Lucky Pal
Lucky Pal

Reputation: 20

In my experiences, StatusBar from react-native worked well for me. Example:

import { StatusBar } from 'react-native';

return (<Fragment>
    <StatusBar
        backgroundColor="#f00"
        barStyle="light-content"
    />
<Fragment>);

Cheers.

Upvotes: 0

MoreFoam
MoreFoam

Reputation: 699

The following worked for me, using React 16.13.1:

return (
        <Fragment>
            <SafeAreaView style={{flex: Platform.OS === "android" ? 0.03 : 0, backgroundColor: "red"}}/>
            <View style={{flex: 1, backgroundColor: "white"}}/>
            <SafeAreaView style={{flex: Platform.OS === "android" ? 0.03 : 0, backgroundColor: "gray"}}/>
        </Fragment>
    );

iOS screenshot:

ios

Android screenshot:

enter image description here

Upvotes: 2

Related Questions