React-native-tab-view: Detected division by zero in AnimatedDivision

[quy1403]

When I use ScrollableTabView in Tab screen by wix react-native-navigation, I got the red screen with error "Detected division by zero in AnimatedDivision"

Expected behaviour

work well

Actual behaviour

I got the red screen with error "Detected division by zero in AnimatedDivision"

Code sample, screenshots

state = {
index: 0,
routes: [
{key: '1', title: 'TAB A'},
{key: '2', title: 'TAB B'},
],
};

_handleIndexChange = index =>
    this.setState({
        index,
    });

_renderBadge = ({route}) => {
    if (route.key === '2') {
        return (
            <Badge>{12}</Badge>
        );
    }
    return null;
};
_renderLabel = props => ({route, index}) => {
    const inputRange = props.navigationState.routes.map((x, i) => i);
    const outputRange = inputRange.map(
        inputIndex => (inputIndex === index ? COLORS.MAIN_COLOR : '#222')
    );
    const color = props.position.interpolate({
        inputRange,
        outputRange,
    });

    return (
        <Animated.Text style={[styles.label, {color}]}>
            {route.title}
        </Animated.Text>
    );
};
_renderHeader = props => (
    <TabBar
        {...props}
        scrollEnabled
        indicatorStyle={styles.indicator}
        style={styles.tabbar}
        tabStyle={styles.tab}
        renderLabel={this._renderLabel(props)}
        renderBadge={this._renderBadge}
        pressOpacity={1}
    />
);

_renderScene = ({route}) => {
    switch (route.key) {
        case '1':
            return (
                <FeeTab
                    navigator={this.props.navigator}
                />
            );
        case '2':
            return (
                <FeeTab
                    navigator={this.props.navigator}
                />
            );
        default:
            return null;
    }
};

renderPager(props) {
    return <TabViewPagerPan {...props} />;
}

render() {
    return (
        <PageTabBar>
            <StatusBar />
            <TabViewAnimated
                style={[styles.container, this.props.style]}
                navigationState={this.state}
                renderScene={this._renderScene}
                 renderHeader={this._renderHeader}
                onIndexChange={this._handleIndexChange}
                initialLayout={{
                    height: 0,
                    width: Dimensions.get('window').width,
                }}
                renderPager={this.renderPager}
                useNativeDriver
            />
        </PageTabBar>

What have you tried

[steppannws]

+1 Sometimes it's crashing with the same error.

[quy1403]

@satya164
@julienvincent

please help us, thanks u !

[satya164]

I'm not sure what PageTabBar is, but the error you are encountering will only happen if the width of the container is 0, i.e. the onLayout prop returns 0. If it only happens with wix navigation, then it's a bug with wix's library.

I pushed a hacky workaround here https://github.com/react-native-community/react-native-tab-view/tree/fix-layout which should avoid the issue. Let me know if it works.

Unrelated: useNativeDriver only works with TabViewPagerExperimental. You can't use it if you're using TabViewPagerPan

[quy1403]

@satya164 your fix worked for me. thanks so much!
Additionally, PageTabBar is just
style={{flex: 1, backgroundColor: 'white'}}
>
{this.props.children}

It may be a bug from wix navigation

[yishus]

chipping in also, i'm using wix's navigation library and @satya164's branch works great. Understand that it's a temporary fix, +1 that this is my case too

[ghost]

Still having this problem, any fix? The branch from @satya164 is no longer available.

[satya164]

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.