MaterialBottomTabNavigator doesn't have tap feedback on iOS

[andreialecu]

Current behaviour

The MaterialBottomTabNavigator uses TouchableWithoutFeedback on iOS:
https://github.com/callstack/react-native-paper/blob/master/src/components/BottomNavigation.tsx#L300

This results in no sort of feedback appearing when tapping to switch the tab. On Android a Ripple is rendered.

This is especially bad when the entire tab bar is configured to only a single solid color (no separate colors per screen).

I'm using the bottom tab navigator via @react-navigation/material-bottom-tabs.

Expected behaviour

I think it would be a good idea to display some sort of visual indication on tap. A TouchableHighlight might make more sense. The Facebook app on iOS displays a light gradient when tapping its bottom bar.

Screenshots (if applicable)

What have you tried

There appears to be a renderTouchable property, but when using createMaterialBottomTabNavigator from @react-navigation/material-bottom-tabs it is never called. Example below:

const Tab = createMaterialBottomTabNavigator();

<Tab.Navigator barStyle={styles.barStyle} renderTouchable={() => { console.log("foo") /* never called */ }}>

renderTouchable is not really documented, and TouchableProps is not exported so it makes it really hard to use. Seems to have been added in #1901 but it's usage is unclear.

Your Environment

software	version
react-native	0.63.1
react-native-paper	3.10.1

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.63.1, latest: 0.63.2)
• react-native-paper (found: 3.10.1, latest: 4.0.1)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[micahlt]

Bumping this - seems to still be the case in the latest version of react-native-paper. renderTouchable is documented but never called.