I have temporarily stopped this error from crashing my app by changing Tab's indicator's Animated.View to transform to:

transform: [
    {
        translateX: isNaN(indicatorTransitionInterpolate) ? value * (WIDTH?WIDTH:0) : indicatorTransitionInterpolate,
    },
],

However, this means the animation doesn't work, though the indicator does flip to the correct tab.
FWIW, isNaN(indicatorTransitionInterpolate) always returns true.

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 undefined for the first render and gets set sometime later, hence the (WIDTH?WIDTH:0) in the code above. It might be a similar issue with the ref()s not updating quickly enough to be used in the return.

I am seeing the same thing. I am just using Tabs, not TabView, very simply with:

<View>
    <Tab
        value={index}
        onChange={(e) => setIndex(e)}
        indicatorStyle={{
            backgroundColor: isDarkMode ? 'white' : 'darkgrey',
            height: 2,
        }}
        variant="primary"
        dense
        containerStyle={{
            backgroundColor: style.backgroundColor,
            borderColor: style.backgroundColor,
            borderWidth: 0,
            height: 50,
        }}
        buttonStyle={{
            backgroundColor: style.backgroundColor,
            borderColor: style.backgroundColor,
            borderWidth: 0,
            height: 50,
        }}
    >
        <Tab.Item
            title="Tab 1"
            titleStyle={{ fontSize: 12 }}
            icon={{ name: 'document-text', type: 'ionicon' }}
        />
        <Tab.Item
            title="Tab 2"
            titleStyle={{ fontSize: 12 }}
            icon={{ name: 'arrow-redo', type: 'ionicon' }}
        />
        <Tab.Item
            title="Tab 3"
            titleStyle={{ fontSize: 12 }}
            icon={{ name: 'heart', type: 'ionicon' }}
        />
    </Tab>
</View >

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:

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

[[57,57,57,57,57,57,57,32,57,57,57,57,57,57,57,57,57,57,57,57,57,57,57,9],[2,0,2,0,2,0,2,6,10,5,4,11,3,13,3,3,13,13,11,3,3,13,13,3],[[231,255],[256,{"transforms":[{"nodeTag":255,"property":"translateX","type":"animated"}],"type":"transform"}],[255,256],[257,{"style":{"transform":256},"type":"style"}],[256,257],[258,{"props":{"style":257},"type":"props"}],[257,258],[258,7445],[62],[74,231,{"iterations":1,"toValue":0,"frames":[0,0.03114100006836614,0.1074304693764467,0.21455988464815853,0.3458169666596566,0.5,0.6541830333403433,0.7854401153518413,0.8925695306235534,0.9688589999316338,1],"type":"frames"},14935],[148,285],[147,148],[147],[146,148],[145,146],[146],[148],[150,125],[149,150],[145,149],[149],[150],[1]],7457]

This error is located at:
    in PanGestureHandler (created by PanGestureHandler)
    in PanGestureHandler (created by Card)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Card)

@richstokes Yes, you are right; I also got those "field sizes are different" exceptions each time along with the main exception.
@richstokes Question for you: Do you have multiple sets of tabs in your application?

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.
I did so by editing node_modules/@rneui/base-edge/dist/Tab.js
changing the transform-translateX near the bottom of the file to be (like from my second comment):

transform: [
    {
        translateX: isNaN(indicatorTransitionInterpolate) ? value * (WIDTH?WIDTH:0) : indicatorTransitionInterpolate,
    },
],

