TypeError: (0, _reactNativeReanimated.useSharedValue) is not a function.

[JaiminVaghasiya]

Device info:-
System:
OS: macOS 13.2.1
CPU: (8) arm64 Apple M1
Memory: 101.66 MB / 8.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.13.1 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.3.0 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
Android SDK:
API Levels: 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 33
Build Tools: 27.0.3, 28.0.3, 29.0.2, 29.0.3, 30.0.0, 30.0.1, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 33.0.0, 33.0.0, 33.0.1
System Images: android-30 | Google APIs ARM 64 v8a, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9514443
Xcode: 14.1/14B47b - /usr/bin/xcodebuild
Languages:
Java: 11.0.16.1 - /usr/bin/javac
Python: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.5 => 0.63.5
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

I am getting this error while trying to implement

code :- <Carousel
width={windowWidth}
data={[{ color: "red" }, { color: "purple" }, { color: "yellow" }]}
renderItem={({ color }) => {
return <View style={{ backgroundColor: color, flex: 1 }} />;
}}
/>

Error:- [Tue Mar 21 2023 11:49:35.210] ERROR TypeError: (0, _reactNativeReanimated.useSharedValue) is not a function. (In '(0, _reactNativeReanimated.useSharedValue)(defaultHandlerOffsetValue)', '(0, _reactNativeReanimated.useSharedValue)' is undefined)

This error is located at:
in ForwardRef (at Home/index.js:811)
in RCTView (at View.js:34)
in View (at Home/index.js:508)
in HomeComponent (at Home/index.js:1051)
in Home (at SceneView.tsx:126)
in StaticContainer
in StaticContainer (at SceneView.tsx:119)
in EnsureSingleNavigator (at SceneView.tsx:118)
in SceneView (at useDescriptors.tsx:210)
in RCTView (at View.js:34)
in View (at Screen.tsx:63)
in RCTView (at View.js:34)
in View (at Background.tsx:13)
in Background (at Screen.tsx:58)
in Screen (at BottomTabView.tsx:135)
in RNSScreen (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:120)
in Screen (at ScreenFallback.tsx:39)
in MaybeScreen (at BottomTabView.tsx:127)
in RNSScreenContainer (at src/index.native.tsx:145)
in ScreenContainer (at ScreenFallback.tsx:30)
in MaybeScreenContainer (at BottomTabView.tsx:93)
in RCTView (at View.js:34)
in View (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at BottomTabView.tsx:92)
in BottomTabView (at createBottomTabNavigator.tsx:118)
in Unknown (at createBottomTabNavigator.tsx:117)
in BottomTabNavigator (at router/index.js:64)
in MyTabs (at SceneView.tsx:126)
in StaticContainer
in StaticContainer (at SceneView.tsx:119)
in EnsureSingleNavigator (at SceneView.tsx:118)
in SceneView (at useDescriptors.tsx:210)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:245)
in RCTView (at View.js:34)
in View (at CardContainer.tsx:244)
in RCTView (at View.js:34)
in View (at CardSheet.tsx:33)
in ForwardRef(CardSheet) (at Card.tsx:573)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:555)
in PanGestureHandler (at GestureHandlerNative.tsx:13)
in PanGestureHandler (at Card.tsx:549)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544)
in RCTView (at View.js:34)
in View (at Card.tsx:538)
in Card (at CardContainer.tsx:206)
in CardContainer (at CardStack.tsx:623)
in RNSScreen (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:120)
in Screen (at Screens.tsx:74)
in MaybeScreen (at CardStack.tsx:616)
in RNSScreenContainer (at src/index.native.tsx:145)
in ScreenContainer (at Screens.tsx:50)
in MaybeScreenContainer (at CardStack.tsx:498)
in CardStack (at StackView.tsx:462)
in KeyboardManager (at StackView.tsx:458)
in SafeAreaProviderCompat (at StackView.tsx:455)
in RCTView (at View.js:34)
in View (at GestureHandlerRootView.android.tsx:21)
in GestureHandlerRootView (at StackView.tsx:454)
in StackView (at createStackNavigator.tsx:87)
in StackNavigator (at router/index.js:139)
in index (at Layout/index.js:21)
in RCTView (at View.js:34)
in View (at SafeAreaView.js:41)
in ForwardRef(SafeAreaView) (at Layout/index.js:13)
in index (at SceneView.tsx:126)
in StaticContainer
in StaticContainer (at SceneView.tsx:119)
in EnsureSingleNavigator (at SceneView.tsx:118)
in SceneView (at useDescriptors.tsx:210)
in RCTView (at View.js:34)
in View (at Screen.tsx:63)
in RCTView (at View.js:34)
in View (at Background.tsx:13)
in Background (at Screen.tsx:58)
in Screen (at DrawerView.tsx:232)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:135)
in Screen (at ScreenFallback.tsx:37)
in MaybeScreen (at DrawerView.tsx:226)
in RCTView (at View.js:34)
in View (at src/index.native.tsx:148)
in ScreenContainer (at ScreenFallback.tsx:28)
in MaybeScreenContainer (at DrawerView.tsx:192)
in RCTView (at View.js:34)
in View (at Drawer.tsx:563)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:240)
in AnimatedComponent(View) (at Drawer.tsx:557)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:240)
in AnimatedComponent(View) (at Drawer.tsx:545)
in PanGestureHandler (at GestureHandlerNative.tsx:14)
in PanGestureHandler (at Drawer.tsx:536)
in DrawerView (at DrawerView.tsx:258)
in DrawerViewBase (at DrawerView.tsx:302)
in GestureHandlerRootView (at GestureHandlerRootView.android.tsx:26)
in GestureHandlerRootView (at DrawerView.tsx:301)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
in SafeAreaProviderCompat (at DrawerView.tsx:300)
in DrawerView (at createDrawerNavigator.tsx:119)
in Unknown (at createDrawerNavigator.tsx:118)
in DrawerNavigator (at App.js:289)
in RCTView (at View.js:34)
in View (at App.js:288)
in Provider (at App.js:287)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:132)
in ThemeProvider (at NavigationContainer.tsx:131)
in ForwardRef(NavigationContainerInner) (at App.js:256)
in RCTView (at View.js:34)
in View (at InternetConnectionAlert.tsx:92)
in InternetConnectionAlert (at App.js:255)
in App (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)

Describe the bug
A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

• react: v0.0.0
• react-native: v0.0.0
• react-native-reanimated: v0.0.0
• react-native-reanimated-carousel: v0.0.0
• react-native-gesture-handler: v0.0.0

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[arlovip]

@JaiminVaghasiya Are you sure that you install react-native-reanimated and execute the corresponding steps? For example:

  module.exports = {
    presets: [
      ...
    ],
    plugins: [
        ...
        [
            'react-native-reanimated/plugin', {
                relativeSourceLocation: true,
            },
        ]
    ],
};

and you have to execute npm start -- --reset-cache or yarn start --reset-cache after npm install. See the official link for more details: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/.