From 9d8a9ad25531505b94d29d9825289d83e6f0ef47 Mon Sep 17 00:00:00 2001 From: Youssef Henna Date: Mon, 1 Jun 2026 12:12:38 +0200 Subject: [PATCH 1/2] Add nativwind to example app --- example/global.css | 5 + example/index.js | 1 + example/metro.config.js | 3 +- example/nativewind-env.d.ts | 3 + example/package.json | 10 +- example/postcss.config.mjs | 5 + example/src/App.tsx | 2 + example/src/NativeWindExample.tsx | 280 ++++++++++++++++++++++++++++++ yarn.lock | 270 +++++++++++++++++++++++++++- 9 files changed, 573 insertions(+), 6 deletions(-) create mode 100644 example/global.css create mode 100644 example/nativewind-env.d.ts create mode 100644 example/postcss.config.mjs create mode 100644 example/src/NativeWindExample.tsx diff --git a/example/global.css b/example/global.css new file mode 100644 index 000000000..9431a57e6 --- /dev/null +++ b/example/global.css @@ -0,0 +1,5 @@ +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/preflight.css" layer(base); +@import "tailwindcss/utilities.css"; + +@import "nativewind/theme"; diff --git a/example/index.js b/example/index.js index f5125eeaa..68c7250d1 100644 --- a/example/index.js +++ b/example/index.js @@ -1,4 +1,5 @@ import "react-native-get-random-values"; +import "./global.css"; import { registerRootComponent } from "expo"; import App from "./src/App"; diff --git a/example/metro.config.js b/example/metro.config.js index 124d52af5..627016fbc 100644 --- a/example/metro.config.js +++ b/example/metro.config.js @@ -1,4 +1,5 @@ const { getDefaultConfig } = require("expo/metro-config"); +const { withNativewind } = require("nativewind/metro"); const path = require("path"); // Follows https://docs.expo.dev/guides/monorepos/ @@ -20,4 +21,4 @@ config.resolver.nodeModulesPaths = [ // 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths` config.resolver.disableHierarchicalLookup = true; -module.exports = config; +module.exports = withNativewind(config); diff --git a/example/nativewind-env.d.ts b/example/nativewind-env.d.ts new file mode 100644 index 000000000..60b1c7ba5 --- /dev/null +++ b/example/nativewind-env.d.ts @@ -0,0 +1,3 @@ +/// + +// NOTE: This file should not be edited and should be committed with your source code. It is generated by react-native-css. If you need to move or disable this file, please see the documentation. \ No newline at end of file diff --git a/example/package.json b/example/package.json index 56b3213b0..b6dd3ecf8 100644 --- a/example/package.json +++ b/example/package.json @@ -27,9 +27,11 @@ "expo-font": "~14.0.11", "expo-splash-screen": "~31.0.13", "expo-status-bar": "~3.0.9", + "nativewind": "^5.0.0-preview.4", "react": "19.1.0", "react-dom": "19.1.0", "react-native": "0.81.5", + "react-native-css": "^3.0.7", "react-native-gesture-handler": "~2.28.0", "react-native-get-random-values": "~1.11.0", "react-native-reanimated": "~4.1.1", @@ -41,9 +43,15 @@ }, "devDependencies": { "@babel/core": "^7.24.0", + "@tailwindcss/postcss": "^4.3.0", "@types/react": "~19.1.10", "@types/react-native": "~0.70.6", "babel-loader": "8.1.0", - "sharp-cli": "2.1.0" + "postcss": "^8.5.15", + "sharp-cli": "2.1.0", + "tailwindcss": "^4.3.0" + }, + "resolutions": { + "lightningcss": "1.30.1" } } diff --git a/example/postcss.config.mjs b/example/postcss.config.mjs new file mode 100644 index 000000000..c2ddf7482 --- /dev/null +++ b/example/postcss.config.mjs @@ -0,0 +1,5 @@ +export default { + plugins: { + "@tailwindcss/postcss": {}, + }, +}; diff --git a/example/src/App.tsx b/example/src/App.tsx index 647a3861d..23eaa14be 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -77,8 +77,10 @@ import LoadingIndicatorExample from "./LoadingIndicatorExample"; import TimerExample from "./TimerExample"; import LottieAnimationExample from "./LottieAnimationExample"; import ExpoImageExample from "./ExpoImageExample"; +import NativeWindExample from "./NativeWindExample"; const ROUTES = { + NativeWind: NativeWindExample, LottieAnimationExample: LottieAnimationExample, Timer: TimerExample, LoadingIndicator: LoadingIndicatorExample, diff --git a/example/src/NativeWindExample.tsx b/example/src/NativeWindExample.tsx new file mode 100644 index 000000000..80465d47f --- /dev/null +++ b/example/src/NativeWindExample.tsx @@ -0,0 +1,280 @@ +import React from "react"; +import { View, Text } from "react-native"; +import { + AudioPlayer, + CircularProgress, + CustomPinInputCell, + CustomPinInputText, + DeckSwiper, + DeckSwiperCard, + KeyboardAvoidingView, + LinearProgress, + LoadingIndicator, + LottieAnimation, + Markdown, + PinInput, + Shadow, + Swiper, + SwiperItem, + Timer, + VideoPlayer, + WebView, + YoutubePlayer, + TextField, +} from "@draftbit/ui"; +import { LoadingIndicatorType } from "@draftbit/core/lib/typescript/src/components/LoadingIndicator"; +import Section, { Container } from "./Section"; + +const PROGRESS_VALUE = 65; + +const NativeWindExample: React.FC<{ theme?: any }> = () => { + const [pinValue, setPinValue] = React.useState(""); + const timerRef = React.useRef(null); + + return ( + +
+ +
+ +
+ + + + +
+ +
+ + + Card 1 + + + + Card 2 + + + + + Card 3 + + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + + circle + + + + wave + + + + bounce + + + + pulse + + +
+ +
+ +
+ +
+ + { + "## NativeWind\n\nThis is **bold** and _italic_ text styled via `className`.\n\n- Item one\n- Item two\n- Item three" + } + +
+ +
+ +
+ +
+ ( + + + {cellValue} + + + )} + /> +
+ +
+ + + + NativeWind Shadow + + + +
+ +
+ + + Slide 1 + + + + Slide 2 + + + + + Slide 3 + + + +
+ +
+ + + + timerRef.current?.start()} + > + Start + + timerRef.current?.stop()} + > + Stop + + timerRef.current?.reset()} + > + Reset + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ + ); +}; + +export default NativeWindExample; diff --git a/yarn.lock b/yarn.lock index 6e087235f..e162c9546 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7,6 +7,11 @@ resolved "https://registry.yarnpkg.com/@0no-co/graphql.web/-/graphql.web-1.0.12.tgz#5fab8caaf5e6dae88e31111305f93dfd152de2fb" integrity sha512-BTDjjsV/zSPy5fqItwm+KWUfh9CSe9tTtR6rCB72ddtkAxdcHbi4Ir4r/L1Et4lyxmL+i7Rb3m9sjLLi9tYrzA== +"@alloc/quick-lru@^5.2.0": + version "5.2.0" + resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30" + integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw== + "@ampproject/remapping@^2.2.0": version "2.3.0" resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4" @@ -1131,6 +1136,14 @@ "@emnapi/wasi-threads" "1.0.4" tslib "^2.4.0" +"@emnapi/core@^1.10.0": + version "1.10.0" + resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.10.0.tgz#380ccc8f2412ea22d1d972df7f8ee23a3b9c7467" + integrity sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw== + dependencies: + "@emnapi/wasi-threads" "1.2.1" + tslib "^2.4.0" + "@emnapi/runtime@1.4.5", "@emnapi/runtime@^1.1.0": version "1.4.5" resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.4.5.tgz#c67710d0661070f38418b6474584f159de38aba9" @@ -1138,6 +1151,13 @@ dependencies: tslib "^2.4.0" +"@emnapi/runtime@^1.10.0": + version "1.10.0" + resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.10.0.tgz#4b260c0d3534204e98c6110b8db1a987d26ec87c" + integrity sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA== + dependencies: + tslib "^2.4.0" + "@emnapi/wasi-threads@1.0.4": version "1.0.4" resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.0.4.tgz#703fc094d969e273b1b71c292523b2f792862bf4" @@ -1145,6 +1165,13 @@ dependencies: tslib "^2.4.0" +"@emnapi/wasi-threads@1.2.1", "@emnapi/wasi-threads@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz#28fed21a1ba1ce797c44a070abc94d42f3ae8548" + integrity sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w== + dependencies: + tslib "^2.4.0" + "@emotion/babel-plugin@^11.13.5": version "11.13.5" resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz#eab8d65dbded74e0ecfd28dc218e75607c4e7bc0" @@ -2237,6 +2264,14 @@ "@jridgewell/sourcemap-codec" "^1.5.0" "@jridgewell/trace-mapping" "^0.3.24" +"@jridgewell/remapping@^2.3.5": + version "2.3.5" + resolved "https://registry.yarnpkg.com/@jridgewell/remapping/-/remapping-2.3.5.tgz#375c476d1972947851ba1e15ae8f123047445aa1" + integrity sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ== + dependencies: + "@jridgewell/gen-mapping" "^0.3.5" + "@jridgewell/trace-mapping" "^0.3.24" + "@jridgewell/resolve-uri@^3.0.3", "@jridgewell/resolve-uri@^3.1.0": version "3.1.2" resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6" @@ -2250,7 +2285,7 @@ "@jridgewell/gen-mapping" "^0.3.5" "@jridgewell/trace-mapping" "^0.3.25" -"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.5.0": +"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.5.0", "@jridgewell/sourcemap-codec@^1.5.5": version "1.5.5" resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz#6912b00d2c631c0d15ce1a7ab57cd657f2a8f8ba" integrity sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og== @@ -2395,6 +2430,13 @@ "@emnapi/runtime" "^1.1.0" "@tybys/wasm-util" "^0.9.0" +"@napi-rs/wasm-runtime@^1.1.4": + version "1.1.4" + resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz#a46bbfedc29751b7170c5d23bc1d8ee8c7e3c1e1" + integrity sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow== + dependencies: + "@tybys/wasm-util" "^0.10.1" + "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3": version "2.1.8-no-fsevents.3" resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b" @@ -3141,6 +3183,115 @@ dependencies: "@sinonjs/commons" "^3.0.0" +"@tailwindcss/node@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/node/-/node-4.3.0.tgz#9dc5312bf41c48658529f36021e0b466c4eb7860" + integrity sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g== + dependencies: + "@jridgewell/remapping" "^2.3.5" + enhanced-resolve "^5.21.0" + jiti "^2.6.1" + lightningcss "1.32.0" + magic-string "^0.30.21" + source-map-js "^1.2.1" + tailwindcss "4.3.0" + +"@tailwindcss/oxide-android-arm64@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.0.tgz#e4533b6125236fe81a899cf5a82028c85244def8" + integrity sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng== + +"@tailwindcss/oxide-darwin-arm64@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.0.tgz#96b074ef64ec6c41d580063740c8d36cf5c459ce" + integrity sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ== + +"@tailwindcss/oxide-darwin-x64@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.0.tgz#0d9638d06d38684339b2dc06631966a7296bb64e" + integrity sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA== + +"@tailwindcss/oxide-freebsd-x64@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.0.tgz#efc7acd17cd38d7585c07cb938a4f1b703f79d7a" + integrity sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ== + +"@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.0.tgz#e41c945e529670cd93fd6ed0c6a2880de5c40333" + integrity sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA== + +"@tailwindcss/oxide-linux-arm64-gnu@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.0.tgz#6bb608b16ba7146d61097c2f4c7ee927d1f3580a" + integrity sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg== + +"@tailwindcss/oxide-linux-arm64-musl@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.0.tgz#1bb443aa371bb99b50cb39d4d688151fadcd8a63" + integrity sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ== + +"@tailwindcss/oxide-linux-x64-gnu@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.0.tgz#5267c0bb2597426c0d2e759acb5389cde2aa71fd" + integrity sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ== + +"@tailwindcss/oxide-linux-x64-musl@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.0.tgz#fb2da97c67b218e5c7c723cb32782d55d7e4a5d5" + integrity sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg== + +"@tailwindcss/oxide-wasm32-wasi@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.0.tgz#3f6538e511066d67d8683863dcaeeb16c22de849" + integrity sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA== + dependencies: + "@emnapi/core" "^1.10.0" + "@emnapi/runtime" "^1.10.0" + "@emnapi/wasi-threads" "^1.2.1" + "@napi-rs/wasm-runtime" "^1.1.4" + "@tybys/wasm-util" "^0.10.1" + tslib "^2.8.1" + +"@tailwindcss/oxide-win32-arm64-msvc@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.0.tgz#ec45fba773c76759338c05d4fe5cf42c4eea2e4e" + integrity sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ== + +"@tailwindcss/oxide-win32-x64-msvc@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.0.tgz#58cdd6e06adbe2e3160274edfcd0b0b43e17fee4" + integrity sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA== + +"@tailwindcss/oxide@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/oxide/-/oxide-4.3.0.tgz#cc1c61e88f62c0e9f56062de3e7873acaa2159d4" + integrity sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg== + optionalDependencies: + "@tailwindcss/oxide-android-arm64" "4.3.0" + "@tailwindcss/oxide-darwin-arm64" "4.3.0" + "@tailwindcss/oxide-darwin-x64" "4.3.0" + "@tailwindcss/oxide-freebsd-x64" "4.3.0" + "@tailwindcss/oxide-linux-arm-gnueabihf" "4.3.0" + "@tailwindcss/oxide-linux-arm64-gnu" "4.3.0" + "@tailwindcss/oxide-linux-arm64-musl" "4.3.0" + "@tailwindcss/oxide-linux-x64-gnu" "4.3.0" + "@tailwindcss/oxide-linux-x64-musl" "4.3.0" + "@tailwindcss/oxide-wasm32-wasi" "4.3.0" + "@tailwindcss/oxide-win32-arm64-msvc" "4.3.0" + "@tailwindcss/oxide-win32-x64-msvc" "4.3.0" + +"@tailwindcss/postcss@^4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/postcss/-/postcss-4.3.0.tgz#58a087d8c6f06c6aa81e8a3f6c1e7282b8ee94d9" + integrity sha512-Jm05Tjx+9yCLGv5qw1c+84Psds8MnyrEQYCB+FFk2lgGiUjlRqdxke4mVTuYrj2xnVZqKim2Apr5ySuQRYAw/w== + dependencies: + "@alloc/quick-lru" "^5.2.0" + "@tailwindcss/node" "4.3.0" + "@tailwindcss/oxide" "4.3.0" + postcss "^8.5.10" + tailwindcss "4.3.0" + "@teovilla/react-native-web-maps@^0.9.5": version "0.9.5" resolved "https://registry.yarnpkg.com/@teovilla/react-native-web-maps/-/react-native-web-maps-0.9.5.tgz#6779324d388e9c384c6f584ec35982b72b639948" @@ -3215,6 +3366,13 @@ dependencies: tslib "^2.4.0" +"@tybys/wasm-util@^0.10.1": + version "0.10.2" + resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.10.2.tgz#12b3a1b33db1f9cad4ddff1f604ab7dd00bf464e" + integrity sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg== + dependencies: + tslib "^2.4.0" + "@types/babel__core@^7.1.14": version "7.20.5" resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017" @@ -3272,6 +3430,13 @@ resolved "https://registry.yarnpkg.com/@types/dateformat/-/dateformat-5.0.2.tgz#876f06431ce6f411dbaca3f81d95a8784c9ab82a" integrity sha512-M95hNBMa/hnwErH+a+VOD/sYgTmo15OTYTM2Hr52/e0OdOuY+Crag+kd3/ioZrhg0WGbl9Sm3hR7UU+MH6rfOw== +"@types/debug@^4.1.12": + version "4.1.13" + resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.13.tgz#22d1cc9d542d3593caea764f974306ab36286ee7" + integrity sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw== + dependencies: + "@types/ms" "*" + "@types/estree@^1.0.6": version "1.0.6" resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50" @@ -3378,6 +3543,11 @@ resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.5.tgz#ec10755e871497bcd83efe927e43ec46e8c0747e" integrity sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag== +"@types/ms@*": + version "2.1.0" + resolved "https://registry.yarnpkg.com/@types/ms/-/ms-2.1.0.tgz#052aa67a48eccc4309d7f0191b7e41434b90bb78" + integrity sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA== + "@types/node@*": version "22.10.2" resolved "https://registry.yarnpkg.com/@types/node/-/node-22.10.2.tgz#a485426e6d1fdafc7b0d4c7b24e2c78182ddabb9" @@ -3819,6 +3989,11 @@ array-ify@^1.0.0: resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece" integrity sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng== +array-timsort@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/array-timsort/-/array-timsort-1.0.3.tgz#3c9e4199e54fb2b9c3fe5976396a21614ef0d926" + integrity sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ== + arrify@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" @@ -3938,6 +4113,13 @@ babel-plugin-react-compiler@^1.0.0: dependencies: "@babel/types" "^7.26.0" +babel-plugin-react-compiler@^19.1.0-rc.2: + version "19.1.0-rc.1-rc-af1b7da-20250421" + resolved "https://registry.yarnpkg.com/babel-plugin-react-compiler/-/babel-plugin-react-compiler-19.1.0-rc.1-rc-af1b7da-20250421.tgz#d52096e058c63293ced8b57d3f9b0395d1894ede" + integrity sha512-E3kaokBhWDLf7ZD8fuYjYn0ZJHYZ+3EHtAWCdX2hl4lpu1z9S/Xr99sxhx2bTCVB41oIesz9FtM8f4INsrZaOw== + dependencies: + "@babel/types" "^7.26.0" + babel-plugin-react-native-web@~0.21.0: version "0.21.2" resolved "https://registry.yarnpkg.com/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.21.2.tgz#d2f7fd673278da82577aa583457edb55d9cccbe0" @@ -4573,6 +4755,11 @@ colorette@^2.0.20: resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a" integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w== +colorjs.io@0.6.0-alpha.1: + version "0.6.0-alpha.1" + resolved "https://registry.yarnpkg.com/colorjs.io/-/colorjs.io-0.6.0-alpha.1.tgz#c1c382d0f4f34ae8b1d82db73a233a69b7c36f98" + integrity sha512-c/h/8uAmPydQcriRdX8UTAFHj6SpSHFHBA8LvMikvYWAVApPTwg/pyOXNsGmaCBd6L/EeDlRHSNhTtnIFp/qsg== + columnify@1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/columnify/-/columnify-1.6.0.tgz#6989531713c9008bb29735e61e37acf5bd553cf3" @@ -4618,6 +4805,14 @@ commander@^7.2.0: resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7" integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw== +comment-json@^4.2.5: + version "4.6.2" + resolved "https://registry.yarnpkg.com/comment-json/-/comment-json-4.6.2.tgz#235d8a908e211855b0068248a794afddb87670af" + integrity sha512-R2rze/hDX30uul4NZoIZ76ImSJLFxn/1/ZxtKC1L77y2X1k+yYu1joKbAtMA2Fg3hZrTOiw0I5mwVMo0cf250w== + dependencies: + array-timsort "^1.0.3" + esprima "^4.0.1" + common-ancestor-path@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz#4f7d2d1394d91b7abdf51871c62f71eadb0182a7" @@ -4960,7 +5155,7 @@ debug@2.6.9, debug@2.6.x, debug@^2.6.6, debug@^2.6.9: dependencies: ms "2.0.0" -debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.5, debug@^4.4.0, debug@^4.4.3, debug@~4.4.0: +debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.5, debug@^4.4.0, debug@^4.4.1, debug@^4.4.3, debug@~4.4.0: version "4.4.3" resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a" integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA== @@ -5239,6 +5434,14 @@ end-of-stream@1.4.5, end-of-stream@^1.1.0, end-of-stream@^1.4.1: dependencies: once "^1.4.0" +enhanced-resolve@^5.21.0: + version "5.22.1" + resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.22.1.tgz#c34bc3f414298496fc244b21bbe316440782da17" + integrity sha512-6QEuw3zoX1SJQc7b87aBXke/no+mG2bTBgw29gWMQonLmpEkWoCAVkl+M49e48AZlWzxiDzDZzYdp6kobcyLww== + dependencies: + graceful-fs "^4.2.4" + tapable "^2.3.3" + enquirer@2.3.6, enquirer@~2.3.6: version "2.3.6" resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d" @@ -7332,6 +7535,11 @@ jimp-compact@0.16.1: resolved "https://registry.yarnpkg.com/jimp-compact/-/jimp-compact-0.16.1.tgz#9582aea06548a2c1e04dd148d7c3ab92075aefa3" integrity sha512-dZ6Ra7u1G8c4Letq/B5EzAxj4tLFHL+cGtdpR+PVm4yzPDj+lCk+AbivWt1eOM+ikzkowtyV7qSqX6qr3t71Ww== +jiti@^2.6.1: + version "2.7.0" + resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.7.0.tgz#974228f2f4ca2bc21885a1797b45fea68e950c64" + integrity sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ== + "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -7717,7 +7925,7 @@ lightningcss-win32-x64-msvc@1.32.0: resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz#141aa5605645064928902bb4af045fa7d9f4220a" integrity sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q== -lightningcss@^1.30.1: +lightningcss@1.32.0, lightningcss@^1.30.1: version "1.32.0" resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.32.0.tgz#b85aae96486dcb1bf49a7c8571221273f4f1e4a9" integrity sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ== @@ -7967,6 +8175,13 @@ lru-cache@^6.0.0: dependencies: yallist "^4.0.0" +magic-string@^0.30.21: + version "0.30.21" + resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.21.tgz#56763ec09a0fa8091df27879fd94d19078c00d91" + integrity sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ== + dependencies: + "@jridgewell/sourcemap-codec" "^1.5.5" + make-dir@^2.0.0, make-dir@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5" @@ -8773,11 +8988,23 @@ nanoid@^3.3.1, nanoid@^3.3.11, nanoid@^3.3.7: resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b" integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w== +nanoid@^3.3.12: + version "3.3.12" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.12.tgz#ab3d912e217a6d0a514f00a72a16543a28982c05" + integrity sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ== + napi-build-utils@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806" integrity sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg== +nativewind@^5.0.0-preview.4: + version "5.0.0-preview.4" + resolved "https://registry.yarnpkg.com/nativewind/-/nativewind-5.0.0-preview.4.tgz#60720e05a3cf5c56acd3ae8015abaad35ef41e05" + integrity sha512-eLsFGczxIsWADoD18EbEyt01aWgw4uP1/t/O7JIsp/OEbSgVYVobW97e2DDTOxxiiqSu0RexC1KSo5d7tes9uQ== + dependencies: + tailwindcss-safe-area "^1.1.0" + natural-compare@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" @@ -9769,6 +9996,15 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.2.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== +postcss@^8.5.10, postcss@^8.5.15: + version "8.5.15" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.15.tgz#d1eaf677a324e9ec02196da2d3fecf4a0b9a735c" + integrity sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A== + dependencies: + nanoid "^3.3.12" + picocolors "^1.1.1" + source-map-js "^1.2.1" + postcss@~8.4.32: version "8.4.49" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19" @@ -10095,6 +10331,17 @@ react-native-confirmation-code-field@^7.4.0: resolved "https://registry.yarnpkg.com/react-native-confirmation-code-field/-/react-native-confirmation-code-field-7.4.0.tgz#58cc2d5adad59882d1805bf164cd6099d432d21e" integrity sha512-Kw7rD0RXi6vZnt0Y67nkSW2wYmZFdnxJ23yxkKm3jqwvSxAvaA1NP3h3MHSPmJd25l0WK/+fjXOeCliDqWZ9rw== +react-native-css@^3.0.7: + version "3.0.7" + resolved "https://registry.yarnpkg.com/react-native-css/-/react-native-css-3.0.7.tgz#e2e38dc434b57cd1f1b191a1b58a63e84eb5d277" + integrity sha512-xsU9T5MleHI/DDmY72A7ZikbkDfDNkMrAEichOJW2bBUMxPzAJPrFk9ys4cXYk4gLFaR11y23EccOJ+JT6Iusw== + dependencies: + "@types/debug" "^4.1.12" + babel-plugin-react-compiler "^19.1.0-rc.2" + colorjs.io "0.6.0-alpha.1" + comment-json "^4.2.5" + debug "^4.4.1" + react-native-date-picker@^5.0.7: version "5.0.8" resolved "https://registry.yarnpkg.com/react-native-date-picker/-/react-native-date-picker-5.0.8.tgz#1820fccc194bfa6907ea4382f94677f11e831b92" @@ -11453,6 +11700,21 @@ synckit@^0.9.1: "@pkgr/core" "^0.1.0" tslib "^2.6.2" +tailwindcss-safe-area@^1.1.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/tailwindcss-safe-area/-/tailwindcss-safe-area-1.3.0.tgz#59ac759ce4d3a3521d4d0acf5429be1add2c6d01" + integrity sha512-RoxnW1zAjBWC3XK+row7Qj5toRMRlKNN/p3FLXb6fTGKxDGWT6JP/mcNX1yf09xRficQ308hbwiedgniepSp1Q== + +tailwindcss@4.3.0, tailwindcss@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.3.0.tgz#0a874e044a859cf6de413f3a59e76a9bedf05264" + integrity sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q== + +tapable@^2.3.3: + version "2.3.3" + resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.3.3.tgz#5da7c9992c46038221267985ab28421a8879f160" + integrity sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A== + tar-fs@^2.0.0, tar-fs@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784" @@ -11690,7 +11952,7 @@ tsconfig-paths@4.2.0: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@2.8.1, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6.2: +tslib@2.8.1, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6.2, tslib@^2.8.1: version "2.8.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w== From 3d9fa692a93cfce11185bc706b2b31196e55fa8d Mon Sep 17 00:00:00 2001 From: Youssef Henna Date: Mon, 1 Jun 2026 13:47:32 +0200 Subject: [PATCH 2/2] `className` support for more components --- eslint.config.js | 1 + example/src/NativeWindExample.tsx | 144 +++++------------- .../components/DeckSwiper/DeckSwiperCard.tsx | 7 +- .../src/components/KeyboardAvoidingView.tsx | 4 + .../core/src/components/LoadingIndicator.tsx | 14 +- .../core/src/components/LottieAnimation.tsx | 9 +- packages/core/src/components/Markdown.tsx | 51 ++++--- .../AudioPlayer/AudioPlayerWithInterface.tsx | 6 +- .../PinInput/CustomPinInputCell.tsx | 3 +- .../core/src/components/PinInput/PinInput.tsx | 49 +++--- .../src/components/PinInput/PinInputText.tsx | 1 + .../LinearProgress/LinearProgress.tsx | 2 +- .../core/src/components/Swiper/Swiper.tsx | 12 +- .../core/src/components/Swiper/SwiperItem.tsx | 13 +- .../core/src/components/Table/TableRow.tsx | 2 +- packages/core/src/components/Timer.tsx | 9 +- packages/native/src/components/WebView.tsx | 16 +- 17 files changed, 176 insertions(+), 167 deletions(-) diff --git a/eslint.config.js b/eslint.config.js index 23cb3a392..7f257fad7 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -51,6 +51,7 @@ module.exports = [ "@typescript-eslint/no-unnecessary-type-constraint": "off", "react-native/no-inline-styles": "off", "react-native/no-color-literals": "off", + "react-native/no-raw-text": "off", // ignore unused vars that start with underscore "@typescript-eslint/no-unused-vars": [ diff --git a/example/src/NativeWindExample.tsx b/example/src/NativeWindExample.tsx index 80465d47f..11c2f7a43 100644 --- a/example/src/NativeWindExample.tsx +++ b/example/src/NativeWindExample.tsx @@ -7,20 +7,16 @@ import { CustomPinInputText, DeckSwiper, DeckSwiperCard, - KeyboardAvoidingView, LinearProgress, LoadingIndicator, LottieAnimation, Markdown, PinInput, - Shadow, Swiper, SwiperItem, Timer, VideoPlayer, WebView, - YoutubePlayer, - TextField, } from "@draftbit/ui"; import { LoadingIndicatorType } from "@draftbit/core/lib/typescript/src/components/LoadingIndicator"; import Section, { Container } from "./Section"; @@ -35,7 +31,7 @@ const NativeWindExample: React.FC<{ theme?: any }> = () => {
= () => {
- + = () => { title="DeckSwiper + DeckSwiperCard" style={{ paddingBottom: 30 }} > - + Card 1 @@ -75,27 +71,17 @@ const NativeWindExample: React.FC<{ theme?: any }> = () => {
-
- - - -
-
- + = () => {
- - - - circle - - - - wave - - - - bounce - - - - pulse - + + + + + + +
- + { "## NativeWind\n\nThis is **bold** and _italic_ text styled via `className`.\n\n- Item one\n- Item two\n- Item three" } @@ -154,7 +124,7 @@ const NativeWindExample: React.FC<{ theme?: any }> = () => {
@@ -167,12 +137,11 @@ const NativeWindExample: React.FC<{ theme?: any }> = () => { ( = () => { />
-
- - - - NativeWind Shadow - - - -
-
- + key} + className="w-100 h-48" + vertical={false} + loop + > Slide 1 @@ -217,35 +181,13 @@ const NativeWindExample: React.FC<{ theme?: any }> = () => {
- - - - timerRef.current?.start()} - > - Start - - timerRef.current?.stop()} - > - Stop - - timerRef.current?.reset()} - > - Reset - - - +
@@ -261,18 +203,10 @@ const NativeWindExample: React.FC<{ theme?: any }> = () => {
- -
- -
); }; diff --git a/packages/core/src/components/DeckSwiper/DeckSwiperCard.tsx b/packages/core/src/components/DeckSwiper/DeckSwiperCard.tsx index 5e0e43e67..28bada55a 100644 --- a/packages/core/src/components/DeckSwiper/DeckSwiperCard.tsx +++ b/packages/core/src/components/DeckSwiper/DeckSwiperCard.tsx @@ -12,21 +12,24 @@ import { withTheme } from "@draftbit/theme"; export interface DeckSwiperCardProps extends Omit { style?: StyleProp; + className?: string; theme: ReadTheme; } const DeckSwiperCard: React.FC< React.PropsWithChildren -> = ({ style, children, theme, ...rest }) => ( +> = ({ style, className, children, theme, ...rest }) => ( {children} diff --git a/packages/core/src/components/KeyboardAvoidingView.tsx b/packages/core/src/components/KeyboardAvoidingView.tsx index 8f1a6ceb8..57e351c2c 100644 --- a/packages/core/src/components/KeyboardAvoidingView.tsx +++ b/packages/core/src/components/KeyboardAvoidingView.tsx @@ -18,6 +18,7 @@ interface KeyboardAvoidingViewProps extends ViewProps { androidKeyboardVerticalOffset?: number; iosBehavior?: KeyboardAvoidingViewBehavior; iosKeyboardVerticalOffset?: number; + className?: string; } const KeyboardAvoidingView: React.FC = ({ @@ -27,6 +28,7 @@ const KeyboardAvoidingView: React.FC = ({ androidKeyboardVerticalOffset, iosBehavior, iosKeyboardVerticalOffset, + className, ...rest }) => { let behaviorResult: KeyboardAvoidingViewBehavior; @@ -53,6 +55,8 @@ const KeyboardAvoidingView: React.FC = ({ ); diff --git a/packages/core/src/components/LoadingIndicator.tsx b/packages/core/src/components/LoadingIndicator.tsx index 2ebd5a385..ef71f0bdf 100644 --- a/packages/core/src/components/LoadingIndicator.tsx +++ b/packages/core/src/components/LoadingIndicator.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { StyleProp, ViewStyle } from "react-native"; +import { View, StyleProp, ViewStyle } from "react-native"; import { withTheme } from "@draftbit/theme"; import type { ReadTheme } from "@draftbit/theme"; import { @@ -34,6 +34,7 @@ export enum LoadingIndicatorType { type Props = { style?: StyleProp; + className?: string; color?: string; theme: ReadTheme; type?: LoadingIndicatorType; @@ -61,10 +62,19 @@ const LoadingIndicator: React.FC> = ({ type = LoadingIndicatorType.plane, size, style, + className, ...rest }) => { const SpinnerComponent = SPINNER_COMPONENTS[type]; - return ; + return ( + + + + ); }; export default withTheme(LoadingIndicator); diff --git a/packages/core/src/components/LottieAnimation.tsx b/packages/core/src/components/LottieAnimation.tsx index 6a6224a47..a6326fb5a 100644 --- a/packages/core/src/components/LottieAnimation.tsx +++ b/packages/core/src/components/LottieAnimation.tsx @@ -4,6 +4,7 @@ import LottieView, { AnimationObject } from "lottie-react-native"; type Props = { style?: StyleProp; + className?: string; resizeMode?: "cover" | "contain" | "center"; source: string | AnimationObject | { uri: string }; autoPlay?: boolean; @@ -15,6 +16,7 @@ const LottieAnimation = forwardRef( ( { style, + className, source, autoPlay = true, loop = true, @@ -25,7 +27,12 @@ const LottieAnimation = forwardRef( ref ) => { return ( - + ; + className?: string; }; const childToString = (child?: React.ReactNode): string => { @@ -32,35 +34,42 @@ const childToString = (child?: React.ReactNode): string => { const Markdown: React.FC> = ({ children: childrenProp, style, + className, }) => { const children = React.Children.toArray(childrenProp); const text = children.map(childToString).join(""); const bodyStyle = StyleSheet.flatten(style); - const { textStyles } = extractStyles(bodyStyle); + const { viewStyles, textStyles } = extractStyles(bodyStyle); return ( - //'body' style applies to all markdown components - //@ts-ignore TS does not like the type of this named style for some reason - ( - - {node.children[0].content} - - ), - }} + - {text} - + {/*//'body' style applies to all markdown components*/} + {/*@ts-ignore TS does not like the type of this named style for some reason*/} + ( + + {node.children[0].content} + + ), + }} + > + {text} + + ); }; diff --git a/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx b/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx index 3ee955fec..a6c66835d 100644 --- a/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx +++ b/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx @@ -52,7 +52,7 @@ const AudioPlayerWithInterface = React.forwardRef< : newHeadlessAudioPlayerRef; const { - color = theme.colors.text.strong, + color, fontFamily, fontWeight, fontSize, @@ -67,7 +67,7 @@ const AudioPlayerWithInterface = React.forwardRef< } = StyleSheet.flatten(style || {}); const textStyles = { - color, + color: color ?? (className ? undefined : theme.colors.text.strong), fontFamily, fontWeight, fontSize, @@ -131,7 +131,7 @@ const AudioPlayerWithInterface = React.forwardRef< // @ts-ignore className={className} style={[ - { + !className && { backgroundColor: theme.colors.background.base, borderColor: theme.colors.border.base, }, diff --git a/packages/core/src/components/PinInput/CustomPinInputCell.tsx b/packages/core/src/components/PinInput/CustomPinInputCell.tsx index 2223f5bef..eff633b40 100644 --- a/packages/core/src/components/PinInput/CustomPinInputCell.tsx +++ b/packages/core/src/components/PinInput/CustomPinInputCell.tsx @@ -3,7 +3,8 @@ import { StyleProp, ViewStyle, View, LayoutChangeEvent } from "react-native"; interface CustomPinInputCellProps { style?: StyleProp; - onLayout: (event: LayoutChangeEvent) => void; + className?: string; + onLayout?: (event: LayoutChangeEvent) => void; } /** diff --git a/packages/core/src/components/PinInput/PinInput.tsx b/packages/core/src/components/PinInput/PinInput.tsx index 2c5892318..86edada99 100644 --- a/packages/core/src/components/PinInput/PinInput.tsx +++ b/packages/core/src/components/PinInput/PinInput.tsx @@ -35,6 +35,7 @@ interface PinInputProps extends Omit { focusedBorderWidth?: number; focusedTextColor?: string; style?: StyleProp; + className?: string; theme: ReadTheme; } @@ -55,6 +56,7 @@ const PinInput = React.forwardRef( focusedTextColor, secureTextEntry, style, + className, ...rest }, ref @@ -132,28 +134,31 @@ const PinInput = React.forwardRef( }; return ( -