Adding Moti to an existing app doesn't work

[heroic]

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

[nandorojo]

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

[nandorojo]

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

[heroic]

@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.

[nandorojo]

does Animated.View work?

[heroic]

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

[heroic]

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

[heroic]

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

[nandorojo]

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

[heroic]

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

[nandorojo]

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

[hirbod]

@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)

[nandorojo]

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

[hirbod]

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

[nandorojo]

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

[hirbod]

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.

[nandorojo]

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

[nandorojo]

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

[hirbod]

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

[hirbod]

Some other things to consider:

1) 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.

[heroic]

@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?

[hirbod]

@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.

[heroic]

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

[hirbod]

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

[heroic]

@hirbod attached

[heroic]

 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

[nandorojo]

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

[heroic]

@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

[hirbod]

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

[heroic]

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

[nandorojo]

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

[hirbod]

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`

[heroic]

@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

[hirbod]

Yes, I am an Apple guy :P

[hirbod]

@nandorojo you should add an issue template :D

[heroic]

@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

[heroic]

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

[heroic]

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

[hirbod]

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

[heroic]

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

[hirbod]

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

[heroic]

@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

[heroic]

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

[hirbod]

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

[hirbod]

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

[heroic]

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

[hirbod]

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