Can I make dynamic styles in React Native?

I usually do something along the lines of:

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

...

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

Every time View is rendered, a new style object will be instantiated with a random color associated with it. Of course, this means that the colors will change every time the component is re-rendered, which is perhaps not what you want. Instead, you could do something like this:

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

...

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

Yes you can and actually, you should use StyleSheet.create to create your 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'} } />

If you still want to take advantage of StyleSheet.create and also have dynamic styles, try this out:

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'    }});

Notice how the style property of the View is set as an array that combines your stylesheet with your dynamic styles.