React-native-tab-view: can't dynamic change Tablabel fonsize

[chen504554911]

dynamic change Tablabel fonsize and it will incomplete display.

navigationState={tabRoute}
renderScene={SceneMap({
troubleTicket: () => (),
requestSupport: () => (),
commandMission: () => (),
onSiteAcceptance: () => (),
riskOperation: () => (),
onSiteCooperation: () => (),
businessOpening: () => (),
resourceChange: () => (),
jobPlan: () => (),
})}
renderTabBar={props =>
{...props}
style={styles.tabViewStyle}
tabStyle={styles.tabBarStyle}
scrollEnabled={true}
renderIndicator={() => (null)}
renderLabel={({ route, focused, color }) => {
if (focused)
return (
{route.title}

)
return (
{route.title}

)
}}
/>
}
onIndexChange={this.onTabChange}
initialLayout={{ width: Dimensions.get('window').width }}
lazy
/>

[chakrihacker]

The code you have written is wrong, you have to close Text tag
Closing as it's not an issue

[chen504554911]

<TabView
   navigationState={tabRoute}
   renderScene={SceneMap({
    troubleTicket: () => <WaitDoneInfo />,
    requestSupport: () => <WaitDoneInfo />,
    commandMission: () => <WaitDoneInfo />,
    onSiteAcceptance: () => <WaitDoneInfo />,
    riskOperation: () => <WaitDoneInfo />,
    onSiteCooperation: () => <WaitDoneInfo />,
    businessOpening: () => <WaitDoneInfo />,
    resourceChange: () => <WaitDoneInfo />,
    jobPlan: () => <WaitDoneInfo />
   })}
   renderTabBar={props => (
    <TabBar
     {...props}
     style={styles.tabViewStyle}
     tabStyle={styles.tabBarStyle}
     scrollEnabled={true}
     renderIndicator={() => null}
     renderLabel={({ route, focused, color }) => {
      if (focused){
       return <Text style={{ color, fontSize: 15 }}> {route.title} </Text>;
      }
      return <Text style={{ color, fontSize: 15 }}> {route.title} </Text>;
     }}
    />
   )}
   onIndexChange={this.onTabChange}
   initialLayout={{ width: Dimensions.get("window").width }}
   lazy
/>

it is wrong? i mean how can i dynamic change Tab label fonsize

[chakrihacker]

fontSize is same for both focused and non focused elements!!

[chen504554911]

renderTabBar={props => <TabBar {...props} style={styles.tabViewStyle} tabStyle={styles.tabBarStyle} scrollEnabled={true} renderIndicator={() => (null)} labelStyle={{ fontSize: 17 }} renderLabel={({ route, focused, color }) => { if (!focused) return ( <Text style={{ color, fontSize: 14 }}> {route.title} </Text> ) return ( <Text style={{ color, fontSize: 17 }}> {route.title} </Text> ) }} /> } onIndexChange={this.onTabChange} initialLayout={{ width: Dimensions.get('window').width }} lazy />
sorry,my code ，In fact, this is the case。so fontSize can change? i changed and Showing a bit of a problem

[chen504554911]

[satya164]

You can set custom height and width in tabStyle to make sure your text fits.

[chen504554911]

I set custom height and width,but i does't work.

[chen504554911]

tabBarStyle: { width: Dimensions.get('window').width / 2, height: 100 },

[349989153]

renderLabel={({ route, focused, color }) => {
  if (focused){
    return <Text style={{ color, fontSize: 15, minWidth: 100, textAlign: 'center' }}> {route.title} </Text>;
  }
  return <Text style={{ color, fontSize: 15, minWidth: 100, textAlign: 'center' }}> {route.title} </Text>;
}}

Try to give a minWidth to the Text element. @chen504554911

[whereiscode]

@chakrihacker Your answer doesn't mean anything to solve the problem. You can't solve the problem. By closing the problem, you close the opportunity for others to solve the problem

[ajithes1]

<TabBar {...props} renderLabel={this._renderLabel} />

_renderLabel = ({ route, focused }) => { if (focused) { return <Text style={{ fontSize: 15 }}> {route.title} </Text>; } return <Text style={{ fontSize: 18 }}> {route.title} </Text>; }