diff --git a/src/style-sheet/index.ts b/src/style-sheet/index.ts index 655ef51..098a4d9 100644 --- a/src/style-sheet/index.ts +++ b/src/style-sheet/index.ts @@ -11,7 +11,7 @@ export const NativeWindStyleSheet = { setDimensions: runtime.setDimensions.bind(runtime), setAppearance: runtime.setAppearance.bind(runtime), setPlatform: runtime.setPlatform.bind(runtime), - setPreprocessed: runtime.setPreprocessed.bind(runtime), + setCSS: runtime.setPreprocessed.bind(runtime), setDangerouslyCompileStyles: runtime.setDangerouslyCompileStyles.bind(runtime), }; diff --git a/src/style-sheet/runtime.ts b/src/style-sheet/runtime.ts index 9929a09..b494b3f 100644 --- a/src/style-sheet/runtime.ts +++ b/src/style-sheet/runtime.ts @@ -123,13 +123,13 @@ export class StyleSheetRuntime extends ColorSchemeStore { setDimensions(dimensions: Dimensions) { this.window = dimensions.get("window"); - const screen = dimensions.get("screen"); - this.orientation = screen.height >= screen.width ? "portrait" : "landscape"; + this.orientation = + this.window.height >= this.window.width ? "portrait" : "landscape"; this.dimensionListener?.remove(); this.dimensionListener = dimensions.addEventListener( "change", - ({ window, screen }) => { + ({ window }) => { const topics: string[] = ["window"]; if (window.width !== this.window.width) topics.push("width"); @@ -138,7 +138,7 @@ export class StyleSheetRuntime extends ColorSchemeStore { this.window = window; const orientation = - screen.height >= screen.width ? "portrait" : "landscape"; + window.height >= window.width ? "portrait" : "landscape"; if (orientation !== this.orientation) topics.push("orientation"); this.orientation = orientation; diff --git a/website/docs/api/native-wind-style-sheet.md b/website/docs/api/native-wind-style-sheet.md new file mode 100644 index 0000000..687f00e --- /dev/null +++ b/website/docs/api/native-wind-style-sheet.md @@ -0,0 +1,21 @@ +# NativeWindStyleSheet + +A StyleSheet is an abstraction similar to CSS StyleSheets and React Native's StyleSheet. + +## Methods + +### setPlatform(platform: Platform.OS) + +Override the platform used by the platform prefixes. Defaults to Platform.OS + +### setCss(boolean) + +Override if the StyleSheet should use setCss or native styles. Defaults to `true` if Platform.OS === `web` && React Native Web >0.18. + +### setDimensions(dimensions: Dimensions) + +Override how window dimensions are calculated. Defaults to Dimensions from React Native. + +### setAppearance(appearance: Appearance) + +Override the app's appearance. Defaults to Appearance from React Native. diff --git a/website/docs/api/tailwind-provider.md b/website/docs/api/tailwind-provider.md deleted file mode 100644 index e51fc37..0000000 --- a/website/docs/api/tailwind-provider.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: TailwindProvider -sidebar_label: ---- - -All components need to be within the context of the TailwindProvider. - -```tsx -import { TailwindProvider } from "tailwindcss-react-native"; - -function MyAppsProviders({ children }) { - return {children}; -} -``` - -## Options - -| Prop | Values | Default | Description | -| ------------------ | ----------------- | ----------------------------------------- | ------------------------------------- | -| initialColorScheme | `ColorSchemeName` | `Appearance.getColorScheme() ?? 'light'` | Set an ColorScheme value. | -| webOutput | `css`, `native` | `ReactNativeWeb >=0.8 ? 'css' : 'native'` | Specify how web styles are outputted. | - -## Advanced options - -| Prop | Values | Default | Description | -| -------- | ------------------------ | ----------- | ----------------------------------------------------------- | -| platform | Override the Platform.OS | Platform.OS | Used to match platform media queries | -| style | Compiled style object | `undefined` | For manual injection via the [CLI](../guides/cli-native.md) | -| media | Compiled media object | `undefined` | For manual injection via the [CLI](../guides/cli-native.md) | diff --git a/website/docs/guides/tailwindcss-react-native.md b/website/docs/guides/tailwindcss-react-native.md index 35f5221..f60eab3 100644 --- a/website/docs/guides/tailwindcss-react-native.md +++ b/website/docs/guides/tailwindcss-react-native.md @@ -10,7 +10,7 @@ The TailwindProvider is no longer required, unless you wish to inject styles or Nativewind defaults to CSS for web if using React Native Web >=0.18 -You can control this setting via the `webOutput` option on `TailwindProvider`. +You can control this setting via the `NativeWindStyleSheet.setPreprocessed(false)` ## useTailwind() diff --git a/website/sidebars.js b/website/sidebars.js index 9a5c385..49bba66 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -69,8 +69,8 @@ const sidebars = { items: [ "api/styled", "api/StyledComponent", - "api/tailwind-provider", "api/use-color-scheme", + "api/native-wind-style-sheet", "api/use-tailwind", ], },