Problem positioning element to the bottom

Question

I'm using native base as my app template and I've been trying to position two button elements above the footer using only flex. Here is how the buttons are positioned currently.

I tried doing justifyContent: flex-end / space-between but the buttons remains far away from the footer.

 <Container>
        <Header>
          <MainHeader />
        </Header>
        <Content>
            <View style={{flex: 1, justifyContent: 'center'}} >
                <View style={{  borderBottomColor: 'black', borderBottomWidth: 1, height: 50 }}>
                    <View style={{ flexDirection: 'row' }}>
                        <View style={{ flex: 1, alignSelf: 'center' }}>
                            <Text>Name</Text>
                        </View>
                        <View style={{ flex: 1, alignSelf: 'center' }}>
                            <Text>Sales</Text>
                        </View> 
                        <View style={{ flex: 1, alignSelf: 'center' }}>
                            <Text>Commission</Text>
                        </View> 
                        <View style={{ flex: 1, alignSelf: 'center' }}>
                            <Text>Payout</Text>
                        </View> 
                        <View style={{ flex: 1, alignSelf: 'center' }}>
                            <Text>Profit</Text>
                        </View>
                    </View>
                </View>
                {this.renderRow()}
                <View style={{ flexDirection: 'column', justifyContent: 'space-between' }} >
                    <View style={{ flexDirection: 'row', alignSelf: 'stretch', height: 50, justifyContent: 'space-between' }} >
                        <View style={{flex:1, alignSelf: 'center'}}>
                            <Button onPress={() => this.share(this.state.response)} title="Share"></Button>
                        </View>
                        <View style={{flex:1, alignSelf: 'center'}}>
                            <Button onPress={() => this.share(this.state.response)} title="Share"></Button>
                        </View>
                    </View>
                </View>
            </View>
        </Content>
        <Footer>
          <MainFooter />
        </Footer>
      </Container>

I want the share buttons to be at the bottom of the page above the footer.

score 0 · Answer 1 · answered Aug 21 '19 at 10:52

The reason is basically because everything is inside content which is basically a scrollview. You can't send something to the end of scrollview as it is parent.

You can access the prop of contentContainerStyle of content from native base and then give it style of justifyConent & alignItens -> flex-end.

I hope it'll work.

This will help you.

Problem positioning element to the bottom

1 Answers1