Search code examples
react-nativereact-native-elements

React Native center buttons align one under another


I started using React native and React native Elements. I'm trying to have buttons one under another with some space between buttons and left and right side.

<View style={styles.container}>
    <ThemeProvider>
        <Button
            buttonStyle={styles.btnStyle}
            icon={
                <Icon
                name="arrow-right"
                size={15}
                color="white"
                />
            }
            title="My BTN 1"
        />
        <Button
            buttonStyle={styles.btnStyle}
            icon={
                <Icon
                name="arrow-right"
                size={15}
                color="white"
                />
            }
            title="My BTN 2"
        />
        <Button
            buttonStyle={styles.btnStyle}
            icon={
                <Icon
                name="arrow-right"
                size={15}
                color="white"
                />
            }
            title="My BTN 3"
        />
    </ThemeProvider>
</View>

And the styles:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    btnStyle: {
        marginBottom: 5,
        width: '90%'
    }
});

It is displaying one beside another and not respecting the size of the mobile device.

Thanks


Solution

  • You need to remove this one from your stylesheet

    flexDirection: 'row'

    Or, simply change it into

    flexDirection: 'column'