feat: use ReactNative to create elements

Author: igorwessel

packages/styled-components-native/src/create.ts

@@ -6,7 +6,7 @@ import { createStyled, XStyled } from './createStyled'
 interface XStyledSet<TGen extends StyleGenerator> {
   css: XCSSFunction
   x: X<TGen>
-  styled: XStyled
+  styled: XStyled<TGen>
 }
 
 export const createCss = <TGen extends StyleGenerator>(

packages/styled-components-native/src/createStyled.ts

@@ -1,13 +1,21 @@
 /* eslint-disable no-continue, no-loop-func, no-cond-assign */
 import type { ElementType } from 'react'
 import type { ReactNativeThemedStyledFunction } from 'styled-components/native'
+import type {
+  StyleGenerator,
+  StyleGeneratorProps,
+  Theme,
+} from '@xstyled/system'
+import type { StyledConfig, ThemedStyledFunction } from 'styled-components'
+import type {
+  ReactNativeBoxElements,
+  ReactNativeElement,
+  ReactNativeElements,
+} from './types'
+import * as ReactNative from 'react-native'
 import { string } from '@xstyled/util'
-import { StyleGenerator, Theme } from '@xstyled/system'
-import { StyledConfig } from 'styled-components'
-import * as RN from 'react-native'
 import { scStyled } from './scStyled'
 import { createCssFunction, XCSSFunction } from './createCssFunction'
-import type { ReactNativeThemedBaseStyledInterface } from './types'
 
 const getCreateStyle = (
   baseCreateStyle: ReactNativeThemedStyledFunction<any, any>,
@@ -25,7 +33,17 @@ const getCreateStyle = (
   return createStyle
 }
 
-export type XStyled = ReactNativeThemedBaseStyledInterface<Theme>
+type BoxStyledTags<TProps extends object> = {
+  [Key in keyof ReactNativeBoxElements]: ThemedStyledFunction<
+    ReactNativeElement<ReactNativeBoxElements[Key], Theme>,
+    Theme,
+    TProps
+  >
+}
+
+export interface XStyled<TGen extends StyleGenerator>
+  extends ReactNativeElements,
+    BoxStyledTags<StyleGeneratorProps<TGen>> {}
 
 const createShouldForwardProp = (
   generator: StyleGenerator,
@@ -36,31 +54,19 @@ const createShouldForwardProp = (
 ) => boolean) => {
   const propSet = new Set<string>(generator.meta.props)
 
-  return (
-    prop: string | number | symbol,
-    defaultValidatorFn: (prop: string | number | symbol) => boolean,
-    elementToBeCreated?: ElementType,
-  ) => {
+  return (prop: string | number | symbol) => {
     if (string(prop) && propSet.has(prop)) {
       return false
     }
-    if (typeof elementToBeCreated === 'string') {
-      // We must test elementToBeCreated so we can pass through props for <x.div
-      // as={Component} />. However elementToBeCreated isn't available until
-      // styled-components 5.2.4 or 6, and in the meantime will be undefined.
-      // This means that HTML elements could get unwanted props, but ultimately
-      // this is a bug in the caller, because why are they passing unwanted
-      // props?
-      return defaultValidatorFn(prop)
-    }
+
     return true
   }
 }
 
 export const createBaseStyled = <TGen extends StyleGenerator>(
   css: XCSSFunction,
   generator?: TGen,
-): XStyled => {
+): XStyled<TGen> => {
   const config = generator
     ? {
         shouldForwardProp: createShouldForwardProp(generator),
@@ -74,26 +80,35 @@ export const createBaseStyled = <TGen extends StyleGenerator>(
       css,
       generator,
     )
-  }) as XStyled
+  }) as XStyled<TGen>
 }
 
 export const createStyled = <TGen extends StyleGenerator>(
   generator: TGen,
-): XStyled => {
+): XStyled<TGen> => {
   const css = createCssFunction(generator)
-  // const styled = createBaseStyled(css)
+  const styled = createBaseStyled(css)
   const xstyled = createBaseStyled(css, generator)
 
   Object.keys(scStyled).forEach((tag) => {
-    Object.defineProperty(xstyled, tag, {
+    Object.defineProperty(styled, tag, {
+      enumerable: true,
+      configurable: false,
+      get() {
+        // @ts-ignore
+        return styled(ReactNative[tag])
+      },
+    })
+
+    Object.defineProperty(styled, `${tag}Box`, {
       enumerable: true,
       configurable: false,
       get() {
         // @ts-ignore
-        return xstyled(RN[tag])
+        return xstyled(ReactNative[tag])
       },
     })
   })
 
-  return xstyled
+  return styled
 }

packages/styled-components-native/src/createX.ts

@@ -1,16 +1,16 @@
 /* eslint-disable no-continue, no-loop-func, no-cond-assign */
+import * as ReactNative from 'react-native'
 import { StyledComponent } from 'styled-components'
 import { DefaultTheme } from 'styled-components/native'
-import { scStyled } from './scStyled'
 import { StyleGenerator, StyleGeneratorProps } from '@xstyled/system'
+import { scStyled } from './scStyled'
 import { createBaseStyled } from './createStyled'
 import { createCssFunction } from './createCssFunction'
-import { NativeElement, NativeElementsKeys } from './types'
-import * as RN from 'react-native'
+import { ReactNativeElement, ReactNativeElementsKeys } from './types'
 
 export type X<TGen extends StyleGenerator> = {
-  [Key in NativeElementsKeys]: StyledComponent<
-    NativeElement<Key>,
+  [Key in ReactNativeElementsKeys]: StyledComponent<
+    ReactNativeElement<Key, DefaultTheme>,
     DefaultTheme,
     StyleGeneratorProps<TGen>,
     'color'
@@ -30,7 +30,7 @@ export const createX = <TGen extends StyleGenerator>(
       configurable: false,
       get() {
         // @ts-ignore
-        return xstyled(RN[tag])``
+        return xstyled(ReactNative[tag])``
       },
     })
   })