Как стилизовать компонент представления, чтобы добавить пространство между двумя кнопками?

Question

Я новичок в разработке интерфейса в react native. Просто пытаюсь разобраться в таблице стилей. Я разместил две кнопки внутри представления со следующим стилем.

buttonscontainer: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
    }

введите описание изображения здесь

Вот полный jsx и стиль

<Modal transparent={true} visible={true}>
            <View style={styles.dimmedBackground}>
                <View style={styles.modalContainer}>
                    <Text>type something</Text>
                    <TextInput style={styles.input} />
                    <View style={styles.buttonsContainer}>
                        <Button title="Cancel" color="coral" />
                        <Button title="Add" color="coral" />
                    </View>
                </View>
            </View>
        </Modal>

const styles = StyleSheet.create({
    dimmedBackground: {
        backgroundColor: '#000000aa',
        flex: 1,
        justifyContent: 'center',
    },
    modalContainer: {
        backgroundColor: '#ffffff',
        margin: 35,
        padding: 30,
        borderRadius: 10,
    },
    input: {
        marginBottom: 10,
        paddingVertical: 6,
        borderBottomWidth: 1,
        borderBottomColor: '#ddd',
    },
    buttonsContainer: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
});

Я уже некоторое время пытался создать пространство между обеими кнопками, совершенно не понимая, как этого добиться.

Как мне стилизовать компонент представления, обертывающий две кнопки, чтобы между ними оставалось немного места по горизонтали? Спасибо

Answer 1

Вы можете использовать 'пробел между' для выравнивания, укажите ширину

 buttonscontainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginHorizontal: 5,
        width:'40%',
        alignSelf:'flex-end'
    },