reactjsreact-native-webreact-native-stylesheet

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

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

Solution

  • 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