What is the most performant way for dynamic styling in React-Native?

Question

In React-Native, you can use Stylesheet to create css-like stylesheets. The main reason of using styleshee.create in favor of plain js-objects is increased performance. However, you often might want to style components dynamically, often based on their props. I basically found three approaches of doing this:

Note for the following examples: Consider const styles ... to be declared outside of the Component, as it's a common pattern and you might want to share styles between different Components. Consider everything below the tree dots as part of the render function.

1. Using an array of styles:

   const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}}) ... return <View style={[styles.viewStyle, {color: this.props.color}]} /> 

2. Using Stylesheet.flatten:

   const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}}) ... const flattenedStyle = StyleSheet.flatten(styles.viewStyle, {{color: this.props.color}}) return <View style={flattenedStyle} /> 

3. Using a function to create the stylesheet:

   const styles = (color) => StyleSheet.create({     viewStyle: {         backgroundColor:'red',         color: color         }     }) ... const style = styles(this.props.color).viewStyle return <View style={style} /> 

I am wondering which approach is the best regarding to performance, or if there even is another, more performant way? I think Option 2 and 3 are no way to go at all, because dynamically creating new stylesheets on prop-changes undermines the whole purpose of stylesheets. I am happy for any thought or hints on this subject!

Answer 1

Here you can do dynamic styling in react native for each styling.

Like this

<Text style={styles.simpleText('red')}>Required field</Text>  // In styling const styles = StyleSheet.create({      simpleText: (colorProp = 'black') => ({ // default black set            fontSize: 14,            color: colorProp,      }) }) 

and you can also pass any data type for conditional styling

Answer 2

One of the approach

// homeSreen <View style={styles.filterButton(isSelected)}>   <Text> Strawberry </Text> </View>  // styles.js import { StyleSheet } from 'react-native'; import { Colors } from '../../theme';  export default StyleSheet.create({   container: {     backgroundColor: Colors.lighter,   },    filterButton: isSelected => ({    padding: 15,    backgroundColor: isSelected? Colors.background.primary: Colors.background.secondary   }), });