CODEWITHSUNDEEP
javascriptreact-native
KamilG
KamilG

Reputation: 133

I am trying to place buttons at the bottom of the screen with React-Native and I really struggle to understand how to do it properly with flex support

I am trying to build up an application with React-Native and I need to place two buttons next to each other at the bottom of the screen. So far I wrote this code:

    render() {
        const { subtitle } = this.state;
        return (
            <View style={styles.container}>
                <ActionBar onBackAction={this.backActionHandler} isBackAvailable />
                <View style={styles.contentContainer}>
                    <Text>{subtitle}</Text>
                </View>
                <View style={styles.buttonsContainer}>
                    <Button title="BTN #1" />
                    <Button title="BTN #2" />
                </View>
            </View>
        );
    }

With these styles:

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            alignItems: 'center',
            justifyContent: 'space-between'
        },
        contentContainer: {
            flex: 1,
            flexGrow: 1,
            backgroundColor: 'purple'
        },
        buttonsContainer: {
            flex: 1,
            justifyContent: 'flex-end',
            flexDirection: 'row',
            marginBottom: 40,
            backgroundColor: 'red'
        }
    });

And this is the result so far...

the result

And this is what I want to achieve:

the result

Could anybody point me where is my mistake? If this is important, the whole screen above is nested in another View with just flex: 1 property. I am trying to understand this flex conception, but I can't manage to do that.

Upvotes: 0

Views: 84

Answers (1)

Prasun
Prasun

Reputation: 5023

Just change the flex to 0 for buttonsContainer style. When you put flex: 1 to both buttonsContainer and contentContainer, the available space is distributed among these two containers. But as per your requirement, contentContainer should take all the available space. So, setting contentContainer to flex: 1 is correct. To get the desired result set flex: 0 to buttonsContainer or you can avoid the flex property for buttonsContainer.

Read more about flex here. Hope this will help!

Upvotes: 1

Related Questions