2

In a react native component, I have multiple variants for my button. Size, fill (solid, outline, transparent), and skin (primary, secondary, warning, info, etc.), among several other variants.

Is there any performance difference between these three approaches? Also, what is the recommended approach?

(1) Creating multiple stylesheets - Would maybe have like 20-30 objects for each intersection of variants

const getStyles = () => {
  // Solid Fill
  const solidPrimary = StyleSheet.create({
    base: {
      color: "blue"
    },
    loading: {
      color: "darkblue"
    },
    disabled: {
      color: "darkblue"
    }
  });

  const solidSecondary = StyleSheet.create({
    base: {
      color: "lightblue"
    },
    loading: {
      color: "skyblue"
    },
    disabled: {
      color: "skyblue"
    }
  });

  // Outline Fill
  const outlinePrimary = StyleSheet.create({
    base: {
      color: "white"
      borderColor: "blue"
    },
    loading: {
      color: "white"
      borderColor: "darkblue"
    },
    disabled: {
      color: "white"
      borderColor: "darkblue"
    }
  });
  // etc.

  return {
    solid: {
      primary: solidPrimary,
      secondary: solidSecondary
      // etc.
    },
    outline: {
      primary: outlinePrimary,
      secondary: outlineSecondary
      // etc.
    }
    // etc.
  }
}

vs. (2) same as above but declaring it in one object

const getStyles = () => {
  return {
    solid: {
      primary: StyleSheet.create({...}),
      secondary: StyleSheet.create({...}),
      // etc.
    },
    outline: {
      primary: StyleSheet.create({...}),
      secondary: StyleSheet.create({...}),
      // etc.
    }
    // etc.
  }
}

vs. (3) same as above but referencing an external object
Cons: The code can get repetitive in the StyleObj, and can get a bit overwhelming to write

const getStyles = ({fill, skin}) => {
  return StyleSheet.create({
    base: {
      // Referencing the object takes care of the fill and skin variants
      color: ...styleObj[fill][skin].base.color
      // other styles
    },
    loading: {
      color: ...styleObj[fill][skin].loading.color
      // other styles
    },
    disabled: {
      color: ...styleObj[fill][skin].disabled.color
      // other styles
    },

  });
}

// styleObj.js
  export const styleObj = {
    solid: {
      primary: {
        base: {...},
        loading: {...},
        disabled: {...},
      },
      secondary: {
        base: {...},
        loading: {...},
        disabled: {...},
      },
    },
    outline: {
      primary: {
        base: {...},
        loading: {...},
        disabled: {...},
      },
      secondary: {
        base: {...},
        loading: {...},
        disabled: {...},
      },
    },
    // etc.        
  }
TylerH
  • 20,799
  • 66
  • 75
  • 101
wongz
  • 3,255
  • 2
  • 28
  • 55
  • There are some benefits to use `StyleSheet` in react-native, first is code quality, you could use it in separate file to have more readibilty, second using `StyleSheet` prevents to create style object in each component rendering. actually, 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. – Mahmonir Bakhtiyari Oct 01 '21 at 20:38
  • You could find more in https://stackoverflow.com/questions/38958888/react-native-what-is-the-benefit-of-using-stylesheet-vs-a-plain-object – Mahmonir Bakhtiyari Oct 01 '21 at 20:42
  • Thanks. I looked at that several times, but I think this extends that question a bit into best practices when dealing with multiple variants (like when styling a button) in terms of performance and any other best practices people may suggest. As it relates to my 3 examples, I use StyleSheet.create() in all 3 examples, so I'm still seeking input on which is "best" or most performant or "standard practice" when styling multiple variants – wongz Oct 01 '21 at 21:02

0 Answers0