Can't I use flexbox for touchable opacity/ pressable. How to align these 2 elements in a row?

Question

<View style = {{flex : 0.2, backgroundColor : 'white', flexDirection : 'row' , justifyContent : 'space-around', alignItems : 'center'}}>
    <Pressable style = {{ height : '100%', width : '100%'}}>
    <Image style = {{height : '60%' , width : '10%'}} source = {require('../../DataStorage/SymbolsPicture/arrowLeft.png')}></Image> 
    </Pressable>
    <Pressable style = {{ height : '100%', width : '100%'}}>
    <Image style = {{height : '60%' , width : '10%'}} source = {require('../../DataStorage/SymbolsPicture/arrowRight.png')}></Image> 
    </Pressable>
    </View> 

What I get

I need both of the arrows to be spaced around in the same row.

Answer 1

what about using just flex:

<View style={{flex: 0.2, backgroundColor: 'white', flexDirection: 'row', justifyContent: 'space-evenly'}}>
    <Pressable style={{flex: 1}}>
        <Image style={{flex: 1}} resizeMode="contain" source = {require('../../DataStorage/SymbolsPicture/arrowLeft.png')}/> 
    </Pressable>
    <Pressable style={{flex: 1}}>
        <Image style={{flex: 1}} resizeMode="contain" source = {require('../../DataStorage/SymbolsPicture/arrowRight.png')}/> 
    </Pressable>
</View>