(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?
It is preventing me from publishing my app, which my company and clients depend on. I cannot publish an app that has tabs that completely crash the app. I would consider it a P1 issue with RNEUI.

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

translateX: isNaN(indicatorTransitionInterpolate) ? value * (WIDTH?WIDTH:0) : indicatorTransitionInterpolate,

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:

ERROR  Invariant Violation: outputRange must have at least 2 elements

This error is located at:
    in Tab (created by OrdersScreen)

On the phone, I can get more details, as shown in the linked screenshot.

When logging what is happening, in my node_modules/@rneui/base/dist/Tab/Tab.js I got issues in the TabBase function:

• indicatorWidth is undefined,
• tabItemsPositions.current contains the following: [undefined, {"position": 180.6666717529297, "width": 180.3333282470703}].


This leads for inputRange and outputRange to be respectively [1] and [NaN], explaining the next error from AnimatedInterpolation.js.

I can't find why indicatorWidth and tabItemsPositions.current hold such values at a given moment...

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:

• you must use the RNEUI's component, if you use ReactNative's component, the tabs crash the app.
• the tabs do not show up at all without a "style" attribute that sets a height for the tabs.
• there's hard-coded blue-backgrounds for the active-tab that you cannot get rid of.
• it will crash if you use child components inside your component; you must have or as children.

Hi any updates on this issue?

I am also experiencing this issue.

translateX: isNaN(indicatorTransitionInterpolate) ? value * (WIDTH?WIDTH:0) : indicatorTransitionInterpolate,

For those wondering, you can make the suggested temp fix in node_modules/@rneui/base/dist/Tab/Tab.js:122

Hi any updates on this issue?

@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 isNaN fix, and it works for me, though it is a hack-fix.

Have the same issue. I don't like modifying anything in node_modules, so here is my hack...
Exploring the sources I noticed, that indicatorStyle overrides the buggy {translateX: indicatorTransitionInterpolate}.
So in my component with Tab I added:

const [indicatorX, setIndicatorX] = useState(0);
const windowWidth = Dimensions.get('window').width;
const tabWidth = windowWidth / TABS_LENGTH; // Specify your tabs amount

... And modified Tab props as the following:

onChange={e => {
setTab(e); // Whatever you do here
setIndicatorX(e * tabWidth); // Setting the right translateX value
}}
indicatorStyle={{
...mainStyles.tabIndicator, // Your custom styles if you have ones
transform: [{ translateX: indicatorX }], // Overriding the buggy string from the source
}}

Hope, it will help someone

Sadly that solution doesn't work for me.
The underline for the tabs are too wide for the last tab and it stretches off the screen. Bummer.

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.

translateX: isNaN(indicatorTransitionInterpolate) ? value * (WIDTH?WIDTH:0) : indicatorTransitionInterpolate,

It works for me. Thank you @DaryBeattie
But could you create a pr and merge these changes? So not to crash the app at least.

Hope it can be resolved quickly, thanks

I have temporarily stopped this error from crashing my app by changing Tab's indicator's Animated.View to transform to:

transform: [
    {
        translateX: isNaN(indicatorTransitionInterpolate) ? value * (WIDTH?WIDTH:0) : indicatorTransitionInterpolate,
    },
],

Hey, we encountered this issue and this fixed work for us. Hoping a PR can land soon.

translateX: isNaN(indicatorTransitionInterpolate) ? value * (WIDTH?WIDTH:0) : indicatorTransitionInterpolate,

It works for me. Thank you @DaryBeattie But could you create a pr and merge these changes? So not to crash the app at least.

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.
If this fix were committed to the repo, then it would apply to my built app as well.

Sadly, as a result, I have been ripping out the RNEUI Tabs from my app.......

Have the same issue. I don't like modifying anything in node_modules, so here is my hack... Exploring the sources I noticed, that indicatorStyle overrides the buggy {translateX: indicatorTransitionInterpolate}. So in my component with Tab I added: const [indicatorX, setIndicatorX] = useState(0); const windowWidth = Dimensions.get('window').width; const tabWidth = windowWidth / TABS_LENGTH; // Specify your tabs amount ... And modified Tab props as the following: onChange={e => { setTab(e); // Whatever you do here setIndicatorX(e * tabWidth); // Setting the right translateX value }} indicatorStyle={{ ...mainStyles.tabIndicator, // Your custom styles if you have ones transform: [{ translateX: indicatorX }], // Overriding the buggy string from the source }} Hope, it will help someone

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 ButtonGroup component instead of a Tab, but keeping the TabView underneath it.

This is still an issue. Any update on a fix?

This still seems to be an issue.

Sadly that solution doesn't work for me. The underline for the tabs are too wide for the last tab and it stretches off the screen. Bummer.

I should point out that I did get this to work for me.
The issue was that I had to subtract the horizontal-padding from the tabWidth. For example, if I have paddingHorizontal: 10 for my tabs, then I need to subtract 2X that (10 for each side) and then it works, like this:

const tabWidth = windowWidth / TABS_LENGTH - 20; // Specify your tabs amount

Patch for @rneui/base
I've implemented a patch for the @rneui/base package.
@rneui+base+4.0.0-rc.8.patch

You can try this!!!

const MyTabs = () => {
const [index, setIndex] = useState(0);
const windowWidth = Dimensions.get('window').width;
const tabWidth = windowWidth / TABS_LENGTH;

<Tab
value={index}
onChange={(e) => setIndex(e)}
indicatorStyle={{
...styles.tabIndicator,
transform: [{ translateX: index * tabWidth }],
}}
variant="primary"
containerStyle={{
backgroundColor: '#fff',
}}
>
<Tab.Item
title="Present"
titleStyle={styles.tabTitle}
/>
<Tab.Item
title="Absent"
titleStyle={styles.tabTitle}
/>

const styles = StyleSheet.create({
tabIndicator: {
backgroundColor: '#ffbb50',
height: 3,
},
tabTitle: {
fontSize: 14,
color: 'black',
},
tabViewItem: {
backgroundColor: 'transparent',
width: '100%',
},
tabContent: {
justifyContent: 'center',
alignItems: 'center',
},
});

export default MyTabs;