CODEWITHSUNDEEP
javascriptreactjsreact-native
Thadeu Munhóz Cesário
Thadeu Munhóz Cesário

Reputation: 129

React native - Change styles dynamically

I have a dynamic menu that I created using a map method.

          {navigationOptions.map(option => {
              return (
                <TouchableOpacity key={option.code}
                  onPress={() => this.procedureOptionSelected(option.code)}
                >
                  <Text bold style={header.NavigationBarOption}>
                    {option.type}
                  </Text>
                </TouchableOpacity>
              );
            })}

However, I need an underline when I press a menu option.

So let's assume, that I pressed the first option. So, in the first option, there must be an underscore.

But I don't know how to do this in react native. Could someone help me with an idea?

Upvotes: 1

Views: 2941

Answers (1)

MoKhajavi75
MoKhajavi75

Reputation: 2702

You can add a style prop to TouchableOpacity and check if this is the selected button like this:

<TouchableOpacity
  style={{ borderBottomWidth: this.state.selected === option.code ? 1 : 0 }}
  onPress={() => this.setState({ selected: option.code })
>
...
</TouchableOpacity>

Also I guess you can use this.procedureOptionSelected() since you set that option.code in there too!

Upvotes: 4

Related Questions