Advice needed for ReactJS Equivalent of React-Native-Web stylesheet.flatten

Question

So we are trying to remove React-Native-Web from our codebase, and I was wondering what the ReactJS equivalent of stylesheet.flatten was?

We are using it like this;

const flattenMyStylesheets = StyleSheet.flatten(styles);
const style = Object.keys(flattenMyStylesheets || {}).length ? { style: flattenMyStylesheets } : {};

  return {
    ...
    props: {
      ...style
    }
  };

Failing that what would be the best way to swap this out

So as it turns out, we were already passing the flattened data as an object, so just resorted to this instead `const style = props.style; return { ... props: { ...style } };` — Takuhii, Jul 12 '22 at 08:28

score 1 · Accepted Answer · answered Jul 07 '22 at 18:44

1

You don't usually go the StyleSheet way with native React.

I'd recommend using either a styled-components approach, or with React you can use pure objects for styling instead of relying on the StyleSheet RN API. See here

Note: I'm a React Native + React dev

answered Jul 07 '22 at 18:44

Kenny Meyer

7,849
6
45
66

1

Ah I see, thanks you for the pointers. So it would seem to be using a `styled-components` approach for the stuff we've done already, it was just the best approach to take around RN stylesheet.flatten, as it's the first time we've come across it in the codebase. Looks like we have a bit of work ahead of us... – Takuhii Jul 08 '22 at 06:51
1

@Takuhii unfortunately, yes – Kenny Meyer Jul 08 '22 at 13:46

score 0 · Answer 2 · answered Jul 15 '22 at 09:36

So the short answer is that no, there is no equivalent. I investigated and felt that lodash.flatten could work as a substitute, with a little tweaking, but in my case we converted the stylesheets to an object, and just removed the dependency on stylesheet.flatten

Advice needed for ReactJS Equivalent of React-Native-Web stylesheet.flatten

2 Answers2