CODEWITHSUNDEEP
react-nativereact-native-elements
myTest532 myTest532
myTest532 myTest532

Reputation: 2381

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

Upvotes: 0

Views: 450

Answers (1)

Ondi
Ondi

Reputation: 51

You need to remove this one from your stylesheet

flexDirection: 'row'

Or, simply change it into 

flexDirection: 'column'

Upvotes: 1

Related Questions