4

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

Soullivaneuh
  • 3,553
  • 3
  • 37
  • 71

2 Answers2

2

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

MoreFoam
  • 624
  • 1
  • 6
  • 25
  • Interesting. So it's maybe something else, I'll keep digging on that. Thanks! – Soullivaneuh Nov 26 '20 at 12:20
  • I did not notice your code is not the same as mine... why 0.03 flex property on android? – Soullivaneuh Nov 26 '20 at 12:22
  • Ya, I added flex to android SafeAreaView components and I also am not wrapping the view in the 2nd SafeAreaView. On Android, the SafeAreaView's were not displaying at all with your original code for me. I had to tell them to take up space by using flex. Not the cleanest approach, but it will work if you can't find a better solution. – MoreFoam Nov 26 '20 at 17:03
0

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.

Lucky Pal
  • 20
  • 3