Tab label gets faded out while swiping

[vinaygregoryjohn183]

Current behavior

Tab label gets faded while swiping between tabs.

Expected behavior

Tab label should not fade-out while swiping between tabs.

Reproduction

Sharing the code below

Platform

• [X] Android
• [ ] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package	version
react-native-tab-view 2.16.0
react-native 0.66.4
node 14.17.0
npm or yarn 6.14.14

Code:

import React from 'react'; import { SceneMap, TabBar, TabBarIndicator, TabView, } from 'react-native-tab-view';

import {TabLabelProps, TabsProps} from './TabsTypes'; import {Text} from '../text'; import {Icon} from '../icons'; import {INDICATOR_WIDTH_MARGIN_MAP} from './constants'; import {useTabStyles} from './useTabsStyles';

const TabLabel = ({focused, title}: TabLabelProps) => { return ( <Text fontColor={focused ? 'primary' : 'grayPrimary'} fontWeight={focused ? 'bold' : 'regular'}> {title} ); };

const Tabs = ({ indicatorWidth }: TabsProps) => { const styles = useTabStyles(indicatorWidth);

const renderScene = useCallback( ({ route }: { route: { key: string } }) => { switch (route.key) { case CustomerDetailsTabKeys.Summary: return ; case CustomerDetailsTabKeys.Order_History: return (

      );
    default:
      return null;
  }
},
[customerData, storeId]

);

const tabRoutes = useMemo(() => { return [ { key: CustomerDetailsTabKeys.Summary, title: translate('screen:customer-details.text:summary'), testID: accessibilityTestID.customerDetails.summaryTab }, { key: CustomerDetailsTabKeys.Order_History, title: translate('screen:customer-details.text:order-history'), testID: accessibilityTestID.customerDetails.orderHistoryTab } ]; }, []);

const onIndexChange = useCallback( (index) => { if (tabRoutes[index].key === CustomerDetailsTabKeys.Order_History) { EventEmitter.emit(EventType.MerchantOrderListVisited, { source: ScreenName.CUSTOMER_DETAILS }); } if (setRouteIndex) setRouteIndex(index); }, [setRouteIndex, tabRoutes] );

const initialLayout = { width: metrics.screenWidth };

const navigationState={{ index: routeIndex, routes: tabRoutes }}

return (
    <TabView
        renderTabBar={tabBarProps => (
            <TabBar
                navigationState={navigationState}
                renderScene={renderScene}
                onIndexChange={onIndexChange}
                initialLayout={initialLayout}
                scrollEnabled={true}
                indicatorStyle={styles.indicator}
                renderIcon={({route, focused}) => {
                    if (route.icon) {
                        return (
                            <Icon
                                name={
                                    focused && route.focusedIcon
                                        ? route.focusedIcon
                                        : route.icon
                                }
                                color={focused ? 'primary' : 'grayPrimary'}
                                size={24}
                            />
                        );
                    }
                    return null;
                }}
                renderIndicator={indicatorProps => {
                    const tabWidth = indicatorProps.getTabWidth(
                        navigationState.index,
                    );
                    const width =
                        tabWidth -
                        INDICATOR_WIDTH_MARGIN_MAP[
                            indicatorWidth || 'full'
                        ] *
                            2;
                    return (
                        <TabBarIndicator
                            {...indicatorProps}
                            width={width}
                        />
                    );
                }}
                style={styles.tab}
                renderLabel={
                        ({route, focused}) => (
                              <TabLabel
                                  focused={focused}
                                  title={route.title}
                              />
                          )
                }
            />
        )}
    />
);

}; export {Tabs, SceneMap, TabLabel};

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-pager-view

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-tab-view (found: 2.16.0, latest: 3.1.1)
• react-native (found: 0.66.4, latest: 0.69.1)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[gokugen]

Hello any updates ?

[okwasniewski]

Hey @gokugen, can you provide a minimal reproduction of this issue using this snack?

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.