inital load screen

In the first screen that is load on my react native app I am making the statusbar transparent so the bg color is visible even under statusbar.

  return (
<View className="flex-1">
  <StatusBar
    barStyle={'light-content'}
    translucent={true}
    backgroundColor={'transparent'}
  />

  <View className="flex-1 bg-yellow-400">  

  </View>
</View>

);

this is screen component, there is initially a blaxkish bg for the statusbar but when I move to other screen or any render happens like some changes in vs code triggering the render.Then the statusbar bg below yellow or you can say view got adjusted properly