From 4d5cef58f816bc10dd44ef1775650e194376a008 Mon Sep 17 00:00:00 2001 From: Daniel Markiel Date: Fri, 26 Apr 2024 10:43:41 +0200 Subject: [PATCH] chore: Upgrade nativewind to v4 --- App.tsx | 1 + babel.config.js | 3 +- global.css | 3 + ios/Podfile.lock | 13 +- metro.config.js | 7 +- app.d.ts => nativewind-env.d.ts | 0 package.json | 13 +- patches/nativewind+2.0.11.patch | 243 --------------- src/components/Button/Button.tsx | 27 +- src/components/Button/Button.types.ts | 2 + src/screens/Home/Home.tsx | 17 +- src/screens/Users/Users.tsx | 34 +-- tailwind.config.js | 18 +- yarn.lock | 425 +++++++++++++++++--------- 14 files changed, 361 insertions(+), 445 deletions(-) create mode 100644 global.css rename app.d.ts => nativewind-env.d.ts (100%) delete mode 100644 patches/nativewind+2.0.11.patch diff --git a/App.tsx b/App.tsx index 2625ee5..4391e4c 100644 --- a/App.tsx +++ b/App.tsx @@ -2,6 +2,7 @@ import 'react-native-gesture-handler'; import React from 'react'; import { SafeAreaProvider } from 'react-native-safe-area-context'; +import './global.css'; import { Navigator } from './src/navigations/Navigator'; import { AppProviders } from './src/providers/AppProviders'; diff --git a/babel.config.js b/babel.config.js index 0abe2e4..31a7257 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,5 +1,5 @@ module.exports = { - presets: ['module:@react-native/babel-preset'], + presets: ['module:@react-native/babel-preset', 'nativewind/babel'], plugins: [ [ 'module-resolver', @@ -8,7 +8,6 @@ module.exports = { extensions: ['.ios.ts', '.ios.tsx', '.android.ts', '.android.tsx', '.ts', '.tsx', '.js', '.jsx', '.json'], }, ], - 'nativewind/babel', [ 'transform-inline-environment-variables', { diff --git a/global.css b/global.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/global.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 3013ede..2a9317f 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1131,19 +1131,20 @@ PODS: - React-Core - RNDateTimePicker (7.6.4): - React-Core - - RNGestureHandler (2.14.0): + - RNGestureHandler (2.16.0): - glog - RCT-Folly (= 2022.05.16.00) - React-Core - - RNReanimated (3.6.1): + - RNReanimated (3.8.1): - glog - RCT-Folly (= 2022.05.16.00) - React-Core - ReactCommon/turbomodule/core - - RNScreens (3.29.0): + - RNScreens (3.31.1): - glog - RCT-Folly (= 2022.05.16.00) - React-Core + - React-RCTImage - SocketRocket (0.6.1) - Yoga (1.14.0) @@ -1434,9 +1435,9 @@ SPEC CHECKSUMS: ReactCommon: 2aa35648354bd4c4665b9a5084a7d37097b89c10 RNCAsyncStorage: 826b603ae9c0f88b5ac4e956801f755109fa4d5c RNDateTimePicker: 08f00a2c341bf96e4b30da15799fbdd4c5fa48a3 - RNGestureHandler: a4c4561307e67f2942f5a4fe1526ff78cf3f5280 - RNReanimated: dee37576492f1a375017515f5c77e66e5eec696b - RNScreens: 17e2f657f1b09a71ec3c821368a04acbb7ebcb46 + RNGestureHandler: bc2cdb2dc42facdf34992ae364b8a728e19a3686 + RNReanimated: 8a4d86eb951a4a99d8e86266dc71d7735c0c30a9 + RNScreens: 134a7511b12b8eb440b87aac21e36a71295d6024 SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 Yoga: 805bf71192903b20fc14babe48080582fee65a80 diff --git a/metro.config.js b/metro.config.js index 5fa6463..82c66c2 100644 --- a/metro.config.js +++ b/metro.config.js @@ -1,5 +1,6 @@ const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config'); const { generate } = require('@storybook/react-native/scripts/generate'); +const { withNativeWind } = require('nativewind/metro'); const path = require('path'); @@ -13,11 +14,11 @@ generate({ * * @type {import('metro-config').MetroConfig} */ -const config = { +const config = mergeConfig(getDefaultConfig(__dirname), { transformer: { // Required by Storybook unstable_allowRequireContext: true, }, -}; +}); -module.exports = mergeConfig(getDefaultConfig(__dirname), config); +module.exports = withNativeWind(config, { input: './global.css' }); diff --git a/app.d.ts b/nativewind-env.d.ts similarity index 100% rename from app.d.ts rename to nativewind-env.d.ts diff --git a/package.json b/package.json index 2b0b7c8..fd4efc4 100644 --- a/package.json +++ b/package.json @@ -30,19 +30,20 @@ "@tanstack/react-query": "^4.36.1", "axios": "^1.6.2", "fast-text-encoding": "^1.0.6", - "nativewind": "^2.0.11", + "nativewind": "^4.0.36", "qs": "^6.11.2", "react": "18.2.0", "react-intl": "^6.5.1", "react-native": "0.73.6", "react-native-config": "^1.5.1", "react-native-drawer-layout": "^3.2.2", - "react-native-gesture-handler": "^2.14.0", + "react-native-gesture-handler": "^2.16.0", "react-native-mmkv": "^2.11.0", - "react-native-reanimated": "^3.6.1", + "react-native-reanimated": "^3.8.1", "react-native-safe-area-context": "^4.7.4", - "react-native-screens": "^3.27.0", - "react-native-url-polyfill": "^2.0.0" + "react-native-screens": "^3.31.1", + "react-native-url-polyfill": "^2.0.0", + "tailwind-merge": "^2.3.0" }, "devDependencies": { "@babel/core": "^7.23.2", @@ -81,7 +82,7 @@ "prettier": "2.8.8", "react-dom": "18.2.0", "react-test-renderer": "18.2.0", - "tailwindcss": "3.3.2", + "tailwindcss": "3.4.3", "ts-jest": "^29.1.1", "typescript": "5.0.4" }, diff --git a/patches/nativewind+2.0.11.patch b/patches/nativewind+2.0.11.patch deleted file mode 100644 index 462a5a6..0000000 --- a/patches/nativewind+2.0.11.patch +++ /dev/null @@ -1,243 +0,0 @@ -diff --git a/node_modules/nativewind/dist/postcss/to-react-native/is-invalid-property.js b/node_modules/nativewind/dist/postcss/to-react-native/is-invalid-property.js -index 7d7715b..56472bc 100644 ---- a/node_modules/nativewind/dist/postcss/to-react-native/is-invalid-property.js -+++ b/node_modules/nativewind/dist/postcss/to-react-native/is-invalid-property.js -@@ -1,120 +1,121 @@ --"use strict"; --Object.defineProperty(exports, "__esModule", { value: true }); --exports.isInvalidProperty = void 0; -+'use strict' -+Object.defineProperty(exports, '__esModule', {value: true}) -+exports.isInvalidProperty = void 0 - function isInvalidProperty(property) { -- return !validProps.has(property); -+ return !validProps.has(property) - } --exports.isInvalidProperty = isInvalidProperty; -+exports.isInvalidProperty = isInvalidProperty - const validProps = new Set([ -- "alignContent", -- "alignItems", -- "alignSelf", -- "aspectRatio", -- "backfaceVisibility", -- "backgroundColor", -- "borderBottomColor", -- "borderBottomEndRadius", -- "borderBottomLeftRadius", -- "borderBottomRightRadius", -- "borderBottomStartRadius", -- "borderBottomWidth", -- "borderColor", -- "borderEndColor", -- "borderEndWidth", -- "borderLeftColor", -- "borderLeftWidth", -- "borderRadius", -- "borderRightColor", -- "borderRightWidth", -- "borderStartColor", -- "borderStartWidth", -- "borderStyle", -- "borderTopColor", -- "borderTopEndRadius", -- "borderTopLeftRadius", -- "borderTopRightRadius", -- "borderTopStartRadius", -- "borderTopWidth", -- "borderWidth", -- "bottom", -- "color", -- "direction", -- "display", -- "elevation", -- "end", -- "flex", -- "flexBasis", -- "flexDirection", -- "flexGrow", -- "flexShrink", -- "flexWrap", -- "fontFamily", -- "fontSize", -- "fontStyle", -- "fontVariant", -- "fontWeight", -- "height", -- "includeFontPadding", -- "justifyContent", -- "left", -- "letterSpacing", -- "lineHeight", -- "margin", -- "marginBottom", -- "marginEnd", -- "marginHorizontal", -- "marginLeft", -- "marginRight", -- "marginStart", -- "marginTop", -- "marginVertical", -- "maxHeight", -- "maxWidth", -- "minHeight", -- "minWidth", -- "opacity", -- "overflow", -- "overlayColor", -- "padding", -- "paddingBottom", -- "paddingEnd", -- "paddingHorizontal", -- "paddingLeft", -- "paddingRight", -- "paddingStart", -- "paddingTop", -- "paddingVertical", -- "position", -- "resizeMode", -- "right", -- "rotation", -- "scaleX", -- "scaleY", -- "shadowColor", -- "shadowOffset", -- "shadowOpacity", -- "shadowRadius", -- "start", -- "textAlign", -- "textAlignVertical", -- "textDecorationColor", -- "textDecorationLine", -- "textDecorationStyle", -- "textShadowColor", -- "textShadowOffset", -- "textShadowRadius", -- "textTransform", -- "tintColor", -- "top", -- "transform", -- "transformMatrix", -- "translateX", -- "translateY", -- "width", -- "writingDirection", -- "zIndex", -- /* SVG Props */ -- "fill", -- "stroke", -- "strokeWidth", --]); -+ 'alignContent', -+ 'alignItems', -+ 'alignSelf', -+ 'aspectRatio', -+ 'backfaceVisibility', -+ 'backgroundColor', -+ 'borderBottomColor', -+ 'borderBottomEndRadius', -+ 'borderBottomLeftRadius', -+ 'borderBottomRightRadius', -+ 'borderBottomStartRadius', -+ 'borderBottomWidth', -+ 'borderColor', -+ 'borderEndColor', -+ 'borderEndWidth', -+ 'borderLeftColor', -+ 'borderLeftWidth', -+ 'borderRadius', -+ 'borderRightColor', -+ 'borderRightWidth', -+ 'borderStartColor', -+ 'borderStartWidth', -+ 'borderStyle', -+ 'borderTopColor', -+ 'borderTopEndRadius', -+ 'borderTopLeftRadius', -+ 'borderTopRightRadius', -+ 'borderTopStartRadius', -+ 'borderTopWidth', -+ 'borderWidth', -+ 'bottom', -+ 'color', -+ 'direction', -+ 'display', -+ 'elevation', -+ 'end', -+ 'flex', -+ 'flexBasis', -+ 'flexDirection', -+ 'flexGrow', -+ 'flexShrink', -+ 'flexWrap', -+ 'fontFamily', -+ 'fontSize', -+ 'fontStyle', -+ 'fontVariant', -+ 'fontWeight', -+ 'height', -+ 'includeFontPadding', -+ 'justifyContent', -+ 'left', -+ 'letterSpacing', -+ 'lineHeight', -+ 'margin', -+ 'marginBottom', -+ 'marginEnd', -+ 'marginHorizontal', -+ 'marginLeft', -+ 'marginRight', -+ 'marginStart', -+ 'marginTop', -+ 'marginVertical', -+ 'maxHeight', -+ 'maxWidth', -+ 'minHeight', -+ 'minWidth', -+ 'opacity', -+ 'overflow', -+ 'overlayColor', -+ 'padding', -+ 'paddingBottom', -+ 'paddingEnd', -+ 'paddingHorizontal', -+ 'paddingLeft', -+ 'paddingRight', -+ 'paddingStart', -+ 'paddingTop', -+ 'paddingVertical', -+ 'position', -+ 'resizeMode', -+ 'right', -+ 'rotation', -+ 'scaleX', -+ 'scaleY', -+ 'shadowColor', -+ 'shadowOffset', -+ 'shadowOpacity', -+ 'shadowRadius', -+ 'start', -+ 'textAlign', -+ 'textAlignVertical', -+ 'textDecorationColor', -+ 'textDecorationLine', -+ 'textDecorationStyle', -+ 'textShadowColor', -+ 'textShadowOffset', -+ 'textShadowRadius', -+ 'textTransform', -+ 'tintColor', -+ 'top', -+ 'transform', -+ 'transformMatrix', -+ 'translateX', -+ 'translateY', -+ 'width', -+ 'writingDirection', -+ 'zIndex', -+ 'gap', -+ /* SVG Props */ -+ 'fill', -+ 'stroke', -+ 'strokeWidth', -+]) \ No newline at end of file diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index d7cdb02..f5cb70d 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,25 +1,32 @@ -import { styled } from 'nativewind'; import React from 'react'; import { Pressable, Text } from 'react-native'; +import { twMerge } from 'tailwind-merge'; import { ButtonProps } from './Button.types'; -const Button = ({ label, buttonStyle, labelStyle, disabled, ...props }: ButtonProps) => ( +const Button = ({ + label, + buttonStyle, + labelStyle, + buttonClassName, + labelClassName, + disabled, + ...props +}: ButtonProps) => ( - + {label} ); -export default styled(Button, { - props: { - buttonStyle: true, - labelStyle: true, - }, -}); +export default Button; diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts index ff7a91c..e6bc384 100644 --- a/src/components/Button/Button.types.ts +++ b/src/components/Button/Button.types.ts @@ -4,4 +4,6 @@ export interface ButtonProps extends PressableProps { label: string; buttonStyle?: PressableProps['style']; labelStyle?: TextProps['style']; + buttonClassName?: string; + labelClassName?: string; } diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx index fdd1b61..efcc652 100644 --- a/src/screens/Home/Home.tsx +++ b/src/screens/Home/Home.tsx @@ -17,7 +17,7 @@ export const Home = () => { {isAuthenticating && Loading...} {isAuthenticated ? ( - +