search

torgeadelin / react-native-animated-nav-tab-bar

A simple and customisable React Native component that implements an animated bottom tab bar for React Navigation.
MIT License
902 stars 101 forks source link

Invalid Hook Call. Hooks can only be called inside body of functional component #62

Closed Haseeba393 closed 2 years ago

Haseeba393 commented 3 years ago

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 Simulator Screen Shot - iPhone 11 - 2020-12-17 at 11 58 36

Mohamed-Faroos commented 3 years ago

I am also facing same issue. Any solution??

Haseeba393 commented 3 years ago

Nothing found yet.

On Thu, Jan 21, 2021, 9:11 AM Mohamed Faroos notifications@github.com wrote:

I am also facing same issue. Any solution??

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/torgeadelin/react-native-animated-nav-tab-bar/issues/62#issuecomment-764241225, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ3R4UGFVZRJE7P447MJUVTS26SQFANCNFSM4U7EK7XQ .

khijjawi commented 3 years ago

I am also facing same issue.

torgeadelin commented 3 years ago

Currently working to fix this.

kushagraagent47 commented 3 years ago

Currently working to fix this.

Any update yet?

kushagraagent47 commented 3 years ago

Hey @torgeadelin Still getting the same issue

torgeadelin commented 3 years ago

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.

khijjawi commented 3 years ago

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",

torgeadelin commented 3 years ago

Did you reset cache?

khijjawi commented 3 years ago

yes, with same issue.

bberos commented 3 years ago

I am also facing same issue here.

torgeadelin commented 3 years ago

Hi, please provide some reproducible code so I can investigate further. Thanks

fahadfj commented 3 years ago

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';

kushagraagent47 commented 3 years ago

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';

Hey @fahadfj, could you please share your package.json and app.js here

fahadfj commented 3 years ago

@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"
  }
}
vincelwt commented 3 years ago

Same issue here 🙁 not sure what could be the issue ... tried with the same package versions as @fahadfj and basically the same code

naxir commented 3 years ago

Same!!!!

imvsinha commented 3 years ago

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

recepkocur commented 3 years ago

yes same problem. It gives an error even though I have updated the latest versions of all packages. Screen Shot 2021-07-17 at 13 35 15

kristoff2016 commented 3 years ago

Any update?

imvsinha commented 3 years ago

yes same problem. It gives an error even though I have updated the latest versions of all packages. Screen Shot 2021-07-17 at 13 35 15

Can you run "npm ls react" in your terminal and send me the result. I think you have two copies of the react package.

imvsinha commented 3 years ago

Any update?

Go through the above solution and check if you have two copies of react package. Use "npm ls react" to check.

kristoff2016 commented 3 years ago

Hello @imvsinha thank you for your replied, here is my log

Screen Shot 2021-08-04 at 8 34 06 PM
kristoff2016 commented 3 years ago

Do you think which one should I remove? thank you

imvsinha commented 3 years ago

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.

kristoff2016 commented 3 years ago

Still the same issue.

imvsinha commented 3 years ago

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

torgeadelin commented 2 years ago

This should be now fixed, please update to 3.1.5