O problema é que sua tela não está considerando o tamanho da StatusBar
.
Por exemplo, quando a StatusBar
está com a propriedade translucent
definida o aplicativo será renderizado por trás dela, o que pode ser útil em algumas situações, mas é um problema no seu caso.
Para resolver você pode renderizar a <StatusBar />
no componente que lhe convém, porém sem definir a propriedade translucent
. Vale ressaltar que mesmo que você renderize a <StatusBar />
em vários componentes, o React Native considerará a última renderizada.
<StatusBar backgroundColor='#fff' barStyle='dark-content' />
Caso esteja utilizando o Expo, utilize o expo-status-bar.
Outra opção é fazer uso da SafeAreaView
como root do seu componente ao invés de uma View
. O funcionamento é o mesmo da View
, porém a SafeAreaView
leva em consideração alguns detalhes (como a StatusBar
, barras de navegação, tab etc.) e adiciona um padding
:
<SafeAreaView>
{/* componentes */}
</SafeAreaView>
Também existe o react-native-safe-area-context. Caso esteja utilizando o Expo, veja aqui
Note que é preferível utilizar SafeAreaView
ao invés de você colocar um estilo manual pois o tamanho da tela disponível varia de acordo com o dispositivo e também OS (Android / iOS).