So as preface I am learning react-native and I am developing an app which connects to an backend api using redux.
I am getting the following error when I try to run the app.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
This error is located at:
in ComplaintsMenu (created by HomePage)
in RCTView (created by View)
in View (created by HomePage)
in RCTView (created by View)
in View (created by HomePage)
in HomePage (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View
in CardSheet (created by Card)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by PanGestureHandler)
in PanGestureHandler (created by PanGestureHandler)
in PanGestureHandler (created by Card)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Card)
in RCTView (created by View)
in View (created by Card)
in Card (created by CardContainer)
in CardContainer (created by CardStack)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by CardStack)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by CardStack)
in RCTView (created by View)
in View (created by Background)
in Background (created by CardStack)
in CardStack (created by HeaderShownContext)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by StackView)
in RNGestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by StackView)
in StackView (created by StackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by StackNavigator)
in StackNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in RCTView (created by View)
in View (created by SafeAreaWrap)
in SafeAreaWrap (created by App)
in Provider (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
my reducer is-
export function complaintReducer(state = initalComplaintsFormState, action) {
switch (action.type) {
//...other cases
case GET_COMPLAINT_LIST:
return { ...state, complaintList: action.payload };
default:
return state;
}
}
and my ComplaintsMenu component has the following code-
//...other imports
import { useSelector, useDispatch } from "react-redux";
import { getComplaintList } from "../Redux/Actions";
export default function ComplaintsMenu() {
const { ComplaintList } = useSelector((state) => state.complaintReducer);
const dispatch = useDispatch;
----------
// From my understanding this is where the issue is, since the dispatch function (hook?) is being called conditionally under the useEffect hook. but I don't understand what exactly is happening and how to implement what I am trying to implement, I followed steps from the youtube video mentioned below where he did the same thing
useEffect(() =\> {
dispatch(getComplaintList());
}, \[\]);
return (
\<FlatList
data={ComplaintList}
renderItem={({ item }) =\> (
\<ComplaintCard
key={item.complaint_id}
title={item.issue}
status={item.status}
/\>
)}
/\>
);
these are my dependencies version
{
"name": "poll-app",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#expo-google-fonts/inter": "^0.2.2",
"#expo/webpack-config": "^0.17.2",
"#react-navigation/native": "^6.1.3",
"#react-navigation/stack": "^6.3.12",
"expo": "\~47.0.12",
"expo-status-bar": "\~1.4.2",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "\~3.18.0",
"react-native-web": "\~0.18.9",
"react-redux": "^8.0.5",
"redux": "^4.2.1",
"redux-thunk": "^2.4.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"eslint-plugin-react-hooks": "^4.6.0"
},
"private": true
}
Note: I am using an older version of node because expo had some legacy dependency issue with the current lts version of node
I have tried This answer, I believe my question is a duplicate of this question, I don't know how to revive unanswered questions so I am asking this question here, I apologize if this is not the correct way to ask for the answer on stack.
I followed this Youtube tutorial for the implementation
As of now
I have reinstalled react-redux and redux and also tried npm update.
To check for the react version mismatch issue. I have also verified that all the dependencies use the same react version.
I have included my thoughts about the problem in the a comment in the code above
try like this const dispatch = useDispatch(), you're not calling the function useDispatch
I am getting the below error when trying to implement #react-native-community/blur (https://github.com/Kureev/react-native-blur).
I've tried downgrading from 4.3.0 to 4.2.0 and then 4.1.0 with no success.
Is there a file potentially missing from the node_modules I can just add?
Or is there another library you would recommend using which is compatible with React Native and EXPO
ERROR Invariant Violation: requireNativeComponent: "BlurView" was not found in the UIManager.
This error is located at:
in BlurView
in Unknown (created by Post)
in RCTView (created by View)
in View
in NativeWind.View
in Unknown (created by Post)
in RCTView (created by View)
in View
in NativeWind.View
in Unknown (created by Post)
in Post (created by HomeScreen)
in RCTView (created by View)
in View (created by ScrollView)
in RCTScrollView (created by ScrollView)
in ScrollView (created by ScrollView)
in ScrollView
in NativeWind.ScrollView
in Unknown (created by HomeScreen)
in RCTView (created by View)
in View
in NativeWind.View
in Unknown (created by HomeScreen)
in HomeScreen (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by BottomTabView)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by BottomTabView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by BottomTabView)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by BottomTabView)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by BottomTabNavigator)
in BottomTabNavigator (created by TabNavigator)
in TabNavigator (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by RootNavigator)
in RootNavigator (created by App)
in RCTView (created by View)
in View (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
Try to delete the ./node_modules, ./ios/Pods and re-install it all again
If your Mac's running Apple Silicon chip, use the folling command instead of just pod install:
arch -x86_64 pod install
In case after multiple attemps but it still doesn't work, I suggest using another way to make blurry UI with #shopify/react-native-skia. My project also ultilises this package in creating blurView.
Hopefully my answer might help you.
Invariant Violation: requireNativeComponent: "RNGestureHandlerRootView" was not found in the UIManager.
This error is located at:
in RNGestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by StackView)
in StackView (created by StackNavigator)
in Unknown (created by StackNavigator)
in StackNavigator (created by Browser)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by Browser)
in Browser (created by Home)
in RCTView (created by View)
in View (created by Home)
in Home (created by Manager)
in Manager (created by App)
in RCTView (created by View)
in View
in SafeAreaView (created by App)
in Provider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
I Already Tried These Options:
1/import "react-native-gesture-handler"; both in App.js or AppEntry.js
2/Deleted the node_modules folder an run npm i
Please I am stuck here!
I have a sharedValue in my navigator and I would like to pass it to each screen, so every screen has access to the sharedValue and can see when it changes. However when I try to pass it as an initialParam in my TabNavigator it errors out saying "no default value". I'm also open to a better way to pass an animated value to children, I tried using react context but that didn't work.
const test = useSharedValue(12)
<Tabs.Screen
name="Home"
component={Home}
initialParams={{test:test}}
/>
TypeError: No default value
This error is located at:
in BottomTabBar (created by SafeAreaInsetsContext)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in Unknown (created by BottomTabNavigator)
in BottomTabNavigator (created by TabsNavigator)
in TabsNavigator (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View
in CardSheet (created by Card)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by PanGestureHandler)
in PanGestureHandler (created by PanGestureHandler)
in PanGestureHandler (created by Card)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Card)
in RCTView (created by View)
in View (created by Card)
in Card (created by CardContainer)
in CardContainer (created by CardStack)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Screen)
in MaybeFreeze (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by CardStack)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by CardStack)
in RCTView (created by View)
in View (created by Background)
in Background (created by CardStack)
in CardStack (created by HeaderShownContext)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by StackView)
in RCTView (created by View)
in View (created by StackView)
in StackView (created by StackNavigator)
in Unknown (created by StackNavigator)
in StackNavigator (created by MainNavigator)
in MainNavigator (created by AppNavigator)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by AppNavigator)
in AppNavigator (created by App)
in PersistGate (created by App)
in Provider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
im facing an anoying issue with a react native code : running the app on expo app on ios work fine but on android it shows the following error ! im not sure where the issues is but the constants variable is imported as it should can you help me identify what generate the error :
ReferenceError: Can't find variable: Constants
This error is located at:
in Index (created by Connect(Index))
in Connect(Index) (created by SectionData)
in RCTView (created by Context.Consumer)
in RCTView (created by Context.Consumer)
in SectionData (created by ListingDetail)
in RCTView (created by Context.Consumer)
in RCTView (created by Context.Consumer)
in RCTScrollView (created by ScrollView)
in ScrollView (created by AnimatedComponent)
in AnimatedComponent (created by ListingDetail)
in RCTView (created by Context.Consumer)
in ListingDetail (created by Connect(ListingDetail))
in Connect(ListingDetail) (created by Index)
in RCTView (created by Context.Consumer)
in Handler (created by Index)
in Index (created by Connect(Index))
in Connect(Index) (created by PostDetailScreen)
in PostDetailScreen (created by withSafeArea)
in RCTView (created by Context.Consumer)
in AnimatedComponent (created by SafeView)
in SafeView (created by withOrientation)
in withOrientation (created by withSafeArea)
in withSafeArea (created by Connect(withSafeArea))
in Connect(withSafeArea) (created by SceneView)
in SceneView (created by TabNavigationView)
in RCTView (created by Context.Consumer)
in RCTView (created by Context.Consumer)
in ResourceSavingScene (created by TabNavigationView)
in RCTView (created by Context.Consumer)
in ScreenContainer (created by TabNavigationView)
in RCTView (created by Context.Consumer)
in TabNavigationView (created by NavigationView)
in NavigationView (created by Navigator)
in Navigator (created by NavigationContainer)
in NavigationContainer (created by RootRouter)
in RCTView (created by Context.Consumer)
in AndroidDrawerLayout (created by DrawerLayoutAndroid)
in DrawerLayoutAndroid (created by MenuAndroid)
in MenuAndroid (created by Connect(MenuAndroid))
in Connect(MenuAndroid) (created by RootRouter)
in RCTView (created by Context.Consumer)
in RootRouter (created by Connect(RootRouter))
in Connect(RootRouter) (created by App)
in Provider (created by App)
in App (created by withSafeArea)
in RCTView (created by Context.Consumer)
in AnimatedComponent (created by SafeView)
in SafeView (created by withOrientation)
in withOrientation (created by withSafeArea)
in withSafeArea (created by ExpoRootComponent)
in RootErrorBoundary (created by ExpoRootComponent)
in ExpoRootComponent
in RCTView (created by Context.Consumer)
in RCTView (created by Context.Consumer)
in RootSiblingsWrapper (created by AppContainer)
in RCTView (created by Context.Consumer)
in AppContainer componentWillMount
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:288151:65
callComponentWillMount
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:14755:38
mountClassInstance
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:14843:33
updateClassComponent
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:16298:31
performUnitOfWork
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:19003:27
workLoop
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:19035:47
renderRoot
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:19098:21
performWorkOnRoot
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:19789:23
performWork
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:19713:30
performSyncWork
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:19688:20
batchedUpdates$1
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:19889:28
batchedUpdates
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:10963:37
_receiveRootNodeIDEvent
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:11020:23
receiveTouches
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:11050:34
__callFunction
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:3644:49
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:3417:31
__guard
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:3598:15
callFunctionReturnFlushedQueue
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fmac%2FDesktop%2F11%2FListPro%201.3.1%205%2Fold%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:3416:21
callFunctionReturnFlushedQueue
[native code]
import { Images, Events, Config, AppConfig, Tools, Constants} from '#common'
this.isListable = AppConfig.Theme == Constants.Themes.Classic
this.isMyListing = AppConfig.Theme == Constants.Themes.Classic
this.isListingPro = AppConfig.Theme == Constants.Themes.Classic