Help: Material design styling

[David]

I like what you've done with the new PR. Any chance I could get some help here?

I'm wondering how to do the highlighted line above the selected text...

any help would be appreciated

[Ali Najafizadeh]

@derdav3 easy, just use borderBottomColor and borderBottomWidth style for every view.

[David]

@alinz thanks for the quick reply. I get the idea, but struggle with the code 😒

if I set the borderBottomColor & width I get this:

but of course I want it only wenn the tab is pressed
thanks for your help

[Ali Najafizadeh]

@derdav3 what you have to do is store the state some where, either in component state or redux/mobx.

for example,

const styles = StyleSheet.create({
  selectedTab: {
    borderBottomColor: 'red',
    borderBottomWidth: 1
  }
})

class Bar extends Component {
  constructor() {
    this.state = {
      selected: ''
    }
  }

  render() {
    const selected = this.state.selected

    return (
      <View>
        <View style={[selected == 'item1'? styles.selectedTab : null]}>
          <Text onPress={() => this.setState({ selected: 'item1' })}>Item 1</Text>
        </View>
        <View style={[selected == 'item2'? styles.selectedTab : null]}>
          <Text onPress={() => this.setState({ selected: 'item2' })}>Item 2</Text>
        </View>
        <View style={[selected == 'item3'? styles.selectedTab : null]}>
          <Text onPress={() => this.setState({ selected: 'item3' })}>Item 3</Text>  
        </View>
      </View>
    )
  }
}

obviously this is not a good code but it shows you how to switch styles based on state changes. So as you see from the example, if I click on either text, onPress function changes the state. Then react renders the whole component with the new state, now I compare the new state and apply the new style which has the borderBottomColor and width.

[Ali Najafizadeh]

@derdav3 i'm closing this ticket since it's not the tabbar issue. but please continue the discussion if you need more help.