I'm pretty new to React Native and Expo, and I'm trying to get the hang of it. I just created an example app following the documentation, and I got the default welcome app. Now, I'm exploring it.

I have a bottom navigation bar with some tabs in it—mostly basic stuff. The tabs have a haptic animation that I want to remove, but I haven't been able to do so.

I read the documentation for Expo Tabs and React Navigation Bottom Tabs, where I found a property called hapticFeedbackEnabled. However, I can't seem to use it in my app.

It should be a simple customization, but now I'm confused. I would appreciate help understanding the logic of how to find and modify this animation, how to customize it, and, more generally, what approach to take to solve this problem. That would really help me catch up!

import { Tabs } from 'expo-router';
import React from 'react';
import { Platform } from 'react-native';

import { HapticTab } from '@/components/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';


export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            position: 'absolute',
          },
          default: {},
        }),
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: 'Explore',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
        }}
      />

      <Tabs.Screen
        name="teszt"
        options={{
          title: 'Tesztt',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="meho.fill" color={color} />
        }}
      />
    </Tabs>
  );
}