TouchableOpacity doesn't work in custom TabBar component #8325
Description
Current Behavior
I need to use custom icons in the bottom tabs, so I've decided to create a custom tab bar, according to the documentation. The problem I facing that TouchableOpacity onPress is not being called. To make it worse, it sometimes works (i.e. after fresh start, the first time I click on tab it works, but consequtive clicks does nothing).
- What code are you running and what is happening?
import React from 'react';
import {View, TouchableOpacity, Text} from 'react-native';
import {colors, spacing} from 'app/style/styles';
export default function TabBar({state, descriptors, navigation}) {
return (
<View
style={{
flexDirection: 'row',
backgroundColor: colors.background,
zIndex: 1000,
shadowColor: 'black',
shadowRadius: 3,
overflow: 'visible',
shadowOpacity: 0.5,
shadowOffset: {
width: 2,
height: 2,
},
}}>
{state.routes.map((route, index) => {
console.log('Creating tab bar');
const {options} = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
console.log('onPress');
const event = navigation.emit({
type: 'tabPress',
target: route.key,
});
console.log(
'IsFocused? defaultPrevented?',
isFocused,
event.defaultPrevented,
);
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
return (
<TouchableOpacity
key={route.key}
onPress={() => {
console.log('onPress 0');
onPress();
}}
onLongPress={onLongPress}
style={{flex: 1, padding: spacing.s}}>
<View
style={{
justifyContent: 'center',
alignSelf: 'center',
alignItems: 'center',
}}>
{isFocused ? options.iconFilled : options.iconEmpty}
<Text
style={{
color: isFocused ? colors.darkBlue : colors.textDarkGray,
}}>
{label}
</Text>
</View>
</TouchableOpacity>
);
})}
</View>
);```
**Expected Behavior**
- What do you expect should be happening?
I expect that TouchableOpacity `onPress` will be called on touch
**Your Environment**
| software | version |
| ----------------------------- | ------- |
| Android | 10
| @react-navigation/native | 5.0.7
| @react-navigation/bottom-tabs | 5.5.0
| react-native-screens | 2.0.0-beta.10
| react-native | 0.61.5
| expo |
| node | v12.9.1
| yarn | 1.17.3