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>
);
}
- AWS-Cognito: Is it possible to edit the User Pool name after creating the User Pool?
- Prevent filtered list rerender when source array is modified
- How to Automate Argument Types in a Handler Based on a Dynamic Event Registry in TypeScript?
- Avoid referencing unbound methods which may cause unintentional scoping of `this` error when calling static methods
- Displaying an option's Name rather than ID in a MUI multi-select dropdown's renderValue
- Run autofix to sort these imports! on eslint simple-import-sort/imports plugin in TypeScript
- Resend email doesn't work in production environement with next js, but works in development
- How to create a type definition for an array of objects without using any[]?
- How to run a JavaScript function with playwright inside an iframe?
- I get "Http failure response for (unknown url): 0 Unknown Error" instead of actual error message in Angular
- Angular 17 does not post and i get an TypeError in dev console
- Unable to debug "Cannot use import outside a module" in azure web app (node:process)
- Vitest defineConfig, 'test' does not exist in type 'UserConfigExport'
- using process.env in TypeScript
- Typescript paths not resolving when running jest?
- Cannot find name 'describe'. Do you need to install type definitions for a test runner?
- How to write the response from nestjs exception filters using nestfastify
- How to observe touched event on Angular 2 NgForm?
- How to create a generic React component with a typed context provider?
- How to accept only predefined values in an Angular @Input
- Extending a TypeScript type by adding new element in the array of a field
- Constrained callback arguments
- Update object data-members in React state doesn't trigger re-rendering
- Getting the enum key with the value string (reverse mapping) in TypeScript
- What return type should be used for setTimeout in TypeScript?
- How I "Run" a TypeScript file in WebStorm?
- Set types on useState React Hook with TypeScript
- How can I limit a slash command to only one, specific user?
- Viewing typescript .ts files in Midnight Commander
- How to add custom message on Zod tuple?