How to justify items to left and right using flexbox-CodePudding

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

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>

CodePudding user response：

Give flex 1 in second view

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

CodePudding user response：

Add a width to your view (since the flex-start is messing it up I think) might do the trick:

<View style={{flexDirection: 'row', justifyContent:'space-between', width:"100%"}}>