0

I center all the content of my screen vertically with justifyContent: center.
When I focus an input in that screen and the keyboard shows up, the top content overlaps with the status bar even though I'm using SafeAreaView.
How to prevent that overlap? I want the status bar to cover the content.

What I tried:

  • Adding top padding to the screen, but it didn't work.
  • Removing justifyContent: center, and actually the top of my content stopped overlapping with the status bar, but I still want to center the content.

Tried to mimic what I have in my project here: https://snack.expo.io/X0JCnVkwq

Screenshot:

Screenshot of the issue

Moaaz Bhnas
  • 1,010
  • 7
  • 18
  • 36
  • I think, it works as expected in your given example. If I remove `justifyContent: center`, it looks like your image but without any change, I cannot see an error. Do you work or check the rendering on a phone or desktop computer? Have you tried to refresh your cache? – Rene Jun 14 '20 at 04:03
  • Did you try code – Raghvender Kataria Jun 14 '20 at 04:17
  • @Rene I use an android device. I actually am not sure if the link I privided reproduces the issue. Sorry – Moaaz Bhnas Jun 14 '20 at 04:33
  • @RAGHVENDERKATARIA I use Expo. I read that KeyboardAwareScrollView not straigtforward and not recommended. – Moaaz Bhnas Jun 14 '20 at 12:29

2 Answers2

0

I solved it by conditionally setting justifyContent property. flex-start when keyboard is visible. center when keyboard is not visible.
Not the best approach, but it worked for me.

Moaaz Bhnas
  • 1,010
  • 7
  • 18
  • 36
0

KeyboardAvoidingView

Use react-native KeyboardAvoidingView this may help to fix the problem

https://reactnative.dev/docs/keyboardavoidingview

MUHAMMAD ILYAS
  • 1,402
  • 7
  • 23