Adding Moti to an existing app doesn't work

Question

Adding Moti to an existing app doesn't work

Closed this issue 2 years ago · 46 comments

I tried setting up Moti on snack and it works, but adding it to our existing app dies with the error: TypeError: Cannot read property 'useContext' of null.

Not sure if I'm missing something in the setup

Answer 1 · 2022-04-01T17:59:46.000Z

doesn’t look like a moti issue. also i don’t have enough info to help here

Answer 2 · 2022-04-01T18:00:03.000Z

make sure you follow all the installation instructions for moti and reanimated

Answer 3 · 2022-04-02T04:35:49.000Z

@nandorojo I made a test app to repro the issue: here

Reanimated is included as the first import too since we do use inline requires in our main app.

Answer 4 · 2022-04-02T04:41:34.000Z

does Animated.View work?

Answer 5 · 2022-04-02T04:42:23.000Z

Yes. We're using it in multiple animations. I mean the Animated.View from reanimated.

Answer 6 · 2022-04-02T04:48:46.000Z

Added a branch that is using reanimated to rotate the view: https://github.com/heroic/test-moti/tree/feature/reanimated

Answer 7 · 2022-04-02T16:29:07.000Z

Narrowed down the problem to reanimated 2.5.0. The sample app works if downgraded to 2.3.1

Answer 8 · 2022-04-02T16:35:38.000Z

to clarify, Animated.View works, but swapping in MotiView breaks it?

Answer 9 · 2022-04-02T18:02:13.000Z

yes. using reanimated 2.3.1 makes MotiView work too. something with 2.5.0 breaks MotiView

Answer 10 · 2022-04-02T18:41:49.000Z

good to know, thanks for finding that. @hirbod did it work for you on 2.5? re #185

Answer 11 · 2022-04-02T18:46:12.000Z

@nandorojo I am on 2.5.0 and I don't have any issues with MotiView. I have direct imports and usage with styled - working fine (both iOS and Android)

Answer 12 · 2022-04-02T18:57:10.000Z

@heroic what if you import reanimated at the top before importing moti?

Answer 13 · 2022-04-02T18:58:35.000Z

My App.tsx imports are like so:

import 'react-native-gesture-handler';
import 'react-native-reanimated';
....
....

  return (
    <DripsyProvider theme={colorMode === 'dark' ? theme : themeLight}>
      <QueryClientProvider client={queryClient}>
        <SafeAreaProvider>
          <GestureHandlerRootView style={styles.flexGrow}>
            <Root theme={combinedTheme} />
            <StateActionComponent />
            <Toast config={toastConfig} topOffset={50} />
          </GestureHandlerRootView>
        </SafeAreaProvider>
      </QueryClientProvider>
    </DripsyProvider>
  );

Answer 14 · 2022-04-02T19:00:26.000Z

Yeah we might have to make this part of the installation guide for iOS/Android.

Answer 15 · 2022-04-02T19:02:39.000Z

But his index.js import looks fine so far:
https://github.com/heroic/test-moti/blob/main/index.js

I did not test his repro though.

Answer 16 · 2022-04-02T19:03:57.000Z

true, i wonder if the import should come in the TSX file though

Answer 17 · 2022-04-02T19:04:46.000Z

@heroic maybe add the gesture handler root view? i’m not totally sure yet what could be off

Answer 18 · 2022-04-02T19:05:54.000Z

I remember that I had issues with the old monorepo example where reanimated was imported inside the index.js but worked correctly when swapped over to App.tsx. Regarding RNGH, thats the import:

import { GestureHandlerRootView } from 'react-native-gesture-handler';

Answer 19 · 2022-04-02T19:08:36.000Z

Some other things to consider:

He is using RN 0.66.3 - we're expo / dev client users, so running 0.64.3

But since I am on custom dev client I upgraded to REA 2.5.0 and RNGH 2.1.1
So I can't tell for sure if a newer RN version breaks something.

Answer 20 · 2022-04-02T19:20:50.000Z

@hirbod, as i mentioned when I switch to 2.3.1 with RN 0.66.3 moti works. so it's probably 2.5.0 with 0.66.3 thats the cause?

@nandorojo I do have RNGestureHandlerEnabledRootView in the mainactivity. Do you want me to add the JS side view too?

Answer 21 · 2022-04-02T19:24:29.000Z

