Как визуализировать TouchableWithoutFeedback и TouchableNativeFeedback как кнопки вкладок с помощью createBottomTabNavigator?

Я пытаюсь использовать createBottomTabNavigator (из @react-navigation/bottom-tabs v5). Единственное, что я не мог изменить, - это кнопку табуляции. По умолчанию это хорошо, но я хочу использовать TouchableNativeFeedback на Android и TouchableWithoutFeedback (по умолчанию) на iOS.

Итак, я создал эту закуску, и единственная Touchable, которая отображается правильно, - это TouchableOpacity , остальные визуально не работают и не действуют при нажатии (навигация не работает).

Что не хватает для правильного рендеринга TouchableNativeFeedback и TouchableWithoutFeedback?

import React from 'react';
import {
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  TouchableNativeFeedback,
  StyleSheet,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';

const ScreenWithoutFeedback = () => <Text>Without Feedback</Text>;
const ScreenOpacity = () => <Text>Opacity</Text>;
const ScreenNativeFeedback = () => <Text>Native Feedback</Text>;

const buttonWithoutFeedback = (props) => (
  <TouchableWithoutFeedback {...props} />
);

const buttonOpacity = (props) => <TouchableOpacity {...props} />;

// I didn't set the Ripple yet because it isn't rendering correctly
const buttonNativeFeedback = (props) => <TouchableNativeFeedback {...props} />;

const TabNavigator = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <TabNavigator.Navigator
        initialRouteName="Collect"
        tabBarOptions={{
          activeTintColor: '#2962ff',
          inactiveTintColor: '#666',
          labelStyle: {
            fontSize: 12,
          },
          tabStyle: {
            maxWidth: 168,
            minWidth: 80,
            paddingHorizontal: 12,
            paddingTop: 8,
            paddingBottom: 12,
          },
          style: {
            alignItems: 'center',
            height: 56,
          },
        }}>
        <TabNavigator.Screen
          name="Without"
          component={ScreenWithoutFeedback}
          options={{
            tabBarIcon: ({ color }) => (
              <MaterialCommunityIcons name="account" color={color} size={24} />
            ),
            tabBarLabel: 'WithoutFeedback',
            tabBarButton: buttonWithoutFeedback,
          }}
        />
        <TabNavigator.Screen
          name="Opacity"
          component={ScreenOpacity}
          options={{
            tabBarIcon: ({ color }) => (
              <MaterialCommunityIcons name="settings" color={color} size={24} />
            ),
            tabBarLabel: 'Opacity',
            tabBarButton: buttonOpacity,
          }}
        />
        <TabNavigator.Screen
          name="Native"
          component={ScreenNativeFeedback}
          options={{
            tabBarIcon: ({ color }) => (
              <MaterialCommunityIcons name="logout" color={color} size={24} />
            ),
            tabBarLabel: 'NativeFeedback',
            tabBarButton: buttonNativeFeedback,
          }}
        />
      </TabNavigator.Navigator>
    </NavigationContainer>
  );
}

Текущий результат:

Я знаю, что есть createMaterialBottomTabNavigator (от @react-navigation/material-bottom-tabs), но, используя его, мне нужно было бы настроить больше вещей, которые я не мог заставить работать в моих тестах.