NativeBase button text gone when parent align is set

Question

I have this screen, using NativeBase. It's just a login screen. It's divided in two parts, first one is with Image logo and signup button, and the second is with login fields.

<Container>
  <Content contentContainerStyle={{ flex: 1 }}>
    <View
      style={{
        flex: 2,
        alignItems: "center",
        justifyContent: "center"
      }}
    >
      <Thumbnail
        large
        source={require("../../../images/logo-splash.png")}
        style={{
          alignSelf: "center",
          marginBottom: 50
        }}
      />
      <Button full transparent>
        <Text style={{ fontSize: 12 }}>Doesn't have an account? Sign Up</Text>
      </Button>
    </View>
    <View style={{ flex: 1, flexDirection: "row", alignItems: "flex-end" }}>
      <Form>
        <Item stackedLabel>
          <Label>Email</Label>
          <Input />
        </Item>
        <Item stackedLabel last>
          <Label>Password</Label>
          <Input secureTextEntry />
        </Item>
        <Button full>
          <Text>Sign In</Text>
        </Button>
      </Form>
    </View>
  </Content>
</Container>

That just look like this

What I don't understand is why the button text is not showing up when styles flexDirection: "row", alignItems: "flex-end" are set on the second view?

Here is the same screen without alignItems

is this bottom pink block part of your button ??, also could you share the screenshot of the same page while toggle option is on and form view is highlighted, it will be easier to find the issue. — warl0ck, Apr 11 '18 at 11:12
If you make form view to flex direction row, all form elements will try to come in the same row and why would you want input fields in same line ? If you just want the form to be aligned at the bottom of the page remove flex direction and add justifyContent as `flex-end` and just add a paddingBottom of 2 maybe — warl0ck, Apr 11 '18 at 16:29
Worked like a charm. Make it a answer, so I can accept it. Thanks for the explanation @warl0ck. No need to add paddingBottom — lcssanches, Apr 11 '18 at 16:54

score 1 · Accepted Answer · answered Apr 12 '18 at 03:37

If you make form view to flexDirection row, all form elements will try to come in the same row or line and why would you want input fields in same line ?

If you just want the form to be aligned at the bottom of the page remove flexDirection to be row as by default it is flexDirection: 'column' which is what you will need and add justifyContent as flex-end and just add a paddingBottom of 1 or 2 maybe

so your final Style will look like:

style={{ flex: 1, justifyContent: 'flex-end', paddingBottom: 2 }}

NativeBase button text gone when parent align is set

1 Answers1