Can I create dynamic styles in React Native?

Question

Suppose I have a component with this render:

<View style={jewelStyle}></View> 

Where jewelStyle =

  { borderRadius: 10, backgroundColor: '#FFEFCC', width: 20, height: 20, }, 

How can I make the background color dynamic and assigned randomly? I tried

  { borderRadius: 10, backgroundColor: getRandomColor(), width: 20, height: 20, }, 

But this makes all instances of View the same, I want each to be unique.

Any tips?

Answer 1

I usually do something like:

 <View style={this.jewelStyle()} /> 

...

 jewelStyle = function(options) { return { borderRadius: 12, background: randomColor(), } } 

Each time a View is rendered, a new style object is created with a random color associated with it. Of course, this means that the colors will change every time you re-render the component, which may not be what you need. Instead, you can do something like this:

 var myColor = randomColor() <View style={jewelStyle(myColor)} /> 

...

 jewelStyle = function(myColor) { return { borderRadius: 10, background: myColor, } } 

Answer 2

Yes, you can actually use StyleSheet.create to create your own styles.

 import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; class Header extends Component { constructor(props){ super(props); } render() { const { title, style } = this.props; const { header, text } = defaultStyle; const combineStyles = StyleSheet.flatten([header, style]); return ( <View style={ combineStyles }> <Text style={ text }> { title } </Text> </View> ); } } const defaultStyle = StyleSheet.create({ header: { justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', height: 60, paddingTop: 15, shadowColor: '#000', shadowOffset: { width: 0, height: 3 }, shadowOpacity: 0.4, elevation: 2, position: 'relative' }, text: { color: '#0d4220', fontSize: 16 } }); export default Header; 

And then:

 <Header title="HOME" style={ {backgroundColor: '#10f1f0'} } /> 

Answer 3

If you still want to use StyleSheet.create and also have dynamic styles, try this:

 const Circle = ({initial}) => { const initial = user.pending ? user.email[0] : user.firstName[0]; const colorStyles = { backgroundColor: randomColor() }; return ( <View style={[styles.circle, colorStyles]}> <Text style={styles.text}>{initial.toUpperCase()}</Text> </View> ); }; const styles = StyleSheet.create({ circle: { height: 40, width: 40, borderRadius: 30, overflow: 'hidden' }, text: { fontSize: 12, lineHeight: 40, color: '#fff', textAlign: 'center' } }); 

Note that the style property for View is set as an array that combines your stylesheet with your dynamic styles.

Answer 4

If the problem occurred syntactically. It worked for me

 <Text style={StyleSheet.flatten([styles.textStyle,{color: 'red'}])}> Hello </Text> const styles = StyleSheet.create({ textStyle :{ textAlign: 'center', fontFamily: 'Arial', fontSize: 16 } }); 

Answer 5

You need something like this:

 var RandomBgApp = React.createClass({ render: function() { var getRandomColor = function() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; }; var rows = [ { name: 'row 1'}, { name: 'row 2'}, { name: 'row 3'} ]; var rowNodes = rows.map(function(row) { return <Text style={{backgroundColor:getRandomColor()}}>{row.name}</Text> }); return ( <View> {rowNodes} </View> ); } }); 

In this example, I take an array of strings containing data for the rows in the component and map it to the array of Text components. I use inline styles to call the getRandomColor function every time I create a new Text component.

The problem with your code is that you define the style once, and therefore getRandomColor only gets called once - when you define the style.

Answer 6

The easiest one is mine:

 <TextInput style={[ styles.default, this.props.singleSourceOfTruth ? { backgroundColor: 'black' } : { backgroundColor: 'white' } ]}/> 

Answer 7

I know that there are several answers, but I think the best and easiest is to use the “To Change” state is the state’s goal.

 export default class App extends Component { constructor(props) { super(props); this.state = { style: { backgroundColor: "white" } }; } onPress = function() { this.setState({style: {backgroundColor: "red"}}); } render() { return ( ... <View style={this.state.style}></View> ... ) } 

}

Answer 8

You can bind a state value directly to a style object. Here is an example:

 class Timer extends Component{ constructor(props){ super(props); this.state = {timer: 0, color: '#FF0000'}; setInterval(() => { this.setState({timer: this.state.timer + 1, color: this.state.timer % 2 == 0 ? '#FF0000' : '#0000FF'}); }, 1000); } render(){ return ( <View> <Text>Timer:</Text> <Text style={{backgroundColor: this.state.color}}>{this.state.timer}</Text> </View> ); } } 

Answer 9

Yes, you can create dynamic styles. You can pass values ​​from components.

First create StyleSheetFactory.js

 import { StyleSheet } from "react-native"; export default class StyleSheetFactory { static getSheet(backColor) { return StyleSheet.create({ jewelStyle: { borderRadius: 10, backgroundColor: backColor, width: 20, height: 20, } }) } } 

then use it in your component as follows

 import React from "react"; import { View } from "react-native"; import StyleSheetFactory from './StyleSheetFactory' class Main extends React.Component { getRandomColor = () => { var letters = "0123456789ABCDEF"; var color = "#"; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; }; render() { return ( <View> <View style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle} /> <View style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle} /> <View style={StyleSheetFactory.getSheet(this.getRandomColor()).jewelStyle} /> </View> ); } } 

Answer 10

Using the operator distribution object "..." works for me:

 <View style={{...jewelStyle, ...{'backgroundColor': getRandomColor()}}}></View> 

Answer 11

If you use a screen with filters, for example, and want to set the background of the filter as to whether it was selected or not, you can do:

 <TouchableOpacity style={this.props.venueFilters.includes('Bar')?styles.filterBtnActive:styles.filterBtn} onPress={()=>this.setFilter('Bar')}> <Text numberOfLines={1}> Bar </Text> </TouchableOpacity> 

On which set is the filter installed:

 setVenueFilter(filter){ var filters = this.props.venueFilters; filters.push(filter); console.log(filters.includes('Bar'), "Inclui Bar"); this.setState(previousState => { return { updateFilter: !previousState.updateFilter }; }); this.props.setVenueFilter(filters); } 

PS: the function this.props.setVenueFilter(filters) is a redundant action, and this.props.venueFilters is a redundant state.

Answer 12

If someone needs to apply the conditions

  selectedMenuUI = function(value) { if(value==this.state.selectedMenu){ return { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingVertical: 10, backgroundColor: 'rgba(255,255,255,0.3)', borderRadius: 5 } } return { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingVertical: 10 } }