Skip to content

Tabs crash app with error "RCTView",{"transform":[{"translateX":"<<NaN>>"}]}] is not usable as a native method argument #3784

New issue
New issue
Open
#3807
Open
Tabs crash app with error "RCTView",{"transform":[{"translateX":"<<NaN>>"}]}] is not usable as a native method argument#3784
#3807
Labels
component: Tabpriority: high
@DarylBeattie

Description

@DarylBeattie
DarylBeattie
opened on May 5, 2023

Is there an existing issue for this?

  • I have searched the existing issues

Explain what you did

I have an app with:

  • 2 separate sets of tabs, on different screens.
  • Each set of tabs contains only 2 tabs.
  • Animation is set to true.
  • All Tabs/TabViews take up 100% width of each screen they are in, except some of the screens the Tabs take up 90% (because there's a back "<" beside them) where the TabViews still take up 100% width.
  • I have set the widths to "100%", left the widths empty, and set the widths to useWindowDimensions().width, and it still happens.
  • React Native bottom-drawer navigation to go between screens.
  • Running on iOS, using ExpoGo.
  • I have tested with the latest RNEUI release, and the "bleeding edge" as well.

Expected behavior

I expect the app not to crash and to be able to use my Tabs normally.

Describe the bug

When I go from page to page, and tab-to-tab within those pages, the app crashes randomly with "Render Error" showing:

ERROR Invariant Violation: [109,"RCTView",{"transform":[{"translateX":"<<NaN>>"}]}] is not usable as a native method argument

There is an error with the Tab animations.
My app crashes randomly, but only after a few times switching back and forth between windows containing tabs.

Deeper Dive:

I have tried to debug this issue myself in Tab.tsx (and TabView.tsx), and have found that indeed the isNan() is returning true for values being passed into transform->translateX. Though, this could be because they are Animated.Values and not just scalar number types, so they are "not numbers". When I JSON.stringify() the translateX values, they always give me 0. However, I have read somewhere that when you try to print the value of an Animated.Value when you're using useNativeDriver: true it always returns 0; not sure how true that is.

The line of code that causes the error is here from Tab.tsx [formatted for bug report]:
transform: [ { translateX: indicatorTransitionInterpolate, }, ],

This could be happening because of the useRefs being used for animationRef.

It also could be an issue with how indicatorTransitionInterpolate is computed.

I have tried to add extrapolate: "clamp" to the interpolation, but that didn't help.
If I check for isNaN() and simply return the other value, it has the effect of removing the animation completely (value is always 0).

The full error looks like this:

ERROR  Invariant Violation: [107,"RCTView",{"transform":[{"translateX":"<<NaN>>"}]}] is not usable as a native method argument

This error is located at:
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Tab)
    in RCTView (created by View)
    in View (created by Tab)
    in Tab
    in Themed.Tab (created by BrowseScreen)
    in RCTView (created by View)
    in View (created by BrowseScreen)
    in RCTView (created by View)
    in View (created by BrowseScreen)
    in BrowseScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by BrowseStackScreens)
    in BrowseStackScreens (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by BottomTabView)
    in RCTView (created by View)
    in View (created by Screen)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by Screen)
    in Screen (created by BottomTabView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by BottomTabView)
    in RNSScreenNavigationContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by BottomTabView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator (created by HomeScreen)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by HomeScreen)
    in RCTView (created by View)
    in View (created by HomeScreen)
    in MatchesProvider (created by HomeScreen)
    in HomeScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by Navigation)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by Navigation)
    in RCTView (created by View)
    in View (created by Navigation)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by App)
    in Navigation (created by App)
    in OnboardingProvider (created by App)
    in AuthUserProvider (created by App)
    in ThemeProvider (created by App)
    in Provider (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    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), js engine: hermes

(Basically you can see from this my screen components are App > Navigation > Home > Browse, which has Tabs.)

Steps To Reproduce

Besides setting up an entire app that mimics the behavior, I'm not sure how to reproduce this error. And, I'm very sorry to say, I don't have the time to fully create a Snack to reproduce it.

Screenshots

No response

Your Environment

`npx @rneui/envinfo` 
  ```

React Native Elements Env Info

Global Dependencies:

No related dependency found

Local Dependencies:

  • @rneui/base : ^0.0.0-edge.2
  • @rneui/themed : ^0.0.0-edge.2
  • expo : ~48.0.6
  • react : 18.2.0
  • react-native : 0.71.7 ```

Metadata

Metadata

Assignees

No one assigned

    Labels

    component: Tabpriority: high

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions