React Native StyleSheet optimization

user_925307 0
Viewed 560

What's the most efficient (and why)?

"Cascading" styles:

export function Title({ children, small }) {
  return <Text style={[styles.title, small && styles.small]}>{children}</Text>;
}

const styles = StyleSheet.create({
  title: {
    fontFamily: "Roboto",
    fontWeight: "500",
    fontSize: 20
  },
  small: {
    fontSize: 14
  }
});

Or unique style:

export function Title({ children, small }) {
  return (
    <Text style={small ? styles.titleSmall : styles.title}>{children}</Text>
  );
}

const title = {
  fontFamily: theme.fontFamily,
  fontWeight: "500"
};

const styles = StyleSheet.create({
  title: {
    ...title,
    fontSize: 20
  },
  titleSmall: {
    ...title,
    fontSize: 14
  }
});

Note to myself: http://wiki.c2.com/?PrematureOptimization

react-native optimization
1 Answers

The cascading style is the best one in case of React Native.

Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.

And also you can try extracting common components CSS, no matter how simple they seem, you avoid having to define inline styles over and over again. Here is the note from RN team and medium link

user_90021630
Related