react-native-reanimated/src/derived/interpolate could not be found within the project

[NiketanG]

Bug

When using with expo, results in the following error:

undefined Unable to resolve module react-native-reanimated/src/derived/interpolate from /home/nikketan/Projects/Crypto11/crypto11-client/node_modules/react-native-redash/lib/module/v1/Colors.js: react-native-reanimated/src/derived/interpolate could not be found within the project.

Environment info

Using expo 4.5.2

Library	Version
@gorhom/animated-tabbar	2.1.1
react-native	expo 41.0
react-native-reanimated	2.1.0
react-native-gesture-handler	1.10.2
react-native-svg	12.1.0

Steps To Reproduce

1. Create a new expo project.
2. Add React Navigation, install dependencies. Using expo install react-native-reanimated react-native-gesture-handler react-native-svg
3. Add react-native-animated-tabbar and configure

Describe what you expected to happen:

1. The tabbar should work properly on expo apps.

Reproducible sample code

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AnimatedTabBar, {TabsConfig, BubbleTabBarItemConfig} from '@gorhom/animated-tabbar';
import {
	AntDesign
} from "@expo/vector-icons";

const tabs: TabsConfig<BubbleTabBarItemConfig> = {
  Home: {
    labelStyle: {
      color: '#5B37B7',
    },
    icon: {
      component: ({color}) => <AntDesign name="home" color={color}/>,
      activeColor: 'rgba(91,55,183,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: 'rgba(223,215,243,1)',
      inactiveColor: 'rgba(223,215,243,0)',
    },
  },
  Profile: {
    labelStyle: {
      color: '#1194AA',
    },
    icon: {
      component: ({color}) => <AntDesign name="home" color={color}/>,
      activeColor: 'rgba(17,148,170,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: 'rgba(207,235,239,1)',
      inactiveColor: 'rgba(207,235,239,0)',
    },
  },
};

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBar={props => (
          <AnimatedTabBar tabs={tabs} {...props} />
        )}
      >
        <Tab.Screen
          name="Home"
          component={HomeScreen}
        />
        <Tab.Screen
          name="Profile"
          component={ProfileScreen}
        />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

[chishing96]

Almost similar to this but in 2.1.2 version of @gorhom/animated-tabbar

Error says:

Warning: interpolate() was renamed to interpolateNode() in Reanimated 2.

and

TypeError: attempted to assign to readonly property

Environment Info:

@gorhom/animated-tabbar	2.1.2
react-native	expo 41.0.1
react-native-reanimated	2.1.0
react-native-gesture-handler	1.10.2
react-native-svg	12.1.0

My Code:

const tabs = {
  Home: { // < Screen name
    labelStyle: {
      color: '#5B37B7',
    },
    icon: {
      component: HomeIcon,
      activeColor: 'rgba(91,55,183,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: 'rgba(223,215,243,1)',
      inactiveColor: 'rgba(223,215,243,0)',
    },
  },
  Download: { // < Screen name
    labelStyle: {
      color: '#1194AA',
    },
    icon: {
      component: DownloadIcon,
      activeColor: 'rgba(17,148,170,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: 'rgba(207,235,239,1)',
      inactiveColor: 'rgba(207,235,239,0)',
    },
  },
  Progress: { // < Screen name
    labelStyle: {
      color: '#1194AA',
    },
    icon: {
      component: ProgressIcon,
      activeColor: 'rgba(17,148,170,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: 'rgba(207,235,239,1)',
      inactiveColor: 'rgba(207,235,239,0)',
    },
  },
};

const Tab = createBottomTabNavigator()

const Tabs = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBar={props => (
          <AnimatedTabBar tabs={tabs} {...props} />
        )}
      >
        <Tab.Screen
          name="Home"
          component={HomeStack}
        />
        <Tab.Screen
          name="Download"
          component={DownloadStack}
        />
        <Tab.Screen
          name="Progress"
          component={SettingsStack}
        />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

export default Tabs

App.js

<Tabs />

Expected Result:

Animated Tab Bar with Home. Download, Progress bars should work on Expo project

[DaxiALex]

Any updates? I have the same issue.

[nikitonskii]

Any updates? I have the same issue.

updating @react-navigation/bottom-tabs to version 2.1.2 helped me but I`m stuck with an issue description which you can find here https://github.com/gorhom/react-native-animated-tabbar/issues/133 react-native CLI version 0.66

[martinivanalfonso]

Updating react-native-redash to the latest version (^16.2.3) fixed the issue for me