Breaking News: Grepper is joining You.com. Read the official announcement!

Dynamic Styles In React Native

Javasper answered on May 23, 2021 Popularity 8/10 Helpfulness 3/10

answer Dynamic Styles In React Native

related react native dynamic style

Dynamic Styles In React Native

Comment

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*/

Popularity 8/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: dynamic javascript react-native styles

Link to this answer
Share Copy Link

Contributed on Oct 08 2022

Javasper

0 Answers Avg Quality 2/10

Closely Related Answers

react native dynamic style

Comment

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

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

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: dynamic

Link to this answer
Share Copy Link

Contributed on May 23 2021

Sorann

0 Answers Avg Quality 2/10

Dynamic Styles In React Native

Contents

More Related Answers

Dynamic Styles In React Native

Closely Related Answers

react native dynamic style

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.