Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tab Bar Image

See original GitHub issue

Is there any possible way to add the image icon before the value/tab name ? if yes please help me. i do like this but the text is not adjusted with the image. badges={[ <Text style={styles.badgeText}> <Image style={styles.badgeImage1} source={require("./Images/3.png")} />Personal </Text>, <Text style={styles.badgeText}> <Image style={styles.badgeImage} source={require("./Images/2.png")} />Doctor </Text>, <Text style={styles.badgeText}> <Image style={styles.badgeImage2} source={require("./Images/1.png")} />Security </Text> ]} values={["", "", ""]}

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:7 (4 by maintainers)

Top GitHub Comments

3reactions

kirankalyan5commented, Jul 4, 2018

Hi @sandeep0607 , you can do it this way.

create a function which renders inlineImage with text

  renderValueWithImage(text, imageUri) {
    return (
      <Text> 
        <Image source={imageUri} />
        {text}
      </Text>
      )
  }

Pass it to the values props.

  <SegmentedControlTab
          values={[this.renderValueWithImage('Creation', creation),this.renderValueWithImage('Group', group)]}
          selectedIndex={this.state.selectedIndex}
          onTabPress={this.handleSingleIndexSelect}
        />

img_e0b8b8892502-1