React Native Justifying Views Vertically Without Me Setting It To

I'm experimenting a login screen: https://snack.expo.io/@lucaszanella/login-screen-test-zanella (some image sources were removed because I cannot upload them to snack and others I

Solution 1:

Children of a flexbox share the parent's flex area in proportions. You have set Logo to flex:3, Form to flex:7, and SignupSection to flex:1. Thus, 7 + 3 + 1 = 11, therefore, Logo takes 3/11, Form takes 7/11, and SignupSection takes 1/11 of the parent's flex area in the specified direction.

Within Form, you've set UserInput to flex: 1. So the children (UserInput) of Form will equally share (and fill up) the flex area (7/11) that Form has acquired from its parent. This is why you see the space between UserInputs. To understand this better, try replacing UserInputs with simple Views with different background colors and you'll see what's going on.

Answer : Reduce flex on Form and apply margins if required.

EDIT

Alternatively, you can set fixed height (in case of flexDirection:'column' of parent) or width (in case of flexDirection:'row' of parent) to the children.

Hope this helps.