fix: support react 18.3.1

Author: Augustach

babel.config.js

@@ -1,6 +1,4 @@
 module.exports = {
-    presets: ['module:metro-react-native-babel-preset',
-     
-    ],
+    presets: ['module:@react-native/babel-preset'],
     plugins: [['./babel-plugin', { imports: [ '../styled' ] }]]
  }

package.json

@@ -11,20 +11,24 @@
   },
   "dependencies": {
     "css-to-react-native": "^3.2.0",
-    "postcss": "^8.4.32"
+    "postcss": "^8.4.38"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.4",
-    "@babel/types": "^7.23.5",
-    "@tsconfig/react-native": "^3.0.2",
+    "@babel/cli": "^7.24.5",
+    "@babel/types": "^7.24.5",
+    "@react-native/babel-preset": "0.74.83",
+    "@tsconfig/react-native": "^3.0.5",
     "@types/jest": "^29.5.11",
     "@types/node": "^20.10.5",
-    "@types/react": "^18.2.42",
+    "@types/react": "^18.3.1",
     "jest": "^29.7.0",
-    "metro-react-native-babel-preset": "0.73",
-    "react": "^18.2.0",
-    "react-native": "^0.72.7",
-    "typescript": "^5.3.3"
+    "react": "^18.3.1",
+    "react-native": "^0.74.1",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-native": ">=0.73.0"
   },
   "packageManager": "yarn@4.1.1"
 }

src/buildPropsFromAttrs.ts

@@ -1,4 +1,4 @@
-import { AnyTheme, AttrsFn, BaseObject, Themed, UnknownProps } from './types'
+import { AnyTheme, BaseObject, InnerAttrs, Themed, UnknownProps } from './types'
 
 /**
  * Combines passed props and props from attrs
@@ -8,14 +8,14 @@ import { AnyTheme, AttrsFn, BaseObject, Themed, UnknownProps } from './types'
  * Example:
  * props - { overriddenNumber: 0 }
  * attrs - [
- *  () => { number: 1, overriddenNumber: 1},
+ *  { number: 1, overriddenNumber: 1},
  *  (props) => { number: props.number + 1, overriddenNumber: props.overriddenNumber + 1 }
  * ]
  * result - { overriddenNumber: 2, number: 2 }
  */
-export function buildPropsFromAttrs<Theme extends BaseObject = AnyTheme>(props: Themed<UnknownProps, Theme>, attrs: AttrsFn[]): Themed<UnknownProps, Theme> {
+export function buildPropsFromAttrs<Theme extends BaseObject = AnyTheme>(props: Themed<UnknownProps, Theme>, attrs: InnerAttrs[]): Themed<UnknownProps, Theme> {
   for (const attr of attrs) {
-    props = Object.assign(props, attr(props))
+    props = Object.assign(props, typeof attr === 'function' ? attr(props) : attr)
   }
   return props
 }

src/splitAttrs.ts

@@ -42,7 +42,6 @@ import {
 import { buildPropsFromAttrs } from './buildPropsFromAttrs'
 import { substitute, runtime, mixin } from './parsers'
 import { createTheme } from './theme'
-import { splitAttrs } from './splitAttrs'
 import { buildDynamicStyles } from './buildDynamicStyles'
 import { isFunction, isStyledComponent } from './utils'
 
@@ -66,47 +65,37 @@ export function createStyled<Theme extends AnyTheme>() {
       attrs = isStyledComponent(Component) ? [...Component.attrs, ...attrs] : attrs
       const hasDynamicStyles = Object.keys(initialStyles).some((key) => isFunction(initialStyles[key]))
       const fixedStyle = hasDynamicStyles ? undefined : initialStyles
-      const { fixedProps, dynamicAttrs } = splitAttrs(attrs)
       const origin = isStyledComponent(Component) ? Component.origin : Component
-      const isDynamic = dynamicAttrs.length > 0 || hasDynamicStyles
 
       // Component
       type ThemedProps = Themed<UnknownProps, Theme>
       const StyledComponent = React.forwardRef((props: PropsWithChildren<ThemedProps & AnyStyleProps & AsComponentProps>, ref) => {
         const theme = useContext(ThemeContext)
         const CastedComponent = (props.as ?? origin) as AnyComponent
-        const styleFromProps = props.style
-        const hasCustomStyle = fixedStyle !== styleFromProps
-        // We add fixed props and styles to defaultProps. Thanks to this, we don't need to copy the props object.
-        // We copy the props object in the following cases:
-        // 1. ref is not null, meaning the parent has set a ref for the component.
-        // 2. There are dynamic props that depend on the component's props.
-        // 3. There are dynamic attributes that depend on the component's props.
-        const shouldCopyProps = isDynamic || ref || hasCustomStyle
-        let propsForElement = shouldCopyProps ? Object.assign({}, props, { theme, ref }) : props
+        let propsForElement: ThemedProps = Object.assign({}, props, { theme, ref })
         let style: StyleProp<UnknownStyles> = fixedStyle
 
-        if (dynamicAttrs.length > 0) {
-          propsForElement = buildPropsFromAttrs(propsForElement, dynamicAttrs)
+        if (attrs.length > 0) {
+          propsForElement = buildPropsFromAttrs(propsForElement, attrs)
         }
         if (hasDynamicStyles) {
           style = buildDynamicStyles(propsForElement, initialStyles)
         }
-        if (hasCustomStyle) {
+
+        const styleFromProps = props.style
+        if (styleFromProps) {
           style = ([style] as Array<StyleProp<UnknownStyles>>).concat(styleFromProps)
         }
         propsForElement.style = style
-        if (shouldCopyProps) {
-          propsForElement.theme = props.theme
-        }
+        propsForElement.theme = props.theme
+
         return createElement(CastedComponent, propsForElement)
       }) as StyledComponent
 
       StyledComponent.displayName = 'StyledComponent'
       StyledComponent.isStyled = true
       StyledComponent.styles = initialStyles
       StyledComponent.attrs = attrs
-      StyledComponent.defaultProps = Object.assign({ style: fixedStyle }, fixedProps)
       StyledComponent.origin = origin
       return StyledComponent
     }