react native - Have a ScrollView inside a KeyboardAvoidingView that takes at least 100% height to layout children with flexbox -


i'm trying implement login form layouts children flexbox. contains 2 components, app logo , login form. logo should take 33% of viewports height, form should take 66%.

this relatively easy flexbox. set flex: 1 on logo , flex: 2 on form.

wrapping whole screen in keyboardavoidingview works fine – flex layout shrinks keyboard appears, user can't see bottom elements of form, since can't fit in area above keyboard.

the obvious solution wrap form in scrollview , wrap in keyboardavoidingview, whole form flexbox layout stops working. content container of scrollview tall children, won't take full viewport height.

i made expo snack showing layout: https://snack.expo.io/rydf0b4o-

i need layout scrollable when can't show children, seems impossible scrollview. (click second button toggle scrollview in layout)


Comments

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

jquery - Responsive Navbar with Sub Navbar -