Passing props into external stylesheet in React Native? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Passing props into external stylesheet in React Native? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

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')
}
We are here to answer your question about Passing props into external stylesheet in React Native? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji