white bar on-top of keyboard on focusing TextInput :React Native

Question

So, in a component, When focusing an input field, a white background appears behind the keyboard, it extends up to 20-30px above the keyboard, it is like, a white bar is sitting above the keyboard. sometimes it will open normal, sometimes the bar takes the same size of the keyboard, above it

you can see in the attached picWhite bar on top of Keyboard

i thought there is bottom padding, flex/layout issues, ,keyboardAvoidingView problem etc etc trial and error, expecting keyboard opens normally,but nothing solved

Answer 1

while using Statusbar of React native, this issue is rising, specifically the translucent prop of the Status bar, on commenting out the translucent prop the issue is solved for me. Even though i checked them , im not sure if the combination of things ,like KeyboardAvoidingView+StatusBar or scrollview + StatusBar + KeyboardAvoidingView is causing the issue

for now , this worked for me(better remove the whole thing)

<StatusBar
  barStyle="light-content"
  //translucent={true} <-----------------
  backgroundColor="#000"
 />