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

Answer 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

Answer 2

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