CODEWITHSUNDEEP
androidiosfacebookreact-nativejsx
Jaseem Abbas
Jaseem Abbas

Reputation: 5230

React Native - Footer button

I am developing my React Native app with Native Base. I have a simple login form as follows.

View

<Container>
    <Content>
        <InputGroup>
            <Icon name="ios-person" style={{ color: '#969696' }} />
            <Input placeholder="Email" autoFocus={ true} style={{ color: '#4b4b4b' }} />
        </InputGroup>
        <InputGroup>
            <Icon name="ios-unlock" style={{ color: '#969696' }} />
            <Input placeholder="Password" secureTextEntry style={{ color: '#4b4b4b' }} />
        </InputGroup>
        <Button style={ styles.loginButton}>
            Login
        </Button>
    </Content>
</Container>

Styles

const styles = StyleSheet.create({
  loginButton: {
    alignSelf : 'stretch',
    position: 'absolute',
    bottom:0,
    left:0,
    backgroundColor : '#4990e2',
    borderRadius : 0
  }
});

Output

enter image description here

How do I get the login button to be fully stretched at the bottom of the screen?

PS : I am a beginner.

Upvotes: 0

Views: 705

Answers (1)

Haitao Li
Haitao Li

Reputation: 1693

The height of Content element is calculated from it's child elements. In your case it gets just enough height to contain the two InputGroup elements, because the button has "absolute" position. You need to find your whole screen element first. Let's say it's the Container element. Then use "absolute" positioning on Content as well: position: "absolute", top: 0, bottom: 0, left: 0, right: 0,

This way the covers the whole screen. Then on your button element: position: "absolute", bottom: 0, left: 0, right: 0

I don't think alignSelf works for absolute positioning.

Upvotes: 1

Related Questions