Animated.Value does not exist in react-native-reanimated
After updating expo SDK version, which forced me to update another packages accordingly. I started facing the following issue with Animated.Value, VSCode says that, property Value does not exist on type Animated.
importing as:
import Animated from 'react-native-reanimated';
react-native-reanimated version is 3.6.2.
But, when I run the app and go to the screen, it throws the following error:
ERROR TypeError: Cannot read property 'prototype' of undefined
This error is located at:
in StocksScreen (at SceneView.tsx:132)
in StaticContainer
in EnsureSingleNavigator (at SceneView.tsx:124)
in SceneView (at useDescriptors.tsx:218)
in RCTView (at View.js:116)
in View (at Screen.tsx:63)
in RCTView (at View.js:116)
in View (at Background.tsx:13)
in Background (at Screen.tsx:58)
in Screen (at BottomTabView.tsx:135)
in RNSScreen (at createAnimatedComponent.js:54)
in Unknown (at src/index.native.tsx:314)
in Suspender (at src/index.tsx:40)
in Suspense (at src/index.tsx:39)
in Freeze (at src/index.native.tsx:206)
in DelayedFreeze (at src/index.native.tsx:313)
in InnerScreen (at src/index.native.tsx:566)
in Screen (at ScreenFallback.tsx:39)
in MaybeScreen (at BottomTabView.tsx:127)
in RNSScreenNavigationContainer (at src/index.native.tsx:398)
in ScreenContainer (at ScreenFallback.tsx:30)
in MaybeScreenContainer (at BottomTabView.tsx:93)
in RCTView (at View.js:116)
in View (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at BottomTabView.tsx:92)
in BottomTabView (at createBottomTabNavigator.tsx:118)
in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
in NavigationContent (at useComponent.tsx:35)
in Unknown (at createBottomTabNavigator.tsx:117)
in BottomTabNavigator (at BottomTabNavigator.tsx:32)
in Suspense (at BottomTabNavigator.tsx:25)
in BottomTabNavigator (at SceneView.tsx:132)
in StaticContainer
in EnsureSingleNavigator (at SceneView.tsx:124)
in SceneView (at useDescriptors.tsx:218)
in RCTView (at View.js:116)
in View (at DebugContainer.native.tsx:34)
in DebugContainer (at NativeStackView.native.tsx:82)
in MaybeNestedStack (at NativeStackView.native.tsx:325)
in RCTView (at View.js:116)
in View (at NativeStackView.native.tsx:318)
in RNSScreen (at createAnimatedComponent.js:54)
in Unknown (at src/index.native.tsx:314)
in Suspender (at src/index.tsx:40)
in Suspense (at src/index.tsx:39)
in Freeze (at src/index.native.tsx:206)
in DelayedFreeze (at src/index.native.tsx:313)
in InnerScreen (at src/index.native.tsx:566)
in Screen (at NativeStackView.native.tsx:253)
in SceneView (at NativeStackView.native.tsx:413)
in Suspender (at src/index.tsx:40)
in Suspense (at src/index.tsx:39)
in Freeze (at src/index.native.tsx:206)
in DelayedFreeze (at src/index.native.tsx:220)
in RNSScreenStack (at src/index.native.tsx:227)
in ScreenStack (at NativeStackView.native.tsx:401)
in NativeStackViewInner (at NativeStackView.native.tsx:474)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:92)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
in SafeAreaProviderCompat (at NativeStackView.native.tsx:473)
in NativeStackView (at createNativeStackNavigator.tsx:72)
in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
in NavigationContent (at useComponent.tsx:35)
in Unknown (at createNativeStackNavigator.tsx:71)
in NativeStackNavigator (at StackNavigator.tsx:16)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
in BaseNavigationContainer (at NavigationContainer.tsx:132)
in ThemeProvider (at NavigationContainer.tsx:131)
in NavigationContainerInner (at StackNavigator.tsx:15)
in StackNavigator (at App.tsx:15)
in CurrencyContextProvider (at App.tsx:14)
in NewsContextProvider (at App.tsx:13)
in CategoryContextProvider (at App.tsx:12)
in App (at withDevTools.ios.js:25)
in withDevTools(App) (at renderApplication.js:57)
in RCTView (at View.js:116)
in View (at AppContainer.js:127)
in RCTView (at View.js:116)
in View (at AppContainer.js:155)
in AppContainer (at renderApplication.js:50)
in main(RootComponent) (at renderApplication.js:67), js engine: hermes
ERROR TypeError: Cannot read property 'prototype' of undefined
This error is located at:
in StocksScreen (at SceneView.tsx:132)
in StaticContainer
in EnsureSingleNavigator (at SceneView.tsx:124)
in SceneView (at useDescriptors.tsx:218)
in RCTView (at View.js:116)
in View (at Screen.tsx:63)
in RCTView (at View.js:116)
in View (at Background.tsx:13)
in Background (at Screen.tsx:58)
in Screen (at BottomTabView.tsx:135)
in RNSScreen (at createAnimatedComponent.js:54)
in Unknown (at src/index.native.tsx:314)
in Suspender (at src/index.tsx:40)
in Suspense (at src/index.tsx:39)
in Freeze (at src/index.native.tsx:206)
in DelayedFreeze (at src/index.native.tsx:313)
in InnerScreen (at src/index.native.tsx:566)
in Screen (at ScreenFallback.tsx:39)
in MaybeScreen (at BottomTabView.tsx:127)
in RNSScreenNavigationContainer (at src/index.native.tsx:398)
in ScreenContainer (at ScreenFallback.tsx:30)
in MaybeScreenContainer (at BottomTabView.tsx:93)
in RCTView (at View.js:116)
in View (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at BottomTabView.tsx:92)
in BottomTabView (at createBottomTabNavigator.tsx:118)
in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
in NavigationContent (at useComponent.tsx:35)
in Unknown (at createBottomTabNavigator.tsx:117)
in BottomTabNavigator (at BottomTabNavigator.tsx:32)
in Suspense (at BottomTabNavigator.tsx:25)
in BottomTabNavigator (at SceneView.tsx:132)
in StaticContainer
in EnsureSingleNavigator (at SceneView.tsx:124)
in SceneView (at useDescriptors.tsx:218)
in RCTView (at View.js:116)
in View (at DebugContainer.native.tsx:34)
in DebugContainer (at NativeStackView.native.tsx:82)
in MaybeNestedStack (at NativeStackView.native.tsx:325)
in RCTView (at View.js:116)
in View (at NativeStackView.native.tsx:318)
in RNSScreen (at createAnimatedComponent.js:54)
in Unknown (at src/index.native.tsx:314)
in Suspender (at src/index.tsx:40)
in Suspense (at src/index.tsx:39)
in Freeze (at src/index.native.tsx:206)
in DelayedFreeze (at src/index.native.tsx:313)
in InnerScreen (at src/index.native.tsx:566)
in Screen (at NativeStackView.native.tsx:253)
in SceneView (at NativeStackView.native.tsx:413)
in Suspender (at src/index.tsx:40)
in Suspense (at src/index.tsx:39)
in Freeze (at src/index.native.tsx:206)
in DelayedFreeze (at src/index.native.tsx:220)
in RNSScreenStack (at src/index.native.tsx:227)
in ScreenStack (at NativeStackView.native.tsx:401)
in NativeStackViewInner (at NativeStackView.native.tsx:474)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:92)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
in SafeAreaProviderCompat (at NativeStackView.native.tsx:473)
in NativeStackView (at createNativeStackNavigator.tsx:72)
in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
in NavigationContent (at useComponent.tsx:35)
in Unknown (at createNativeStackNavigator.tsx:71)
in NativeStackNavigator (at StackNavigator.tsx:16)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
in BaseNavigationContainer (at NavigationContainer.tsx:132)
in ThemeProvider (at NavigationContainer.tsx:131)
in NavigationContainerInner (at StackNavigator.tsx:15)
in StackNavigator (at App.tsx:15)
in CurrencyContextProvider (at App.tsx:14)
in NewsContextProvider (at App.tsx:13)
in CategoryContextProvider (at App.tsx:12)
in App (at withDevTools.ios.js:25)
in withDevTools(App) (at renderApplication.js:57)
in RCTView (at View.js:116)
in View (at AppContainer.js:127)
in RCTView (at View.js:116)
in View (at AppContainer.js:155)
in AppContainer (at renderApplication.js:50)
in main(RootComponent) (at renderApplication.js:67), js engine: hermes
Any ideas?
Solution
You are not using the right syntax, Animated module from 'react-native-reanimated' differs from the one in 'react-native'.
Using a shared value
import { Button, View } from 'react-native';
import Animated, { useSharedValue } from 'react-native-reanimated';
export default function App() {
const width = useSharedValue(100);
const handlePress = () => {
width.value = width.value + 50;
};
return (
<View style={{ flex: 1, alignItems: 'center' }}>
<Animated.View
style={{
width,
height: 100,
backgroundColor: 'violet',
}}
/>
<Button onPress={handlePress} title="Click me" />
</View>
);
}
Using an animation function:
import { Button, View } from 'react-native';
import Animated, { useSharedValue, withSpring } from 'react-native-reanimated';
export default function App() {
const width = useSharedValue(100);
const handlePress = () => {
width.value = withSpring(width.value + 50);
};
return (
<View style={{ flex: 1, alignItems: 'center' }}>
<Animated.View
style={{
width,
height: 100,
backgroundColor: 'violet',
}}
/>
<Button onPress={handlePress} title="Click me" />
</View>
);
}
- Differences between { [P in keyof any]: number } and { [P in string | number | symbol]: number }
- typescript error - cannot find name 'process'
- Typescript Promise file upload
- Why does () => void return something?
- how to pass data from angular material dialog to parent component?
- Does zod have something equivalent to yup's oneOf()
- How to write a getFileExists function that starts at the source directory or project root in nodejs
- [NestJs]: JwtModule.register() not working
- Cloning an array in Javascript/Typescript
- Test coverage: import statements not covered
- How do I configure ESLint flat config with TypeScript in VS Code (without FlatCompat)?
- Interface treated differently than equivalent object
- TypeScript doesn't assign with interface while assign with object literal
- Setting up tsconfig with spec/test folder
- Svelte components with generics
- Best way to share typescript definitions in a npm workspace
- How can I create a subrouter with React Router v6?
- Typescript generated JavaScript has a function that is not a function
- Strange typescript error:" the name g does not exist in the current scope"
- Compiling multiple Typescript files
- NPM Workspace monorepo: TSC fails with module not found for imports in library
- SvelteKit not recognizing Typescript syntax
- How to use index in @for in html angular 17
- Vite + Typescript can't call onClick function, not defined
- Making typescript recognize index for subsequent parameter
- Puppeteer - waitForResponse() timeout, but page.on('response') finds response
- What is TypeScript and why should I use it instead of JavaScript?
- Passing Generics to function component React Typescript
- How do I make HTML code using typescript?
- TypeScript does not infer type parameter correctly