RN: Check the render method of Header

I love working with React Native (RN) but updating a project to the latest version makes for a rough week. I’ve been fighting version conflict after version conflict trying to get my setup up and going with the latest React Native (0.68) and it’s been one final problem that have taken too much time to solve. I’m sharing it here for others in a similar situation.

The error is in one of the common files called Header, but it stems from something completely different failing. It’s exactly this that I find painful when working with RN. I know something is wrong, but the toolset cannot tell me where. Instead I have to analyze and comment away different parts until I eventually hit the snag.

Anyway - so the error was in my case that I have removed “react-native-reanimated” from my “package.json” file since it’s only compatible with React 0.62 and below. The core navigation class “DrawerNavigator” needs this file, but the dependency is clearly not included and I’m not seeing any errors telling me that this class is missing? It’s surprising that this is a known dependency, but it’s not giving any errors but I guess there might be a trick to find these that I just don’t know?

My solution was just to use a different navigation, so I’m not dependant on react-native-reanimated. As of today, this module has 195 unresolved issues and some of them are kind of critical. I don’t blame the developers though as they (like most others) provide this for free. It does however highlight a core problem with using React Native - unless all your modules are kept up to date, core things in your React Native App will break.

I still enjoy being able to “write once” for both Android and iOS, but this is indeed one of the major drawback of crossplatform development.

Below is how I eventually figured out what module this would be in. There’s a mention of “AnimatedComponent”. That’s all I had to guess that this was the issue….

Check the render method of `Header`.

This error is located at:
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (at GenericTouchable.tsx:281)
    in RNGestureHandlerButton (at createNativeWrapper.tsx:66)
    in NativeViewGestureHandler (at createNativeWrapper.tsx:62)
    in RNGestureHandlerButton (at GestureButtons.tsx:160)
    in BaseButton (at GenericTouchable.tsx:269)
    in GenericTouchable (at TouchableHighlight.tsx:104)
    in TouchableHighlight (at App.js:128)
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (at Header.tsx:234)
    in RCTView (at View.js:32)
    in View (at Header.tsx:233)
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (at Header.tsx:228)
    in Header (at HeaderSegment.tsx:186)
    in HeaderSegment (at Header.tsx:56)
    in Header (at HeaderContainer.tsx:169)
    in RCTView (at View.js:32)
    in View (at HeaderContainer.tsx:143)
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (at HeaderContainer.tsx:52)
    in HeaderContainer (at StackView.tsx:316)
    in RCTView (at View.js:32)
    in View (at CardContainer.tsx:279)
    in RCTView (at View.js:32)
    in View (at CardSheet.tsx:33)
    in CardSheet (at Card.tsx:557)
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (at Card.tsx:536)
    in PanGestureHandler (at GestureHandlerNative.tsx:14)
    in PanGestureHandler (at Card.tsx:530)
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (at Card.tsx:526)
    in RCTView (at View.js:32)
    in View (at Card.tsx:520)
    in Card (at CardContainer.tsx:219)
    in CardContainer (at CardStack.tsx:661)
    in RNSScreen (at createAnimatedComponent.js:211)
    in AnimatedComponent (at createAnimatedComponent.js:264)
    in AnimatedComponentWrapper (at src/index.native.tsx:281)
    in MaybeFreeze (at src/index.native.tsx:280)
    in Screen (at Screens.tsx:37)
    in MaybeScreen (at CardStack.tsx:654)
    in RNSScreenContainer (at src/index.native.tsx:351)
    in ScreenContainer (at Screens.tsx:20)
    in MaybeScreenContainer (at CardStack.tsx:566)
    in RCTView (at View.js:32)
    in View (at Background.tsx:13)
    in Background (at CardStack.tsx:564)
    in CardStack (at StackView.tsx:437)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:87)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
    in SafeAreaProviderCompat (at StackView.tsx:430)
    in RNGestureHandlerRootView (at GestureHandlerRootView.android.tsx:23)
    in GestureHandlerRootView (at StackView.tsx:429)
    in StackView (at createStackNavigator.tsx:121)
    in Unknown (at createStackNavigator.tsx:120)
    in StackNavigator (at App.js:77)
    in Stackavigator (at App.js:163)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
    in BaseNavigationContainer (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in NavigationContainerInner (at App.js:162)
    in NetworkState (at App.js:161)
    in AppConstants (at App.js:160)
    in App (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)