@heroic give it a try please. It has to be included on the js side, see my example. If thats not working out, the combination 0.66.3 with 2.5.0 might be the real reason. I had a test project with 0.67.* though, which was working.

Answer 22 · 2022-04-02T19:37:57.000Z

@hirbod no change. Tried it here: https://github.com/heroic/test-moti/tree/feature/rngesture

Answer 23 · 2022-04-02T19:39:26.000Z

Whats the full stacktrace? Could you provide a screenshot please?

Answer 24 · 2022-04-02T20:56:41.000Z

@hirbod attached

Answer 25 · 2022-04-02T20:57:26.000Z

 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. 
    at Moti (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=in.galaxycard.android.debug&modulesOnly=false&runModule=true:146070:27)
    at RNGestureHandlerRootView
    at GestureHandlerRootView
    at PayInEmiButton (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=in.galaxycard.android.debug&modulesOnly=false&runModule=true:133802:21)
    at RCTView
    at View
    at RCTView
    at View
    at AppContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=in.galaxycard.android.debug&modulesOnly=false&runModule=true:77816:36)
    at GalaxyCard(RootComponent) (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=in.galaxycard.android.debug&modulesOnly=false&runModule=true:84211: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:
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. 
    at Moti (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=in.galaxycard.android.debug&modulesOnly=false&runModule=true:146070:27)
    at RNGestureHandlerRootView
    at GestureHandlerRootView
    at PayInEmiButton (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=in.galaxycard.android.debug&modulesOnly=false&runModule=true:133802:21)
    at RCTView
    at View
    at RCTView
    at View
    at AppContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=in.galaxycard.android.debug&modulesOnly=false&runModule=true:77816:36)
    at GalaxyCard(RootComponent) (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=in.galaxycard.android.debug&modulesOnly=false&runModule=true:84211:28)
 ERROR  TypeError: Cannot read property 'useContext' of null

