@kbach/react-native 1.0.0-beta.26 → 1.0.0-beta.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -13,6 +13,17 @@ resolved to a `StyleSheet`-ready style object instead of injected CSS.
|
|
|
13
13
|
npm install @kbach/react-native
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
+
Then, pick the one section below that matches how you're actually running
|
|
17
|
+
the app — each is a genuinely different setup, not layered options:
|
|
18
|
+
|
|
19
|
+
- **React Native CLI** (`npx react-native ...`) → [React Native CLI](#react-native-cli)
|
|
20
|
+
- **Expo, using Expo Go** (`npx expo start`, scanning the QR code in the Expo
|
|
21
|
+
Go app) → [Expo Go](#expo-go) — nothing to configure at all
|
|
22
|
+
- **Expo, using a dev client or a bare/prebuilt project** (`npx expo run:android`,
|
|
23
|
+
or EAS Build) → [Expo (dev client / prebuild)](#expo-dev-client--prebuild)
|
|
24
|
+
- **Expo Web** (`npx expo start --web`, or any `react-native-web` target) →
|
|
25
|
+
[Expo Web](#expo-web) — also nothing to configure
|
|
26
|
+
|
|
16
27
|
### React Native CLI
|
|
17
28
|
|
|
18
29
|
```js
|
|
@@ -164,6 +175,14 @@ into a parent component yourself and pass it down as an explicit prop.
|
|
|
164
175
|
|
|
165
176
|
## Dark mode
|
|
166
177
|
|
|
178
|
+
**Zero setup, on every platform this package supports** — real native
|
|
179
|
+
*and* Expo Web. Unlike [`@kbach/react`](https://www.npmjs.com/package/@kbach/react),
|
|
180
|
+
there's no build-time CSS step here to keep in sync with the runtime:
|
|
181
|
+
`dark:` is resolved fresh from a live parameter on native (no selectors at
|
|
182
|
+
all to generate ahead of time), and Expo Web's default strategy is already
|
|
183
|
+
`'attribute'` — a manual toggle just works, no config file, no
|
|
184
|
+
`applyKbachConfig()` call:
|
|
185
|
+
|
|
167
186
|
```tsx
|
|
168
187
|
import { useTheme } from '@kbach/react-native';
|
|
169
188
|
|
|
@@ -15,11 +15,12 @@ function applyToDom(dark) {
|
|
|
15
15
|
if (typeof document === "undefined") return;
|
|
16
16
|
const root = document.documentElement;
|
|
17
17
|
const strategy = getTheme().darkMode;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
} else if (strategy === "attribute") {
|
|
18
|
+
root.classList.toggle("dark", strategy === "class" && dark);
|
|
19
|
+
root.classList.toggle("light", strategy === "class" && !dark);
|
|
20
|
+
if (strategy === "attribute") {
|
|
22
21
|
root.setAttribute("data-theme", dark ? "dark" : "light");
|
|
22
|
+
} else {
|
|
23
|
+
root.removeAttribute("data-theme");
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
26
|
var mode = "system";
|
package/dist/darkModeStore.js
CHANGED
|
@@ -44,11 +44,12 @@ function applyToDom(dark) {
|
|
|
44
44
|
if (typeof document === "undefined") return;
|
|
45
45
|
const root = document.documentElement;
|
|
46
46
|
const strategy = (0, import_theme.getTheme)().darkMode;
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
} else if (strategy === "attribute") {
|
|
47
|
+
root.classList.toggle("dark", strategy === "class" && dark);
|
|
48
|
+
root.classList.toggle("light", strategy === "class" && !dark);
|
|
49
|
+
if (strategy === "attribute") {
|
|
51
50
|
root.setAttribute("data-theme", dark ? "dark" : "light");
|
|
51
|
+
} else {
|
|
52
|
+
root.removeAttribute("data-theme");
|
|
52
53
|
}
|
|
53
54
|
}
|
|
54
55
|
var mode = "system";
|
package/dist/index.web.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kbach/react-native",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.27",
|
|
4
4
|
"description": "Kbach's utility-class styling engine for React Native — the same class names as @kbach/react, resolved to a StyleSheet-ready style object via a Kotlin/JNI TurboModule (native), the same WASM engine @kbach/react uses (Expo Web / react-native-web), or a pure-JS fallback engine (Expo Go). Ships its own native Android module — one npm install, no separate native package. Beta. Native is Android-only (no iOS bridge yet); works with the React Native CLI, an Expo dev client, AND Expo Go (a reduced-coverage pure-JS fallback, since Expo Go can't load any custom native module).",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|