Como ter cores diferentes na parte superior e inferior do SafeAreaView com Iphone X

Question

Essa pergunta já foi respondida , mas a solução proposta não está mais funcionando:

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

Deve me dar:

Em vez disso, me deu:

Como você pode ver, a ordem de exibição não é a mesma.

Tenho o mesmo problema no iOS.

Estou usando o react 16.13.1, talvez algo tenha mudado desde a última resposta?

Quais são minhas alternativas?

Obrigado

Answer 1

O seguinte funcionou para mim, usando 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>
    );

Captura de tela do iOS:

Captura de tela do Android:

Answer 2

Em minhas experiências, StatusBarde react-nativefuncionou bem para mim. Exemplo:

import { StatusBar } from 'react-native';

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

Saúde.