Passing props into external stylesheet in React Native?

Question

I'm new to React and React Native. At the moment for each component I'm breaking the code into 2 separate files:

1. index.js for all the React code, and;
2. styles.js for the StyleSheet

Is there a way to pass props into the external StyleSheet?

Example: index.js:

render() {
  const iconColor = this.props.color || '#000';
  const iconSize = this.props.size || 25;

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

Example styles.js:

const styles = StyleSheet.create({
  icon : {
    color: iconColor,
    fontSize: iconSize
  }
});

The code above does not work, but it's more there just to get the point across of what I'm trying to do. Any help is much appreciated!

Answer 1

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

export const styles = (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

export const styles = (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} />  ); 

Answer 2

i'm sending noFooter boolean prop in a style sheet

   <View style={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),
   }),

Answer 3

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

// styles.js

export default class StyleSheetFactory {
    static getSheet(iconSize, iconColor) {
        return StyleSheet.create({
            icon : {
                color: iconColor,
                fontSize: iconSize
            }
        })
    }
}

// index.js

render() {
    let myStyleSheet = StyleSheetFactory.getSheet(64, 'red')
}