CODEWITHSUNDEEP
react-native
Molly Harper
Molly Harper

Reputation: 2453

React Native update style of Component

I'm trying to update the style of my TouchableOpacity Component when props change. I call a function, which is responsible for returning the style. Within that function I log the value of area.included. It returns the correct value, however the styles do not update appropriately.

<TouchableOpacity style={this.getRowStyle(area)} onPress={() => this.navToArea(area)}>
  <Text>Some Random Text</Text>
</TouchableOpacity>

getRowStyle(area) {
  console.log('area included', area.included)
  if (area.included) {
    return styles.swipeContainer
  } else {
    return styles.swipeContainerOpacity
  }
}

const styles = StyleSheet.create({
  swipeContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
  },
  swipeContainerOpacity: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
    opacity: 0.2,
  },
})

Upvotes: 0

Views: 694

Answers (2)

Molly Harper
Molly Harper

Reputation: 2453

I ended up solving this by adding the conditions inline. I still think what I was doing should have worked. Potentially a react bug?

{area.included &&
<TouchableOpacity style={styles.swipeContainer} onPress={() => this.navToArea(area)}>
  <Text>Some Random Text</Text>
</TouchableOpacity>
}
{!area.included &&
<TouchableOpacity style={styles.swipeContainerOpacity} onPress={() => this.navToArea(area)}>
  <Text>Some Random Text</Text>
</TouchableOpacity>
}

Upvotes: 1

Jigar Shah
Jigar Shah

Reputation: 6223

if you just want to switch beetween two different style classes you can also add them into a condition like this:

<TouchableOpacity style={this.state.areaIncluded ? [styles.swipeContainer] : [styles.swipeContainerOpacity]} onPress={() => this.navToArea(area)}>
  <Text>Some Random Text</Text>
</TouchableOpacity>

Hope this can help you to start!!!

Upvotes: 0

Related Questions