Passing Props Into External Stylesheet In React Native?

I'm new to React and React Native. At the moment for each component I'm breaking the code into 2 separate files: index.js for all the React code, and; styles.js for the StyleShee

Solution 1:

I rather to have my styles in a separate file styles.js. Inside styles.js:

exportconststyles = (props) => StyleSheet.create({
        icon : {
        color: props.iconColor,
        fontSize: props.iconSize
      }
    }

Inside your main class you can pass the value

return (
    <Icon style={styles(this.props).icon} />
  );

Alternatively you can those value directly so it would be

exportconststyles = (iconColor,iconSize) => StyleSheet.create({
    icon : {
    color: iconColor,
    fontSize: iconSize
  }
}

and inside your main class

return (
    <Icon style={styles(this.props,iconColor, 
this.props.iconSize).icon} />
 );

Solution 2:

i'm sending noFooter boolean prop in a style sheet

<Viewstyle={styles.mainFooterCont(noFooter)}><Text> Testing </Text></View>

and receiving it like

mainFooterCont:noFooter=>({flexDirection:'row',justifyContent:'space-between',alignItems:'flex-end',paddingBottom:noFooter?0 :20,paddingTop:Metrics.ratio(noFooter?0 :5),}),

Solution 3:

Create a class that takes iconColor and iconSize as arguments and returns a StyleSheet object

// styles.jsexportdefaultclassStyleSheetFactory {
    staticgetSheet(iconSize, iconColor) {
        returnStyleSheet.create({
            icon : {
                color: iconColor,
                fontSize: iconSize
            }
        })
    }
}

// index.jsrender() {
    let myStyleSheet = StyleSheetFactory.getSheet(64, 'red')
}

Solution 4:

Just wrap stylesheet in a function where you can optionally pass props.

Instead of:

const styles = StyleSheet.create({
  Title: { color: 'white' }
});

You do:

conststyles = (props?: any) => StyleSheet.create({
  Title: { color: 'white' }
});

And now when you add them to your components, instead of

style={styles.Title}

You do:

style={styles(propsObjectHere).Title}

and since this is optional and you have no props to pass, just do:

style={styles().Title}

P.S. ignore the type if you, for some reason, are not using TypeScript :P

Solution 5:

Answer :

render() {

   const iconColor = this.props.color || '#000';
   const iconSize = this.props.size || 25;

   return (
   <Iconstyle={{...styles.icon,color:iconColor, fontSize:iconSize }} />

Example styles.js:

conststyles=StyleSheet.create({icon : {
    color:iconColor,
    fontSize:iconSize
  }})