Fresh expo project gives: ERROR Warning: Invalid hook call

Anyamborogass commented 1 year ago

Is there an existing issue for this?

[X] I have searched the existing issues

Current Behavior

I created a new Expo project to play with different animations (npx create-expo-app my-app), and I installed react-native-reanimated and moti (npx expo install react-native-reanimated moti). When I import it I get no problem, but when I want to do a simple animation I get an Error and the app crashes.

ERROR Warning: 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:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
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. Moti@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:149648:27 RCTView View AnimatedComponent@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:72949:38 AnimatedComponentWrapper TouchableOpacity@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:68218:36 TouchableOpacity RCTView View SafeAreaView@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:85015:41 App@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:119453:45 ExpoRoot@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:119226:22 RCTView View RCTView View AppContainer@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:81064:36 main(RootComponent)@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:87159:28 ERROR Warning: 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:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
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. Moti@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:149648:27 RCTView View AnimatedComponent@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:72949:38 AnimatedComponentWrapper TouchableOpacity@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:68218:36 TouchableOpacity RCTView View SafeAreaView@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:85015:41 App@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:119453:45 ExpoRoot@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:119226:22 RCTView View RCTView View AppContainer@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:81064:36 main(RootComponent)@http://192.168.0.73:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:87159:28 ERROR TypeError: null is not an object (evaluating 'dispatcher.useContext')

This error is located at: in Moti (created by App) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by TouchableOpacity) in TouchableOpacity (created by TouchableOpacity) in TouchableOpacity (created by App) in RCTView (created by View) in View in SafeAreaView (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 in main(RootComponent) ERROR TypeError: null is not an object (evaluating 'dispatcher.useContext')

Expected Behavior

No response

Steps To Reproduce

Create new Expo project: npx create-expo-app my-app
Install dependencies: npx expo install react-native-reanimated moti
build development project with eas: eas build
Install apk on Emulator
start expo: npx expo start --clear --dev-client

Versions

- Moti:^0.19.0
- Reanimated:~2.9.1
- React Native:0.69.5

Environment

  expo-env-info 1.0.5 environment info:
    System:
      OS: Windows 10 10.0.19043
    Binaries:
      Node: 16.13.1 - D:\myApps\NodeJS\node.EXE
      Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
      npm: 8.1.2 - D:\myApps\NodeJS\npm.CMD
    SDKs:
      Android SDK:
        API Levels: 28, 29, 30, 31
        Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0
        System Images: android-28 | Google APIs Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: Version     2020.3.0.0 AI-203.7717.56.2031.7784292
    npmPackages:
      expo: ~46.0.9 => 46.0.10
      react: 18.0.0 => 18.0.0
      react-native: 0.69.5 =>

Screenshots

No response

Reproduction

import 'react-native-reanimated'; import 'react-native-gesture-handler'; import { useReducer} from 'react'; import { StyleSheet, Text, SafeAreaView, TouchableOpacity } from 'react-native'; import { StatusBar } from 'expo-status-bar'; import { MotiView } from 'moti';

export default function App() { const [visible, toggle] = useReducer((s) => !s, true)

return (

{visible && }

); }

const styles = StyleSheet.create({ ... })

ShahilMangroliya commented 1 year ago

+1 getting same with react native CLI "dependencies": { "moti": "^0.20.0", "react": "18.1.0", "react-native": "0.70.2", "react-native-gesture-handler": "^2.7.0", "react-native-reanimated": "^2.10.0" }

daoma90 commented 1 year ago

Getting the same error when trying to use MotiView in expo.

Also getting this type error:

TypeError: null is not an object (evaluating 'dispatcher.useContext')

This error is located at:
    in Moti (created by DetailDescription)
    in RCTView (created by View)
    in View
    in View (created by Card)
    in Card (created by Card)
    in forwardRef (created by Card)
    in Card (created by Card)
    in forwardRef (created by DetailDescription)
    in DetailDescription (created by EventDetail)

"moti": "^0.20.0" "react": "18.0.0" "expo": "~46.0.13" "react-native": "0.69.6" "react-native-reanimated": "~2.9.1"

nandorojo commented 1 year ago

Please try this solution, replacing the version with react 18

https://github.com/nandorojo/moti/issues/189#issuecomment-1095085789

Anyamborogass commented 1 year ago

Worked like a charm!! Amazing thanks!

nandorojo / moti