Tab icon color only change after two clicks

[chuabingquan]

Current behaviour

Tabs must be clicked twice to render the correct active icon color

Expected behaviour

Icon in selected tab will render the correct active icon color immediately after clicking on said tab

Code sample

import React, { useState, useMemo } from 'react'
import { View, Text, StyleSheet, Dimensions, SafeAreaView } from 'react-native'
import { Provider as PaperProvider, DefaultTheme, BottomNavigation } from 'react-native-paper'
import { TabView, TabBar, SceneMap } from 'react-native-tab-view'
import { Ionicons } from '@expo/vector-icons'

import One from './src/views/One'
import Two from './src/views/Two'
import Three from './src/views/Three'
import Four from './src/views/Four'

const routes = [
  { key: 'test1', title: 'One', icon: 'md-list', view: One },
  { key: 'test2', title: 'Two', icon: 'md-list', view: Two },
  { key: 'test3', title: 'Three', icon: 'md-list', view: Three },
  { key: 'test4', title: 'Four', icon: 'md-list', view: Four },
]

const theme = {
  ...DefaultTheme,
  roundness: 2,
  colors: {
    ...DefaultTheme.colors,
    primary: '#fff',
  }
}

export default function App () {
  const [navIndex, setNavIndex] = useState(0)
  const [navSettings, setNavSettings] = useState(routes.map(route => {
    return { key: route.key, title: route.title }
  }))
  const [mappings, setMappings] = useState(routes.reduce((acc, route) => {
    return Object.assign({}, acc, { [route.key]: route.view })
  }, {}))

  const renderIcon = ({ route, focused }) => {
    let iconColor = focused ? "#6d578b": "#c2c3c8"
    return (
      <Ionicons name="md-contact" size={23} color={iconColor} />
    )
  }

  return (
    <PaperProvider theme={theme}>

    <SafeAreaView style={{flex: 1}}>
    <TabView
      timingConfig={{ duration: 0 }}
      tabBarPosition="bottom"
      navigationState={{
        index: navIndex,
        routes: navSettings
      }}
      swipeEnabled={false}
      renderScene={SceneMap(mappings)}
      onIndexChange={setNavIndex}
      initialLayout={{ width: Dimensions.get('window').width }}
      renderTabBar={(props) => {
        return (
          <TabBar
            {...props}
            renderIndicator={() => null}
            onTabPress={({ route }) => {
              // console.log(route)
            }}
            renderIcon={renderIcon}
            renderLabel={() => null}
            activeColor="#6d578b"
            inactiveColor="#c2c3c8"
            indicatorStyle={{ backgroundColor: '#000' }}
            style={{ backgroundColor: '#fff' }}
          />
        )
      }}
      />
      </SafeAreaView>
    </PaperProvider>
  )
}

https://snack.expo.io/@chuabingquan/61680e

Screenshots (if applicable)

What have you tried

Found out that setting timingConfig={{ duration: 0 }} causes this issue

Your Environment

software	version
ios or android	12.4
react-native	https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz
react-native-tab-view	^2.10.0
react-native-gesture-handler	~1.3.0
react-native-reanimated	~1.1.0
node	v10.16.0
npm or yarn	1.10.1

[traviscrampton]

I am having this same issue, but I haven't been able to get the sliding animations to work when I press on a tab. Were you able to find a work-around for this?

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on 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 the issue.