Invalid Hook Call. Hooks can only be called inside body of functional component
Haseeba393 opened this issue · 28 comments
Problem
I have made a fresh project to react native and installed this library along with React Navigation 5. I followed all instructions according to the given documentation but I'm getting an error regarding invalid hooks to call in TabBarElement.js.
Expected
The library should work as it is working in the demo video and pictures.
Environment
This is my package.json file
{
"name": "pocketchef",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@react-native-async-storage/async-storage": "^1.13.2",
"@react-native-community/checkbox": "^0.5.6",
"@react-native-community/masked-view": "^0.1.10",
"@react-native-firebase/app": "^10.1.0",
"@react-native-firebase/auth": "^10.1.1",
"@react-native-firebase/database": "^10.1.1",
"@react-native-firebase/storage": "^10.1.1",
"@react-navigation/bottom-tabs": "^5.11.2",
"@react-navigation/drawer": "^5.11.4",
"@react-navigation/material-top-tabs": "^5.3.10",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-animatable": "^1.3.3",
"react-native-animated-nav-tab-bar": "^3.0.5",
"react-native-gesture-handler": "^1.9.0",
"react-native-image-picker": "^2.3.4",
"react-native-material-dropdown": "github:noway/react-native-material-dropdown",
"react-native-modal": "^11.5.6",
"react-native-paper": "^4.4.1",
"react-native-ratings": "^7.3.0",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.15.0",
"react-native-share": "^4.1.0",
"react-native-shared-element": "^0.7.0",
"react-native-tab-view": "^2.15.2",
"react-native-vector-icons": "^7.1.0",
"react-native-video": "^5.1.0-alpha8",
"react-native-youtube": "^2.0.1",
"react-navigation-shared-element": "^5.0.0-alpha1",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"@babel/core": "7.12.9",
"@babel/runtime": "7.12.5",
"@react-native-community/eslint-config": "1.1.0",
"babel-jest": "25.5.1",
"eslint": "6.8.0",
"jest": "25.5.4",
"metro-react-native-babel-preset": "0.59.0",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}
Screenshot
I am also facing same issue.
Any solution??
I am also facing same issue.
Currently working to fix this.
Currently working to fix this.
Any update yet?
Hey @torgeadelin Still getting the same issue
Please update to react-navigation/native 5.9.0, stack 5.13.0, bottom-tabs 5.11.3
Also make sure you have latest version of the package 3.1.1.
Please reset cache when you run npm run start.
Still same error .
"@react-navigation/native": "^5.9.2",
"@react-navigation/stack": "^5.14.2",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-animated-nav-tab-bar": "^3.1.1",
Did you reset cache?
yes, with same issue.
I am also facing same issue here.
Hi, please provide some reproducible code so I can investigate further. Thanks
Fixed this by removing this line
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
Do not import both createBottomBarNavigator AND AnimatedTabBarNavigator.
Import ONLY import {AnimatedTabBarNavigator} from 'react-native-animated-nav-tab-bar';
Fixed this by removing this line
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';Do not import both
createBottomBarNavigatorANDAnimatedTabBarNavigator.Import ONLY
import {AnimatedTabBarNavigator} from 'react-native-animated-nav-tab-bar';
Hey @fahadfj, could you please share your package.json and app.js here
@kushagraagent47 sure,
here's App.js:
import * as React from 'react';
import {DefaultTheme, NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {AnimatedTabBarNavigator} from 'react-native-animated-nav-tab-bar';
import HomeScreen from './src/screens/HomeScreen';
import SourceScreen from './src/screens/SourceScreen';
import WeightScreen from './src/screens/WeightScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import GlobalStyle from './src/globals/GlobalStyle';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {Image, StyleSheet} from 'react-native';
const navTheme = DefaultTheme;
const Tab = AnimatedTabBarNavigator();
navTheme.colors.background = GlobalStyle.Colours.background;
function App() {
return (
<>
{/* <StatusBar barStyle={'light-content'} /> */}
<NavigationContainer>
<Tab.Navigator
tabBarOptions={{
activeTintColor: GlobalStyle.Colours.black,
activeBackgroundColor: GlobalStyle.Colours.main,
tabStyle: styles.tabBarStyle,
labelStyle: styles.tabBarLabelStyle,
}}>
<Tab.Screen
name="home"
component={HomeScreen}
options={{
tabBarIcon: ({focused, color, size}) => (
<Image
source={require('./assets/images/home.png')}
style={styles.imageIcon}
/>
),
}}
/>
<Tab.Screen
name="source"
component={SourceScreen}
options={{
tabBarIcon: ({focused, color, size}) => (
<Image
source={require('./assets/images/biotech.png')}
style={styles.imageIcon}
/>
),
}}
/>
<Tab.Screen
name="weight"
component={WeightScreen}
options={{
tabBarIcon: ({focused, color, size}) => (
<Image
source={require('./assets/images/scale.png')}
style={styles.imageIcon}
/>
),
}}
/>
<Tab.Screen
name="profile"
component={ProfileScreen}
options={{
tabBarIcon: ({focused, color, size}) => (
<Icon
name="person"
size={24}
color={GlobalStyle.Colours.black}
focused={focused}
style={styles.iconStyle}
/>
),
}}
/>
</Tab.Navigator>
{/* <Stack.Navigator
theme={navTheme}
initialRouteName="Home"
screenOptions={{headerShown: false}}>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Index" component={IndexScreen} />
<Stack.Screen
name="Workout"
component={WorkoutScreen}
options={verticalAnimation}
/>
<Stack.Screen name="Bodyweight" component={BodyweightScreen} />
</Stack.Navigator> */}
</NavigationContainer>
</>
);
}
const styles = StyleSheet.create({
tabBarStyle: {paddingHorizontal: 25},
tabBarLabelStyle: {
fontFamily: GlobalStyle.Fonts.SemiBold,
fontSize: 15,
marginVertical: 3,
},
imageIcon: {
width: 24,
height: 24,
},
});
export default App;
and package.json
{
"name": "waProject",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@gorhom/bottom-sheet": "^3",
"@react-native-community/masked-view": "^0.1.10",
"@react-native-firebase/app": "^10.5.0",
"@react-native-firebase/firestore": "^10.5.1",
"@react-navigation/bottom-tabs": "^5.11.8",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"immer": "^8.0.0",
"install": "^0.13.0",
"npm": "^6.14.11",
"pretty-format": "^25.5.0",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-animated-nav-tab-bar": "^3.1.2",
"react-native-gesture-handler": "^1.9.0",
"react-native-haptic-feedback": "^1.11.0",
"react-native-modal": "^11.6.1",
"react-native-reanimated": "^2.0.0-alpha.9.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.16.1",
"react-native-status-bar-height": "^2.6.0",
"react-native-svg": "^12.1.0",
"react-native-vector-icons": "^7.1.0",
"react-navigation-stack": "^2.10.2",
"uuid": "^3.4.0"
},
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/runtime": "^7.8.4",
"@react-native-community/eslint-config": "^1.1.0",
"@types/jest": "^26.0.20",
"@types/react": "^17.0.2",
"@types/react-native": "^0.63.48",
"@types/react-native-vector-icons": "^6.4.6",
"@types/react-test-renderer": "^17.0.1",
"babel-jest": "^25.1.0",
"eslint": "^6.5.1",
"jest": "^25.1.0",
"metro-react-native-babel-preset": "^0.59.0",
"react-native-svg-transformer": "^0.14.3",
"react-test-renderer": "16.13.1",
"typescript": "^4.1.5"
},
"jest": {
"preset": "react-native"
}
}
Same issue here 🙁 not sure what could be the issue ... tried with the same package versions as @fahadfj and basically the same code
Same!!!!
In order for Hooks to work, the react import from your application code needs to resolve to the same module as the react import from inside the react-dom package.
If these react imports resolve to two different exports objects, you will see this warning. This may happen if you accidentally end up with two copies of the react package.
If you use Node for package management, you can run this check-in your project folder:
npm ls react
If you see more than one React, you’ll need to figure out why this happens and fix your dependency tree.
For that, you need to reinstall react-navigation along with its dependencies.
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
or,
If you find 2 copies of react, just update the dependencies to only one react version (in package-lock.json).
For more info please visit: https://reactjs.org/warnings/invalid-hook-call-warning.html
yes same problem. It gives an error even though I have updated the latest versions of all packages.
Any update?
yes same problem. It gives an error even though I have updated the latest versions of all packages.
Can you run "npm ls react" in your terminal and send me the result. I think you have two copies of the react package.
Any update?
Go through the above solution and check if you have two copies of react package. Use "npm ls react" to check.
Hello @imvsinha thank you for your replied, here is my log
Do you think which one should I remove? thank you
You can see there are two copies of react one is react@17.0.1 & the other one is react@17.0.2. Kindly change the react@17.0.2 to react@17.0.1 and then reopen the project and run it. It may solve your problem.
Still the same issue.
Try to reinstall react-navigation along with its dependencies.
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
This should be now fixed, please update to 3.1.5