Expects @react-navigation/native to be installed even when using standalone component

[BenJeau]

Bug

Library expects @react-navigation/native to be installed even when using standalone component

Environment info

Library	Version
@gorhom/animated-tabbar	2.1.1
react-native	0.64.0
react-native-reanimated	2.1.0
react-native-gesture-handler	1.10.3
react-native-svg	12.1.1

Steps To Reproduce

1. Create a new React Native project (with this library, react-native-reanimated, react-native-gesture-handler and react-native-svg)
2. Use the code below
3. See a 500 on the device and something like the following in the terminal

error: Error: Unable to resolve module @react-navigation/native from /home/ben/code/AwesomeTSProject/node_modules/@gorhom/animated-tabbar/src/AnimatedTabBar.tsx: @react-navigation/native could not be found within the project or in these directories:
  node_modules/@gorhom/animated-tabbar/node_modules
  node_modules

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
  47 |       const {
  48 |         CommonActions: _CommonActions,
> 49 |       } = require('@react-navigation/native');
     |                    ^
  50 |       return _CommonActions;
  51 |     } else {
  52 |       return undefined;
    at ModuleResolver.resolveDependency (/home/ben/code/AwesomeTSProject/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:234:15)
    at DependencyGraph.resolveDependency (/home/ben/code/AwesomeTSProject/node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
    at Object.resolve (/home/ben/code/AwesomeTSProject/node_modules/metro/src/lib/transformHelpers.js:317:42)
    at resolve (/home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:629:33)
    at /home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:645:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (/home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:644:33)
    at /home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:329:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:137:24)

Describe what you expected to happen:

1. Be able to use this package without react-navigation and not show an error

Reproducible sample code

• Using the a modified version of example code from the README

import React, {useState} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {
  AnimatedTabBarView,
  TabsConfig,
  BubbleTabBarItemConfig,
} from '@gorhom/animated-tabbar';

const tabs: TabsConfig<BubbleTabBarItemConfig> = {
  Home: {
    labelStyle: {
      color: '#5B37B7',
    },
    icon: {
      component: <Text>A</Text>,
      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: <Text>B</Text>,
      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 styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#999',
  },
  tabBarContainer: {
    borderRadius: 25,
  },
});

export default function App() {
  const [index, setIndex] = useState(0);
  return (
    <View style={styles.container}>
      <Text>{index}</Text>
      <AnimatedTabBarView
        tabs={tabs}
        itemOuterSpace={{
          horizontal: 6,
          vertical: 12,
        }}
        itemInnerSpace={12}
        iconSize={20}
        style={styles.tabBarContainer}
        index={index}
        onIndexChange={setIndex}
      />
    </View>
  );
}

[BenJeau]

After adding @react-navigation/native and @react-native-community/masked-view as dependencies, the following error shows - related to react-native-redash

error: Error: Unable to resolve module react-native-reanimated/src/derived/interpolate from /home/ben/code/AwesomeTSProject/node_modules/@gorhom/animated-tabbar/node_modules/react-native-redash/lib/module/v1/Colors.js: react-native-reanimated/src/derived/interpolate could not be found within the project or in these directories:
  node_modules/@gorhom/animated-tabbar/node_modules/react-native-redash/node_modules
  node_modules/@gorhom/animated-tabbar/node_modules
  node_modules

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
> 1 | import Animated from"react-native-reanimated";import{processColor}from"react-native";import interpolateNode,{Extrapolate}from"react-native-reanimated/src/derived/interpolate";import{mix}from"./Animations";import{clamp,fract}from"./Math";var add=Animated.add,multiply=Animated.multiply,abs=Animated.abs,round=Animated.round,sub=Animated.sub,proc=Animated.proc,color=Animated.color,greaterThan=Animated.greaterThan,cond=Animated.cond;export var opacity=function opacity(c){return(c>>24&255)/255;};export var red=function red(c){return c>>16&255;};export var green=function green(c){return c>>8&255;};export var blue=function blue(c){return c&255;};export var hsv2rgb=function hsv2rgb(h,s,v){var K={x:1,y:2/3,z:1/3,w:3};var p={x:abs(sub(multiply(fract(add(h,K.x)),6),K.w)),y:abs(sub(multiply(fract(add(h,K.y)),6),K.w)),z:abs(sub(multiply(fract(add(h,K.z)),6),K.w))};var rgb={x:multiply(v,mix(s,K.x,clamp(sub(p.x,K.x),0,1))),y:multiply(v,mix(s,K.x,clamp(sub(p.y,K.x),0,1))),z:multiply(v,mix(s,K.x,clamp(sub(p.z,K.x),0,1)))};return{r:round(multiply(rgb.x,255)),g:round(multiply(rgb.y,255)),b:round(multiply(rgb.z,255))};};export var hsv2color=proc(function(h,s,v){var _hsv2rgb=hsv2rgb(h,s,v),r=_hsv2rgb.r,g=_hsv2rgb.g,b=_hsv2rgb.b;return color(r,g,b);});export var colorForBackground=proc(function(r,g,b){var L=add(multiply(0.299,r),multiply(0.587,g),multiply(0.114,b));return cond(greaterThan(L,186),color(0,0,0),color(255,255,255));});var rgbToHsv=function rgbToHsv(c){var r=red(c)/255;var g=green(c)/255;var b=blue(c)/255;var ma=Math.max(r,g,b);var mi=Math.min(r,g,b);var h=0;var v=ma;var d=ma-mi;var s=ma===0?0:d/ma;if(ma===mi){h=0;}else{switch(ma){case r:h=(g-b)/d+(g<b?6:0);break;case g:h=(b-r)/d+2;break;case b:h=(r-g)/d+4;break;default:}h/=6;}return{h:h,s:s,v:v};};var interpolateColorsHSV=function interpolateColorsHSV(animationValue,inputRange,colors){var colorsAsHSV=colors.map(function(c){return rgbToHsv(c);});var h=interpolateNode(animationValue,{inputRange:inputRange,outputRange:colorsAsHSV.map(function(c){return c.h;}),extrapolate:Extrapolate.CLAMP});var s=interpolateNode(animationValue,{inputRange:inputRange,outputRange:colorsAsHSV.map(function(c){return c.s;}),extrapolate:Extrapolate.CLAMP});var v=interpolateNode(animationValue,{inputRange:inputRange,outputRange:colorsAsHSV.map(function(c){return c.v;}),extrapolate:Extrapolate.CLAMP});return hsv2color(h,s,v);};var interpolateColorsRGB=function interpolateColorsRGB(animationValue,inputRange,colors){var r=round(interpolateNode(animationValue,{inputRange:inputRange,outputRange:colors.map(function(c){return red(c);}),extrapolate:Extrapolate.CLAMP}));var g=round(interpolateNode(animationValue,{inputRange:inputRange,outputRange:colors.map(function(c){return green(c);}),extrapolate:Extrapolate.CLAMP}));var b=round(interpolateNode(animationValue,{inputRange:inputRange,outputRange:colors.map(function(c){return blue(c);}),extrapolate:Extrapolate.CLAMP}));var a=interpolateNode(animationValue,{inputRange:inputRange,outputRange:colors.map(function(c){return opacity(c);}),extrapolate:Extrapolate.CLAMP});return color(r,g,b,a);};export var interpolateColor=function interpolateColor(value,config){var colorSpace=arguments.length>2&&arguments[2]!==undefined?arguments[2]:"rgb";var inputRange=config.inputRange;var outputRange=config.outputRange.map(function(c){return typeof c==="number"?c:processColor(c);});if(colorSpace==="hsv"){return interpolateColorsHSV(value,inputRange,outputRange);}return interpolateColorsRGB(value,inputRange,outputRange);};export var mixColor=function mixColor(value,color1,color2){var colorSpace=arguments.length>3&&arguments[3]!==undefined?arguments[3]:"rgb";return interpolateColor(value,{inputRange:[0,1],outputRange:[color1,color2]},colorSpace);};
    |                                                                                                                               ^
  2 | //# sourceMappingURL=Colors.js.map
    at ModuleResolver.resolveDependency (/home/ben/code/AwesomeTSProject/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:234:15)
    at DependencyGraph.resolveDependency (/home/ben/code/AwesomeTSProject/node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
    at Object.resolve (/home/ben/code/AwesomeTSProject/node_modules/metro/src/lib/transformHelpers.js:317:42)
    at resolve (/home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:629:33)
    at /home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:645:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (/home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:644:33)
    at /home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:329:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:137:24)

[mhammerc]

After adding @react-navigation/native and @react-native-community/masked-view as dependencies, the following error shows - related to react-native-redash

error: Error: Unable to resolve module react-native-reanimated/src/derived/interpolate from /home/ben/code/AwesomeTSProject/node_modules/@gorhom/animated-tabbar/node_modules/react-native-redash/lib/module/v1/Colors.js: react-native-reanimated/src/derived/interpolate could not be found within the project or in these directories:
  node_modules/@gorhom/animated-tabbar/node_modules/react-native-redash/node_modules
  node_modules/@gorhom/animated-tabbar/node_modules
  node_modules

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
> 1 | import Animated from"react-native-reanimated";import{processColor}from"react-native";import interpolateNode,{Extrapolate}from"react-native-reanimated/src/derived/interpolate";import{mix}from"./Animations";import{clamp,fract}from"./Math";var add=Animated.add,multiply=Animated.multiply,abs=Animated.abs,round=Animated.round,sub=Animated.sub,proc=Animated.proc,color=Animated.color,greaterThan=Animated.greaterThan,cond=Animated.cond;export var opacity=function opacity(c){return(c>>24&255)/255;};export var red=function red(c){return c>>16&255;};export var green=function green(c){return c>>8&255;};export var blue=function blue(c){return c&255;};export var hsv2rgb=function hsv2rgb(h,s,v){var K={x:1,y:2/3,z:1/3,w:3};var p={x:abs(sub(multiply(fract(add(h,K.x)),6),K.w)),y:abs(sub(multiply(fract(add(h,K.y)),6),K.w)),z:abs(sub(multiply(fract(add(h,K.z)),6),K.w))};var rgb={x:multiply(v,mix(s,K.x,clamp(sub(p.x,K.x),0,1))),y:multiply(v,mix(s,K.x,clamp(sub(p.y,K.x),0,1))),z:multiply(v,mix(s,K.x,clamp(sub(p.z,K.x),0,1)))};return{r:round(multiply(rgb.x,255)),g:round(multiply(rgb.y,255)),b:round(multiply(rgb.z,255))};};export var hsv2color=proc(function(h,s,v){var _hsv2rgb=hsv2rgb(h,s,v),r=_hsv2rgb.r,g=_hsv2rgb.g,b=_hsv2rgb.b;return color(r,g,b);});export var colorForBackground=proc(function(r,g,b){var L=add(multiply(0.299,r),multiply(0.587,g),multiply(0.114,b));return cond(greaterThan(L,186),color(0,0,0),color(255,255,255));});var rgbToHsv=function rgbToHsv(c){var r=red(c)/255;var g=green(c)/255;var b=blue(c)/255;var ma=Math.max(r,g,b);var mi=Math.min(r,g,b);var h=0;var v=ma;var d=ma-mi;var s=ma===0?0:d/ma;if(ma===mi){h=0;}else{switch(ma){case r:h=(g-b)/d+(g<b?6:0);break;case g:h=(b-r)/d+2;break;case b:h=(r-g)/d+4;break;default:}h/=6;}return{h:h,s:s,v:v};};var interpolateColorsHSV=function interpolateColorsHSV(animationValue,inputRange,colors){var colorsAsHSV=colors.map(function(c){return rgbToHsv(c);});var h=interpolateNode(animationValue,{inputRange:inputRange,outputRange:colorsAsHSV.map(function(c){return c.h;}),extrapolate:Extrapolate.CLAMP});var s=interpolateNode(animationValue,{inputRange:inputRange,outputRange:colorsAsHSV.map(function(c){return c.s;}),extrapolate:Extrapolate.CLAMP});var v=interpolateNode(animationValue,{inputRange:inputRange,outputRange:colorsAsHSV.map(function(c){return c.v;}),extrapolate:Extrapolate.CLAMP});return hsv2color(h,s,v);};var interpolateColorsRGB=function interpolateColorsRGB(animationValue,inputRange,colors){var r=round(interpolateNode(animationValue,{inputRange:inputRange,outputRange:colors.map(function(c){return red(c);}),extrapolate:Extrapolate.CLAMP}));var g=round(interpolateNode(animationValue,{inputRange:inputRange,outputRange:colors.map(function(c){return green(c);}),extrapolate:Extrapolate.CLAMP}));var b=round(interpolateNode(animationValue,{inputRange:inputRange,outputRange:colors.map(function(c){return blue(c);}),extrapolate:Extrapolate.CLAMP}));var a=interpolateNode(animationValue,{inputRange:inputRange,outputRange:colors.map(function(c){return opacity(c);}),extrapolate:Extrapolate.CLAMP});return color(r,g,b,a);};export var interpolateColor=function interpolateColor(value,config){var colorSpace=arguments.length>2&&arguments[2]!==undefined?arguments[2]:"rgb";var inputRange=config.inputRange;var outputRange=config.outputRange.map(function(c){return typeof c==="number"?c:processColor(c);});if(colorSpace==="hsv"){return interpolateColorsHSV(value,inputRange,outputRange);}return interpolateColorsRGB(value,inputRange,outputRange);};export var mixColor=function mixColor(value,color1,color2){var colorSpace=arguments.length>3&&arguments[3]!==undefined?arguments[3]:"rgb";return interpolateColor(value,{inputRange:[0,1],outputRange:[color1,color2]},colorSpace);};
    |                                                                                                                               ^
  2 | //# sourceMappingURL=Colors.js.map
    at ModuleResolver.resolveDependency (/home/ben/code/AwesomeTSProject/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:234:15)
    at DependencyGraph.resolveDependency (/home/ben/code/AwesomeTSProject/node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
    at Object.resolve (/home/ben/code/AwesomeTSProject/node_modules/metro/src/lib/transformHelpers.js:317:42)
    at resolve (/home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:629:33)
    at /home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:645:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (/home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:644:33)
    at /home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:329:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/ben/code/AwesomeTSProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:137:24)

Same here!

Looks like react-native-reanimated needs an updated version of react-native-redash.

More specifically, this release: https://github.com/wcandillon/react-native-redash/releases/tag/v16.0.9

(react-native-animated-tabbar still use react-native-redash 15.x.x).

To force an updated resolution, I added the following in my package.json, using Yarn (does not work with NPM):

"resolutions": {
  "react-native-redash": "=16.0.11"
}

It forces the versions of recursive dependencies.

You can run yarn list --pattern react-native-redash to check it worked and there is not multiple different versions of the package living in your project:

[mhammerc]

I am now stuck on the following error:

 ERROR  TypeError: cannot add a new property

This error is located at:
    in AnimatedComponent(View) (at createAnimatedComponent.js:455)
    in AnimatedComponentWrapper (at AnimatedTabBar.tsx:246)
    in AnimatedTabBar (at navigation.tsx:223)
    in SafeAreaProviderCompat (at BottomTabView.tsx:145)
    in BottomTabView (at createBottomTabNavigator.tsx:45)
    in BottomTabNavigator (at navigation.tsx:227)
    in HomeNavigation (at SceneView.tsx:122)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:153)
    in RCTView (at View.js:34)
    in View (at NativeStackView.tsx:40)
    in DebugContainer (at NativeStackView.tsx:134)
    in RNSScreen (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at src/index.native.tsx:120)
    in Screen (at NativeStackView.tsx:82)

I guess it is a compatibility problem with the latest react-native-reanimated ?

EDIT: Got it working by reverting back to react-native-reanimated 2.0.0 instead of 2.1.0.

[alexghi]

any updates on this? is this working only with specific versions of the dependencies?