kylefang/nativewind
1
0
Fork 0
mirror of https://github.com/zhigang1992/nativewind.git synced 2026-06-15 18:27:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add feature preview flag

Browse Source
This commit is contained in:
Mark Lawlor
2022-05-05 13:38:53 +10:00
parent 4cf39f1388
commit 06d3f46106
6 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@@ -203,11 +203,11 @@ function MyAppsProviders ({ children }) {
You don't need to provide these props if you are using Babel or spreading the CLI output.
| Prop | Values | Default | Description |
| -------- | ------------------------------------------------------------------- | ----------- | ----------------------------------------- |
| platform | `web`, `native`, `ios`, `android`, `windows`, `macos`, `web-inline` | Platform.OS | Specifies how the styles are transformed. |
| style | Compiled style object | | |
| media | Compiled media object | | |
| Prop | Values | Default | Description |
| -------- | ----------------------------------------------------- | ----------- | ----------------------------------------- |
| platform | `web`, `native`, `ios`, `android`, `windows`, `macos` | Platform.OS | Specifies how the styles are transformed. |
| style | Compiled style object | | |
| media | Compiled media object | | |
## Component API

2
__tests__/custom-tailwindcss/platform-prefixes.ts
View File

@@ -52,7 +52,7 @@ tailwindRunner("Platform Prefixes", [
"web_w-px.0": { width: 1 },
},
media: {
"web_w-px": ["web-inline"],
"web_w-px": ["web"],
},
},
],

2
src/context.ts
View File

@@ -31,3 +31,5 @@ export const TailwindSetColorSchemeContext = createContext<
export const TailwindPlatformContext = createContext<Platform | undefined>(
undefined
);
export const TailwindPreviewContext = createContext<boolean>(false);

2
src/plugin/index.ts
View File

@@ -10,6 +10,4 @@ export default plugin(function ({ addVariant }) {
"native",
nativePlatforms.map((platform) => `@media ${platform}`)
);
addVariant("web", "@media web-inline");
});

19
src/provider.tsx
View File

@@ -7,6 +7,7 @@ import {
TailwindColorSchemeContext,
TailwindMediaContext,
TailwindPlatformContext,
TailwindPreviewContext,
TailwindSetColorSchemeContext,
TailwindStyleContext,
} from "./context";
@@ -16,6 +17,7 @@ export interface TailwindProviderProps {
media?: MediaRecord;
colorScheme?: ColorSchemeName;
platform?: typeof Platform.OS | "native";
preview?: boolean;
}
export function TailwindProvider({
@@ -23,6 +25,7 @@ export function TailwindProvider({
media = globalThis.tailwindcss_react_native_media,
colorScheme: overrideColorScheme,
platform = Platform.OS,
preview = false,
children,
}: PropsWithChildren<TailwindProviderProps>) {
const [colorScheme, setColorScheme] = useState<ColorSchemeName>(
@@ -33,13 +36,15 @@ export function TailwindProvider({
<TailwindStyleContext.Provider value={styles}>
<TailwindMediaContext.Provider value={media}>
<TailwindPlatformContext.Provider value={platform}>
<TailwindColorSchemeContext.Provider
value={overrideColorScheme || colorScheme}
>
<TailwindSetColorSchemeContext.Provider value={setColorScheme}>
{children}
</TailwindSetColorSchemeContext.Provider>
</TailwindColorSchemeContext.Provider>
<TailwindPreviewContext.Provider value={preview}>
<TailwindColorSchemeContext.Provider
value={overrideColorScheme || colorScheme}
>
<TailwindSetColorSchemeContext.Provider value={setColorScheme}>
{children}
</TailwindSetColorSchemeContext.Provider>
</TailwindColorSchemeContext.Provider>
</TailwindPreviewContext.Provider>
</TailwindPlatformContext.Provider>
</TailwindMediaContext.Provider>
</TailwindStyleContext.Provider>

3
src/shared/platforms.ts
View File

@@ -1,6 +1,6 @@
import { Platform } from "react-native";
export type Platform = typeof Platform.OS | "native" | "web-inline";
export type Platform = typeof Platform.OS | "native";
export const platforms: Platform[] = [
"android",
@@ -9,7 +9,6 @@ export const platforms: Platform[] = [
"native",
"windows",
"macos",
"web-inline",
];
export const nativePlatforms: Platform[] = [