In my React Native project, I'm currently working with 2 inline buttons - the search and add buttons:
https://i.stack.imgur.com/tKZrf.png
I'm looking to add some spacing between these buttons without impacting their alignment with the left and right edges.
This is how I've set up the JSX:
<View style={globalStyles.stretchContent}>
<TouchableOpacity
style={[
globalStyles.touchableBtnDropOffItem,
{ backgroundColor: Colors.dropOffTabColor },
]}
>
<Text style={{ color: '#fff' }}>Search</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
globalStyles.touchableBtnDropOffItem,
{ backgroundColor: Colors.dropOffTabColor },
]}
>
<Text style={{ color: '#fff' }}>Add</Text>
</TouchableOpacity>
</View>
And here's the corresponding stylesheet:
touchableBtnDropOffItem: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
alignContent: 'space-between',
height: 36,
marginTop: 20,
borderRadius: 2,
marginHorizontal: 5,
},
stretchContent: {
flex: 1,
color: white,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
Working with React Native's flexbox layout has presented challenges in achieving this. Applying margin affects the button widths unevenly, causing them to no longer align as intended. For instance, I want the search button to perfectly align with the text All Passengers List (9). However, using marginHorizontal disrupts this alignment by adding margins on both sides of the buttons.
How can I resolve this issue?