'How to justify items to left and right using flexbox

How do I align the 2 touchableOpacity components to the right and left respectively? Here is how it currently looks like:

enter image description here

Here is how my code looks like:

<View style={{ flex: 1, 
        alignItems: 'flex-start', 
        justifyContent: 'center',
        paddingLeft: 30}}>
//Other components are here

  <View style={{flexDirection: 'row', justifyContent:'space-between'}}>
                <TouchableOpacity style={{width: 100, height: 50, backgroundColor: 'black', alignItems: 'center', justifyContent: 'center'}}>
                    <View>
                        <Text style={{color: 'white'}}>Submit</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={{width: 100, height: 50, backgroundColor: 'gray', alignItems: 'center', justifyContent: 'center'}}>
                    <View>
                        <Text style={{color: 'white'}}>Cancel</Text>
                    </View>
                </TouchableOpacity>
            </View>
</View>
react-nativeflexbox


Solution 1:[1]

Give flex 1 in second view

<View style={{flex: 1, flexDirection: 'row', justifyContent:'space-between'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 hassanqshi

Related Questions