-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tabs crash app with error "RCTView",{"transform":[{"translateX":"<<NaN>>"}]}] is not usable as a native method argument #3784
Comments
I have temporarily stopped this error from crashing my app by changing Tab's indicator's Animated.View to transform to:
However, this means the animation doesn't work, though the indicator does flip to the correct tab. I believe this bug is due to having multiple Tab components on different screens, as the app crashes when I flip to a screen that has another set of Tabs. Sometimes when I flip to another screen, the "WIDTH" variable is |
I am seeing the same thing. I am just using Tabs, not TabView, very simply with:
The only interesting thing is these are part of a FlatList header. Wondering if thats a clue, I'm really not sure though as its very intermittent for me. Not sure if directly related, but I also often see this error immediately after the error in the subject of this issue:
|
@richstokes Yes, you are right; I also got those "field sizes are different" exceptions each time along with the main exception. Also, I'd like to report that this problem is DEFINITELY in animating the tab-indicator. My work-around posted in a comment above completely avoids the error, I've never seen it since. However, it has the effect of removing the animation from the tab-indicator entirely. I don't know how to fix this bug or I would submit a PR myself. |
I don't have multiple sets of tabs, per-se, but in theory the screen may be stacked on top of other screens that render the same tabs. Can I disable the animation? I'm not sure how you did that - did you edit the RNE code to do so? |
@richstokes Yes I did disable the animation and that has SOLVED the crashing.
(Note I'm using "bleeding edge", yours might be slightly different.) Since the isNaN() always seems to return true, it has the effect of flipping the indicator to the correct tab when the WIDTH changes. |
I hate to nag, but umm: Could something be done about this problem? @arpitBhalla it seems you've done much of the work on this feature, could you please take a look? I could assist with any testing you need. |
I'm facing the same problem on my App, looking forward to a more elegant solution. |
Your workaround did the trick for me, @DaryBeattie. If nobody's working on a proper fix for this, then perhaps you could submit your workaround as a PR in the meantime? It's got to be better than having our apps crashing! |
I'm working on this, will release a patch till end of this week. |
Is this issue still being addressed? |
Any updates on this? |
Can you try using yarn add react-native-elements/react-native-elements#base-3807 import { Tabs, TabsRef } from "@rneui/base/dist/Tab/Tab";
import { Button, Tab as TabBar, TabView, Text } from "@rneui/base";
import React, { useRef } from "react";
import { ScrollView } from "react-native";
export default () => {
const tabRef = useRef<TabsRef>();
return (
<>
<Tabs ref={tabRef}>
<TabBar
titleStyle={{ fontSize: 12 }}
indicatorStyle={{
backgroundColor: "white",
height: 3,
}}
style={{ height: 70 }}
scrollable
>
<TabBar.Item
title="Recent"
icon={{ name: "timer", type: "ionicon", color: "white" }}
/>
<TabBar.Item
title="Custom"
containerStyle={(active) => ({
backgroundColor: active ? "#208990" : "transparent",
})}
icon={{ name: "heart", type: "ionicon", color: "white" }}
/>
<TabBar.Item
title="Cart"
icon={{ name: "cart", type: "ionicon", color: "white" }}
/>
<TabBar.Item
title="Example tab 1"
icon={{ name: "cart", type: "ionicon", color: "white" }}
/>
<TabBar.Item
title="Example tab 2"
icon={{ name: "cart", type: "ionicon", color: "white" }}
/>
<TabBar.Item
title="Example tab 3"
icon={{ name: "cart", type: "ionicon", color: "white" }}
/>
</TabBar>
<TabView onSwipeStart={console.log}>
<TabView.Item style={{ backgroundColor: "red", width: "100%" }}>
<ScrollView>
<Button onPress={() => tabRef.current?.changeIndex(2)}>
Jump to Tab 3
</Button>
<Text h1>{Math.random()}</Text>
</ScrollView>
</TabView.Item>
<TabView.Item style={{ backgroundColor: "blue", width: "100%" }}>
<Text h1>Favorite 1</Text>
</TabView.Item>
<TabView.Item style={{ backgroundColor: "green", width: "100%" }}>
<Text h1>Cart 2${Math.random()}</Text>
</TabView.Item>
<TabView.Item style={{ backgroundColor: "red", width: "100%" }}>
<Text h1>Example 3</Text>
</TabView.Item>
<TabView.Item style={{ backgroundColor: "blue", width: "100%" }}>
<Text h1>Example 4</Text>
</TabView.Item>
<TabView.Item style={{ backgroundColor: "green", width: "100%" }}>
<Text h1>Example 5</Text>
</TabView.Item>
</TabView>
</Tabs>
</>
);
}; |
@arpitBhalla Thank you for the solution you provided. I implemented your example and the error presented above is not triggered anymore. However, another one happens randomly for some reason I couldn't find yet. The error looks like this:
On the phone, I can get more details, as shown in the linked screenshot. When logging what is happening, in my
This leads for I can't find why Hope it can help 🙏 |
I also tested this example and I am getting sporadically the same "outputRange must have at least 2 elements". It doesn't always happen, but it does happen 10% of the time, approximately. I have contacted Arpit with many details about my testing. I also found this new code has some issues:
|
Hi any updates on this issue? |
I am also experiencing this issue.
For those wondering, you can make the suggested temp fix in |
@franamu A couple times @arpitBhalla has sent me some new code to test, and I have found issues with the fixes and reported back to him. So the short story is; this issue still exists. In the meantime I have been using my temporary |
Have the same issue. I don't like modifying anything in node_modules, so here is my hack... |
Sadly that solution doesn't work for me. Also, it requires me to add tab-specific code to all of the 7 screens that use my tabs, versus just changing 1 line in the Tab component in node_modules (which, I agree, I hate to do!) to get it to work everywhere. |
It works for me. Thank you @DaryBeattie |
Hope it can be resolved quickly, thanks |
Hey, we encountered this issue and this fixed work for us. Hoping a PR can land soon. |
I don't know how to do this, or I would have done it months ago, yes... The fix works locally, but when I build my app, the package bundler downloads the libraries from their source so my fix is not applied. Sadly, as a result, I have been ripping out the RNEUI Tabs from my app....... |
Came here to say this solution worked for me, and didn't involve modifying source code. Thank you! |
Any update on a fix? |
While waiting for the fix I am using a |
This is still an issue. Any update on a fix? |
This still seems to be an issue. |
I should point out that I did get this to work for me.
|
Patch for @rneui/base |
You can try this!!! const MyTabs = () => { <Tab const styles = StyleSheet.create({ export default MyTabs; |
Is there an existing issue for this?
Explain what you did
I have an app with:
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:
(Basically you can see from this my screen components are App > Navigation > Home > Browse, which has Tabs.)
Steps To Reproduce
Screenshots
No response
Your Environment
`npx @rneui/envinfo`
React Native Elements Env Info
Global Dependencies:
No related dependency found
Local Dependencies:
The text was updated successfully, but these errors were encountered: