Can't change screen with TabIcon in react native? - react-native

Question

I have an issue when changing screens. If i pressed in the middle of the tabIcon it's not navigating to the screen but if i clicked a little bit left further the screen changes. I think that like there is a sort of a View in absolute above that is preventing me from pressing (Element inspector).
I have my code like this :
<Tab.Navigator
initialRouteName="HomeNavigator"
tabBarOptions={{
showLabel: false,
keyboardHidesTabBar: true,
labelStyle: {
color: 'red'
},
style: {
backgroundColor: '#008D36' ,
paddingTop: 10,
paddingBottom: 10,
minHeight: 65,
color: '#ffffff',
borderTopColor: '#ffffff',
justifyContent: 'flex-start',
alignItems: 'flex-start'
, }
}}
>
<Tab.Screen
name="Home"
component={HomeNavigator}
options={(navigation, route) => ({
title: 'Home',
tabBarIcon: ({ props, focused }) => (
<TouchableWithoutFeedback {...props} >
<View style={{flex: 2, alignItems: 'center'}}>
<Image source={LOGO1} resizeMode="contain" style={[styles.imgSize, focused && { opacity:1 }]} />
<Text style={[styles.label, focused && { opacity:1, textDecorationLine: 'underline' }]}>Home</Text>
</View>
</TouchableWithoutFeedback>
)
})}
/>
<Tab.Screen
name="Home2"
component={HomeNavigator}
options={(navigation, route) => ({
title: 'Home2',
tabBarIcon: ({ props, focused }) => (
<TouchableWithoutFeedback {...props} >
<View style={{flex: 2, alignItems: 'center'}}>
<Image source={LOGO2} resizeMode="contain" style={[styles.imgSize, focused && { opacity:1 }]} />
<Text style={[styles.label, focused && { opacity:1, textDecorationLine: 'underline' }]}>Home2</Text>
</View>
</TouchableWithoutFeedback>
)
})}
/>
</Tab.Navigator>

Answer 1

I think that flex: 2 is out of place at this position of the tabBarIcon. You can use alignItems or justifyContent without telling the view for flex.
<TouchableWithoutFeedback {...props} >
<View style={{alignItems: 'center'}}>
<Image source={LOGO1} resizeMode="contain" style={[styles.imgSize, focused && { opacity:1 }]} />
<Text style={[styles.label, focused && { opacity:1, textDecorationLine: 'underline' }]}>Home</Text>
</View>
</TouchableWithoutFeedback>