nandorojo/moti

Fresh expo project gives: ERROR Warning: Invalid hook call

Anyamborogass opened this issue · 4 comments

Anyamborogass commented

Is there an existing issue for this?

  • 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:

  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.
    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:
  4. You might have mismatching versions of React and the renderer (such as React DOM)
  5. You might be breaking the Rules of Hooks
  6. 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

  1. Create new Expo project: npx create-expo-app my-app
  2. Install dependencies: npx expo install react-native-reanimated moti
  3. build development project with eas: eas build
  4. Install apk on Emulator
  5. 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 (

    <TouchableOpacity onPress={toggle} style={styles.button}>
      {visible && 
           <MotiView
           style={styles.shape}
         />
       } 
    </TouchableOpacity>

  <StatusBar style="light" backgroundColor={"black"} />

);
}

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

ShahilMangroliya commented

+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"
}

  • 👍1
daoma90 commented

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

Please try this solution, replacing the version with react 18

#189 (comment)

  • ❤️1
Anyamborogass commented

Worked like a charm!! Amazing thanks!