React-native-tab-view: How to show tab lebel in small Letter

[ashusdn]

Expected behaviour

How to change tab text from upper case to lower case: 'First','Second'

Actual behaviour

Currently, All tabs appear in Upper case for ex: 'FIRST','SECOND'

Code sample, screenshots

routes: [
{ key: '1', title: 'Status' },
{ key: '2', title: 'Media' },
{ key: '3', title: 'Log' },
],

What have you tried

[hannahblair]

+1

[caiorios]

You can use the renderLabel prop like this:

state = {
    index: 0,
    routes: [
      { key: '1', title: 'Tab One', icon: 'tab-one-icon' },
      { key: '1', title: 'Tab Two', icon: 'tab-two-icon' }
    ]
  };

_renderLabel = ({ route }) => (
    <Text style={s.tabBarLabel}>{route.title}</Text>
  );

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

[satya164]

Use getLabelText

[arnoldbird]

Here are two examples of a renderFooter callback, one with renderLabel and one with getLabelText.

Example with renderLabel:

_renderFooter(props) {

  _renderLabel = ({ route }) => (
    <Text style={styles.tablabel}>{route.title}</Text>
  );

  return (
    <TabBar 
      {...props} 
      style={styles.tabbar}
      tabStyle={styles.tab}
      renderLabel={this._renderLabel}
    />
  )
}

Example with getLabelText:

_renderFooter(props) {

  _getLabelText = ({ scene }) => (
    'you probably want to do something dynamic here'
  );

  return (
    <TabBar 
      {...props} 
      style={styles.tabbar}
      tabStyle={styles.tab}
      getLabelText={this._getLabelText}
    />
  )
}