Annoyingly, StyleSheet.create only accepts named styles -> AnyStyle map. This means if you have common utilities styles, you have to spread them into each style. Here's what I mean:

// Shared example for bgColor
const bgColor = {
  GREEN: { backgroundColor: '#238636' },
  WHITE: { backgroundColor: '#fff' },
}

// Usage
const style = StyleSheet.create({
  greenHeader: { ...bgColor.GREEN, ...padding.p4 },
  whitePage: { ...bgColor.WHITE, ...padding.p4, ...padding.pb6 },
})

I don't think the runtime cost of spreading likely worth consideration. I mainly just find it annoying. Since StyleSheet.create is just an identity, I created a similar function that defines NamedStyles in terms of StyleProp instead of any style:

type CreateNamedStyles<T> = { readonly [P in keyof T]: StyleProp<ViewStyle | TextStyle | ImageStyle> }
const createStyle = <T extends CreateNamedStyles<any>>(styles: T): T => styles

// Usage
const style = createStyle({
  greenHeader: [bgColor.GREEN, padding.p4],
  whitePage: [bgColor.WHITE, padding.p4, padding.pb6],
})

It's pretty trivial, so I'm curious what your thoughts are and if you think it's worth adding? Just like StyleSheet.create it's basically just a type helper at this point, but it makes composition of static styles easier.

Edit: I played around a bit and createStyles is a bit unintuitive, since React Native doesn't recursively parse styles. So I basically scrapped it in favor of my createFlatStyles implementation. It has the same initial overhead as using spread, it's just easier to compose. If you think it's useful, I'll open a PR.

Hi @mrousavy,

In my app, I rely heavily on "inline" styles similar to what Tailwind does for the web but in RN. So I have a lot of arrays like:

<View style={[tw.f[1], tw.bg.red[500]]} />
// which is the same as {flex: 1, backgroundColor: "some hex for the special red color"}

so I got curious about possible perf penalties of that approach and started investigating if wrapping all those arrays in useMemo would be beneficial.

Trying a super-blunt test with rendering 10k views showed, surprisingly that useMemo performs worse in terms of memory while not giving any speed benefit at all, either if you render static styles or dynamic ones (which depends on some prop).

So I'm curious what was your take on that? Did you perform any benchmarks on your own?

Here is the code for the harness, which is pretty basic:

import React, {
  useEffect,
  useState,
  Profiler,
  ProfilerOnRenderCallback,
} from 'react';
import { View, ScrollView } from 'react-native';
import performance from 'react-native-performance';


// test cases, see later
import Test1 from './Test1';
import Test2 from './Test2';

const traceRender: ProfilerOnRenderCallback = (
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) =>
  performance.measure(id, {
    start: performance.timeOrigin + startTime,
    duration: actualDuration,
  });

const formatValue = (value: number, unit?: string) => {
  switch (unit) {
    case 'ms':
      return `${value.toFixed(1)}ms`;
    case 'byte':
      return `${(value / 1024 / 1024).toFixed(1)}MB`;
    default:
      return value.toFixed(1);
  }
};

function App() {
  let [flip, setFlip] = useState(true);

  useEffect(() => {
    //let metrics = performance.getEntriesByName('App.render()');
    //let metric = metrics[metrics.length - 1];
    // console.log(formatValue(metric.duration, undefined));

    requestAnimationFrame(() => {
      setFlip((s) => !s);
    });
  }, [flip]);

  return (
    // uncomment to see traces
    //<Profiler id="App.render()" onRender={traceRender}>
    <ScrollView style={{ flex: 1, paddingVertical: 40, paddingHorizontal: 20 }}>
      <View
        style={{
          flex: 1,
          flexDirection: 'row',
          flexWrap: 'wrap',
          padding: 4,
          backgroundColor: flip ? 'green' : 'red',
        }}>
        <Test1 isGreen={!flip} />
      </View>
    </ScrollView>
    //</Profiler>
  );
}

export default App;

Test1.tsx

import React from 'react';
import { View } from 'react-native';

export default ({ isGreen }) => {
  return (
    <>
      <View
        style={{
          height: 4,
          width: 4,
          margin: 4,
          backgroundColor: isGreen ? 'green' : 'red',
        }}
      />
...9999 more views like that

Test2.tsx

import React, { useMemo } from 'react';
import { View } from 'react-native';

export default ({ isGreen }) => {
  return (
    <>
      <View
        style={useMemo(
          () => ({
            height: 4,
            width: 4,
            margin: 4,
            backgroundColor: isGreen ? 'green' : 'red',
          }),
          [isGreen]
        )}
      />
...9999 more views like that

Both tests ran on iPhoneXS and have the same perf metrics (around 4fps with static styles, and 1-2 fps with dynamic, and 50-55 fps on UI) But non-memoized version uses around 150mb, while memoized 200