How to toggle item title prop

[firashamila33]

Hello , I want to know how to display and show the the TabNavigator.Item title prop depending an if the item is selected or not

here my Tabnavigator

<TabNavigator tabBarStyle={styles.tabBar}>
         <TabNavigator.Item
            title="Localisation" // <<---- I wan to show this title only if item is selected
            titleStyle={styles.tabTitle}
            selectedTitleStyle={styles.tabTitleActive}
            selected={selectedTab === 'Localisation'}
            onPress={() => this.setState({selectedTab: 'Localisation'})} //
            renderIcon={() => <FeatherIcon name={'map-pin'} selected={false}/> }
            renderSelectedIcon={() => <FeatherIcon name={'map-pin'} selected={true} /> }
            // badgeText="1"
            >
            <Localisation/>
          </TabNavigator.Item>

          <TabNavigator.Item
            title="Home"  // <<---- I wan to show this title only if item is selected
            titleStyle={styles.tabTitle}
            selectedTitleStyle={styles.tabTitleActive}
            selected={selectedTab === 'Home'}
            onPress={() => this.setState({selectedTab: 'Home'})} // <--navigate hilm
            renderIcon={() => <FeatherIcon name={'home'} selected={false}/> }
            renderSelectedIcon={() => <FeatherIcon name={'home'} selected={true} /> }
            // badgeText="1"
            >
            <Home/>
          </TabNavigator.Item>
 </TabNavigator>

[firashamila33]

the only solution that I found is to play with the title Style (backgrounColor, fontSize, color) which is not quite good , So I hope to find a better solution here my TabNavigator Component

<TabNavigator tabBarStyle={styles.tabBar}>       
          <TabNavigator.Item
            title="Home"
            titleStyle={{ backgroundColor: "transparent",
                          fontSize: parseInt(`${selectedTab === 'Home' ? 10 : 5}`),
                          color: `${this.state.selectedTab === 'Home' ? '#010a1c' : '#fbf9f0'}`,
                        }}
            selectedTitleStyle={styles.tabTitleActive}
            selected={selectedTab === 'Home'}
            onPress={() => this.setState({selectedTab: 'Home'})}
            renderIcon={() => <FeatherIcon name={'home'} selected={false}/> }
            renderSelectedIcon={() => <FeatherIcon name={'home'} selected={true} /> }
            >
            <Home/>
          </TabNavigator.Item>
          <TabNavigator.Item
            title="Profile"
            titleStyle={{ backgroundColor: "transparent",
                          fontSize: parseInt(`${selectedTab === 'User' ? 10 : 5}`),
                          color: `${this.state.selectedTab === 'User' ? '#010a1c' : '#fbf9f0'}`,
                        }}
            selectedTitleStyle={styles.tabTitleActive}
            selected={selectedTab === 'User'}
            onPress={() => this.setState({selectedTab: 'User'})} 
            renderIcon={() => <FeatherIcon name={'user'} selected={false}/> }
            renderSelectedIcon={() => <FeatherIcon name={'user'} selected={true} /> }
            >
            <Profile/>
          </TabNavigator.Item>
        </TabNavigator>