This error is located at:
    in Moti (at PayInEmi.tsx:39)
    in RNGestureHandlerRootView (at GestureHandlerRootView.android.tsx:17)
    in GestureHandlerRootView (at PayInEmi.tsx:38)
    in PayInEmiButton (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in GalaxyCard(RootComponent) (at renderApplication.js:60), js engine: hermes
 ERROR  TypeError: Cannot read property 'useContext' of null

This error is located at:
    in Moti (at PayInEmi.tsx:39)
    in RNGestureHandlerRootView (at GestureHandlerRootView.android.tsx:17)
    in GestureHandlerRootView (at PayInEmi.tsx:38)
    in PayInEmiButton (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in GalaxyCard(RootComponent) (at renderApplication.js:60), js engine: hermes

Answer 26 · 2022-04-02T21:00:27.000Z

ok i think the issue is you have multiple react versions or something. please make an empty repro without all the delendencies

Answer 27 · 2022-04-02T21:03:37.000Z

@nandorojo That would be almost impossible as the moment I change reanimated to 2.3.1 the same code shared above works, unless reanimated is bringing another react somehow with 2.5.0 and rn 0.66.3

Answer 28 · 2022-04-02T21:04:59.000Z

@heroic try to delete package-lock and delete your node_modules folder and call "yarn" and try again please.

Answer 29 · 2022-04-02T21:05:45.000Z

@hirbod trying to see if removing all packages from package.json makes a diff first. Will try your suggestion right after.

Answer 30 · 2022-04-02T21:08:17.000Z

in general for a minimal reproduction, you should make an empty project only with the libraries in question to remove other things that could impact it. also, you should always share the full stack trace for errors

Answer 31 · 2022-04-02T21:09:29.000Z

Yeah. I couldn't even run your repro because of

react-native-linear-gradient
react-native-settings
react-native-signature-capture

And bunch of other stuff:

Ignoring ffi-1.15.4 because its extensions are not built. Try: gem pristine ffi --version 1.15.4
RNFBAnalytics: Using default Firebase/Analytics with Ad Ids. May require App Tracking Transparency. Not allowed for Kids apps.
RNFBAnalytics: You may set variable `$RNFirebaseAnalyticsWithoutAdIdSupport=true` in Podfile to use analytics without ad ids.
Adding a custom script phase for Pod RNFBApp: [RNFB] Core Configuration
Auto-linking React Native modules for target `GalaxyCardApp`: BVLinearGradient, BugsnagReactNative, CodePush, RNCClipboard, RNCMaskedView, RNDeviceInfo, RNFBAnalytics, RNFBApp, RNFBDynamicLinks, RNFBMessaging, RNFastImage, RNGestureHandler, RNGoogleSignin, RNLocalize, RNPermissions, RNRate, RNReanimated, RNSVG, RNScreens, VisionCamera, lottie-ios, lottie-react-native, react-native-animateable-text, react-native-cookies, react-native-geolocation-service, react-native-jsi-contacts, react-native-mmkv, react-native-safe-area-context, react-native-settings, and react-native-webview
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `RCT-Folly` from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`
RNFBAnalytics: Using default Firebase/Analytics with Ad Ids. May require App Tracking Transparency. Not allowed for Kids apps.
RNFBAnalytics: You may set variable `$RNFirebaseAnalyticsWithoutAdIdSupport=true` in Podfile to use analytics without ad ids.
Fetching podspec for `boost` from `../node_modules/react-native/third-party-podspecs/boost.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
[!] No podspec found for `react-native-signature-capture` in `../node_modules/react-native-signature-capture`

Answer 32 · 2022-04-02T21:12:41.000Z

@hirbod i think this is ios you're testing on. I haven't tested ios. This is android, I'm getting the issue on.

@nandorojo point taken. stripping away the code

Answer 33 · 2022-04-02T21:13:17.000Z

Yes, I am an Apple guy :P

Answer 34 · 2022-04-02T21:13:54.000Z

@nandorojo you should add an issue template :D

Answer 35 · 2022-04-02T21:14:00.000Z

@hirbod we don't have an apple version of the app yet, so I'm not even sure if the repro will even build. It's a stripped version of our main app

Answer 36 · 2022-04-02T21:22:19.000Z

@nandorojo @hirbod here's the stripped version https://github.com/heroic/test-moti/tree/feature/stripped

Answer 37 · 2022-04-02T21:24:27.000Z

I also rm -rf node_modules and package-lock.json

Answer 38 · 2022-04-02T21:32:42.000Z

Not stripped enough....

Execution failed for task ':app:processDebugGoogleServices'.
> File google-services.json is missing. The Google Services Plugin cannot function without it. 
   Searched Location: 
  /Users/hirbod/Github/issues/test-moti/android/app/src/nullnull/debug/google-services.json
  /Users/hirbod/Github/issues/test-moti/android/app/src/debug/nullnull/google-services.json
  /Users/hirbod/Github/issues/test-moti/android/app/src/nullnull/google-services.json
  /Users/hirbod/Github/issues/test-moti/android/app/src/debug/google-services.json
  /Users/hirbod/Github/issues/test-moti/android/app/src/nullnullDebug/google-services.json
  /Users/hirbod/Github/issues/test-moti/android/app/google-services.json

Answer 39 · 2022-04-02T21:33:46.000Z

@hirbod the branch is building for me. Let me see where it's doing this for you.

Answer 40 · 2022-04-02T21:34:08.000Z

Well its building for you because your google-services file is present ;)
Dont share this file! It includes secrets. You need to remove everything related

Answer 41 · 2022-04-02T21:37:49.000Z

@hirbod I did delete the file from the code. It's not here. probably a cache or something. Try now please. I've removed everything GMS

Answer 42 · 2022-04-02T21:41:18.000Z

Also, thank you so much for spending your weekend on this! I'm sorry for taking up your weekend!!!

Answer 43 · 2022-04-02T21:50:16.000Z

@heroic always include the RN template keystore inside android/app
https://raw.githubusercontent.com/facebook/react-native/master/template/android/app/debug.keystore

Answer 44 · 2022-04-02T21:51:21.000Z

Your project is building for me without any issues. Working absolutely fine.
I can see a rotated MotiView with "abc", no issues, no crash.

Clear your bundler cache, delete the watchman cache, rebuild. It should work afterwards.

It's a good pattern to try those steps always before. The most common building issues are due to watchman, stale node modules or metro bundler cache

Answer 45 · 2022-04-02T21:58:07.000Z

I'm gonna try another system tmr. Still throws an error on mine.

Answer 46 · 2022-04-02T22:01:18.000Z

watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache clean && yarn
npx react-native run-android

@nandorojo Issue can be closed, working as expected.

Also, thank you so much for spending your weekend on this! I'm sorry for taking up your weekend!!!

You're welcome. Just make sure to provide more information and a better repro upfront next time, will help maintainers a lot