JAVASCRIPT

Dynamic Styles In React Native

export default function App() {
  const [r, setR] = useState(true);

  
    return (
    <View style={styles.container}>

<TouchableOpacity style={[styles.button, {backgroundColor: r? "blue":"yellow"}]}>
<Text style={{color:  r? "black":"blue"}}>
 Invoke Fancy Button
  </Text>

</TouchableOpacity> 

    </View>
  );
}

/*keep in mind you must keep your dynamic styling separate from your static stuff*/

react native dynamic style

//you can use a function to generate a styleSheet dynamically
styleFunction (option) {
  return {
    borderWidth: 2,
    margin: option,
  }
}

<View style={this.styleFunction(15)}>
	//things
</View>