feat: support react-native

[igorwessel]

Summary

Hello guys! basically I'm trying to finalize a PR that was adding support for react-native.
Can find out a little more about it here: #273, thanks @diegotsi

My idea is basically the same as this PR except that I'll be adding the default use without utility props and the x function with utility props.

Test plan

const WithoutUtilityProps = styled.View`
  background-color: cool-gray-500;
  padding: 2;
`;

const WithConfig = styled.View.withConfig({})`
  background-color: rose-900;
  padding: 2;
`;

const StyledSomeComponent = styled(View)`
  background-color: teal-900;
  padding: 2;
`;

const WithUtilityProps = styled.ViewBox``;

const UsingAS = styled.View``;

const Test = () => {
  return (
    <ThemeProvider theme={defaultTheme}>
      <x.View p={2} bg="blue-gray-900">
        <x.Text color="blue-gray-500">Text X elements</x.Text>
      </x.View>
      <UsingAS as={x.Text} p={2} bg="emerald-500">
        Now is a x.Text with all props from Text (RN) + utility props from
        xstyled
      </UsingAS>
      <WithUtilityProps p={2}>
        <x.Text>With Utility Props</x.Text>
      </WithUtilityProps>
      <WithConfig>
        <x.Text color="white">With Config</x.Text>
      </WithConfig>
      {/*@ts-expect-error */}
      <WithoutUtilityProps bg="black">
        <x.Text>Without Utility Props</x.Text>
      </WithoutUtilityProps>
      <StyledSomeComponent>
        <x.Text color="white">Styled(SomeComponent)</x.Text>
      </StyledSomeComponent>
    </ThemeProvider>
  );
};

Working with the latest react-native template:

[JulioCVaz]

Thanks for this @igorwessel 🚀

This will help us a lot

[felipefialho]

Nice @igorwessel! 😄

[jguddas]

I prefer @xstyled/styled-components/native over @xstyled/styled-components-native due to all the duplication.

Maybe there is a way to trim this down and get rid of the dependency for react-native itself?

[igorwessel]

I prefer @xstyled/styled-components/native over @xstyled/styled-components-native due to all the duplication.

We can maybe install as a dependency in @xstyled/styled-components and export all this guy

Maybe there is a way to trim this down and get rid of the dependency for react-native itself?

The react-native package is in the development dependencies, without it there is no way to perform the tests

[igorwessel]

I realized that a lot of the code is duplication that is not worth it to move in new package. I made some changes in the functions that create the styled, xstyled, css to receive as parameters the dependencies of the styled, css function that will be used. We were able to have these functions with greater flexibility, which allows us to reuse them both for native/web.

I have separated the responsibilities of defining an interface into new functions so that we can use the functions that create styled,xstyled without an interface and then define from those returned values. e.g:

const { scStyled, styled, xstyled } = createStyled(scStyled, css, generator)

Object.keys(scStyled).forEach(key => styled[key] = styled(key))

Which allows us to reuse them both for native/web.

Finally I created a package inside styled-components so we can use @xstyled/styled-components/native

We can still have them as a separate package, and just put it as a styled-components dependency.
With separate package allow people to just install the native package.

[rbalves]

🚀

[igorwessel]

@gregberge When you have time, can you take a look?

[gregberge]

@igorwessel CI fails, could you try to fix it?

[igorwessel]

@gregberge I needed to update the react-simple-editor dependency to @0.11.3 as it doesn't exactly include react@^16 peer-deps. So the NPM can resolve the dependencies without needing to set the flag --legacy-peer-deps.
I'll be sure to find some time this weekend to write something in the docs about react-native.

[gregberge]

@igorwessel after the doc, I could merge it.

[gregberge]

Thanks @igorwessel can you rebase please?

[igorwessel]

@gregberge Sorry for the delay, I had some problems but the rebase is done. 👍

[JulioCVaz]

@gregberge Hey Greg, how you doing?

Have a any expectation to includes this support to the RN? It's will be help us a lot.

[sciotta]

@igorwessel can you rebase it again? It's a nice feature and an awesome improvement for this library.

[igorwessel]

@thiagog3 done! 😄

[igorwessel]

@probablyup @gregberge Is it ok for merge?

[D1no]

@gregberge 🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏

[quantizor]

Will review this weekend :)

[D1no]

Any progress here? 👀 Is there something similar to xstyled out there (that is not tailwind) that supports also React Native?