diff --git a/README.md b/README.md index dcee6699..b526008f 100644 --- a/README.md +++ b/README.md @@ -59,12 +59,12 @@ Then follow [installation guides](https://unistyl.es/v3/start/getting-started) f happyfloat - - hyoban - oscklm + + giovannilondero + ## Past sponsors @@ -86,6 +86,9 @@ Then follow [installation guides](https://unistyl.es/v3/start/getting-started) f abanobboles + + hyoban + ## Sponsor my work diff --git a/docs/.astro/settings.json b/docs/.astro/settings.json index 4fa34cf8..07e74934 100644 --- a/docs/.astro/settings.json +++ b/docs/.astro/settings.json @@ -1,5 +1,5 @@ { "_variables": { - "lastUpdateCheck": 1733737796859 + "lastUpdateCheck": 1737126711469 } } \ No newline at end of file diff --git a/docs/.astro/types.d.ts b/docs/.astro/types.d.ts index 9a2a78c1..03d7cc43 100644 --- a/docs/.astro/types.d.ts +++ b/docs/.astro/types.d.ts @@ -1,2 +1,2 @@ /// -/// \ No newline at end of file +/// \ No newline at end of file diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 80a4d673..618ff302 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -82,11 +82,12 @@ export default defineConfig({ { label: 'Guides', items: [ + { label: 'Merging styles', slug: 'v3/guides/merging-styles', badge: 'New!' }, { label: 'Theming', slug: 'v3/guides/theming' }, { label: 'Avoiding Keyboard', slug: 'v3/guides/avoiding-keyboard' }, { label: 'Expo Router', slug: 'v3/guides/expo-router' }, { label: 'Custom web', slug: 'v3/guides/custom-web', badge: 'WIP' }, - { label: 'Server side rendering', slug: 'v3/guides/server-side-rendering', badge: 'WIP' }, + { label: 'Server side rendering', slug: 'v3/guides/server-side-rendering', badge: 'New!' }, ] }, { @@ -101,9 +102,11 @@ export default defineConfig({ { label: 'Variants', slug: 'v3/references/variants' }, { label: 'Compound Variants', slug: 'v3/references/compound-variants' }, { label: 'Web styles', slug: 'v3/references/web-styles' }, - { label: 'Web Only Features', slug: 'v3/references/web-only' }, - { label: 'Scoped theme', slug: 'v3/references/scoped-theme', badge: 'New!' }, - { label: 'withUnistyles', slug: 'v3/references/with-unistyles', badge: 'New!' }, + { label: 'Web Only Features', slug: 'v3/references/web-only', badge: 'Updated' }, + { label: 'Scoped theme', slug: 'v3/references/scoped-theme' }, + { label: 'Update 3rd party views', slug: 'v3/references/3rd-party-views', badge: 'New!' }, + { label: 'withUnistyles', slug: 'v3/references/with-unistyles' }, + { label: 'useUnistyles', slug: 'v3/references/use-unistyles', badge: 'New!' }, { label: 'Display and Hide', slug: 'v3/references/display-hide' }, { label: 'Edge to edge', slug: 'v3/references/edge-to-edge' }, { label: 'Dimensions', slug: 'v3/references/dimensions' }, @@ -114,7 +117,7 @@ export default defineConfig({ label: 'Other', items: [ { label: 'How to report a bug?', slug: 'v3/other/how-to-report-bug' }, - { label: 'Babel plugin', slug: 'v3/other/babel-plugin' }, + { label: 'Babel plugin', slug: 'v3/other/babel-plugin', badge: 'Updated' }, { label: 'Dependencies', slug: 'v3/other/dependencies' }, { label: 'For library authors', slug: 'v3/other/for-library-authors' }, { label: 'For sponsors', slug: 'v3/other/for-sponsors' }, diff --git a/docs/package.json b/docs/package.json index ec7ebb84..079563de 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,9 +12,9 @@ "dependencies": { "@astrojs/check": "0.9.4", "@astrojs/sitemap": "3.2.1", - "@astrojs/starlight": "0.29.2", - "@fontsource-variable/nunito": "5.1.0", - "astro": "4.16.13", + "@astrojs/starlight": "0.30.5", + "@fontsource-variable/nunito": "5.1.1", + "astro": "5.1.4", "astro-expressive-code": "0.38.3", "astro-seo": "0.8.4", "autoprefixer": "10.4.20", diff --git a/docs/src/content/docs/v3/guides/merging-styles.mdx b/docs/src/content/docs/v3/guides/merging-styles.mdx new file mode 100644 index 00000000..8d8d79cf --- /dev/null +++ b/docs/src/content/docs/v3/guides/merging-styles.mdx @@ -0,0 +1,68 @@ +--- +title: Merging styles +description: Learn about how to merge styles with Unistyles 3.0 +--- + +import { Card, Aside } from '@astrojs/starlight/components' +import Seo from '../../../../components/Seo.astro' + + + +While using Unistyles, it's crucial to understand how styles need to be merged and why it is so important. + +### Introduction + +In the early versions of Unistyles 3.0, we tried to solve this issue with a Babel plugin. However, it was too complex to maintain various edge cases (especially with `Pressable`), and developers frequently encountered many `Unistyles: Style is not bound!` errors. + +With the new approach, we shift the responsibility of merging styles to the user. In other words, the Babel plugin will no longer convert your style tags from objects to arrays. + +### How to merge multiple styles + +Unistyles doesn't provide any extra API for merging styles. Instead, we encourage you to use the `[]` syntax supported by React Native components. + +```tsx + +``` + +If Unistyles detects that you've used the spread operator and the styles have no attached C++ state, it will: +- Restore the state on the C++ side +- Merge styles in an unpredictable order (as we lose order information) +- Warn you in `__DEV__` mode about this + + + +When you see this warning, your component will render correctly, but any new event that re-computes your styles could: +- Output incorrect styles due to the unknown order of merging +- Not update at all if, during the merging process, you altered props that were previously listening for changes + +It's critical to ship Unistyles 3.0 apps without this warning, as it can cause unexpected behavior. + +### Spreading a single Unistyle + +Another problematic case is spreading a single Unistyle and merging it, e.g., with inline styles: + +```tsx + +``` + +Although we can restore the C++ state for `styles.container`, we cannot identify that `backgroundColor: red` should override the `backgroundColor` used in `styles.container`. The order of merging will be preserved until the first re-computation of styles. + +Also, keep in mind that restoring the C++ state takes unnecessary extra time, so it's better to avoid it. + +### Summary + +- Use the `[]` syntax to merge styles +- Avoid spreading Unistyles +- Avoid merging your styles with the spread operator +- Unistyles will warn you about this in `__DEV__` mode + +With this new approach, you're in control of merging your styles. + + diff --git a/docs/src/content/docs/v3/guides/server-side-rendering.mdx b/docs/src/content/docs/v3/guides/server-side-rendering.mdx index a8e5d6f7..dbd8ee4c 100644 --- a/docs/src/content/docs/v3/guides/server-side-rendering.mdx +++ b/docs/src/content/docs/v3/guides/server-side-rendering.mdx @@ -3,7 +3,7 @@ title: SSR description: Learn about SSR with Unistyles 3.0 --- -import { Card } from '@astrojs/starlight/components' +import { Card, Aside } from '@astrojs/starlight/components' import Seo from '../../../../components/Seo.astro' -🚧 Work is progress. Guide will be released soon. +Unistyles 3.0 is fully compatible with Next.js Server Side Rendering (SSR). We're supporting both client and server components. +### Usage + +To use server-side rendered styles, create following **client side** component: + +```tsx title="Style.tsx" /useServerUnistyles/ /useServerInsertedHTML/ /'use client'/ +'use client' + +import { PropsWithChildren } from 'react' +import { useServerUnistyles } from 'react-native-unistyles/server' +import { useServerInsertedHTML } from 'next/navigation' +import './unistyles' + +export const Style = ({ children }: PropsWithChildren) => { + const unistyles = useServerUnistyles() + + useServerInsertedHTML(() => unistyles) + + return <>{children} +} +``` + +With the component in place, make sure it wraps your body's children: + +```diff lang="tsx" title="layout.tsx" ++ import '../unistyles' ++ import { Style } from '../Style' + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + ++ + + + ); +} +``` + + + +With this setup, we will ensure that Unistyles is initialized correctly and injects CSS on the server side. diff --git a/docs/src/content/docs/v3/guides/theming.mdx b/docs/src/content/docs/v3/guides/theming.mdx index ac39e194..22d7e414 100644 --- a/docs/src/content/docs/v3/guides/theming.mdx +++ b/docs/src/content/docs/v3/guides/theming.mdx @@ -129,6 +129,26 @@ const styles = StyleSheet.create(theme => ({ })) ``` +Other, discouraged way is to access it in the hook `useUnistyles`: + +```tsx /useUnistyles/ +import { useUnistyles } from 'react-native-unistyles' + +const MyComponent = () => { + const { theme } = useUnistyles() + + return ( + + My theme is {theme.colors.primary} + + ) +} +``` + +:::caution +`useUnistyles` is not recommended as it will re-render your component on every change of the theme +::: + ### Get the current theme name To get the current theme name, import `UnistylesRuntime`: diff --git a/docs/src/content/docs/v3/other/babel-plugin.mdx b/docs/src/content/docs/v3/other/babel-plugin.mdx index 83aad6ab..70c38fd5 100644 --- a/docs/src/content/docs/v3/other/babel-plugin.mdx +++ b/docs/src/content/docs/v3/other/babel-plugin.mdx @@ -70,46 +70,7 @@ const stylesheet = StyleSheet.create((theme, rt) => ({ This helps us identify your `StyleSheet` while you're developing your app and trigger multiple `hot-reloads`. Such identification is required to swap your `StyleSheet` with another one, ensuring that you get up-to-date values during reloads. This feature does not affect your app in production, as the bundle never reloads in that environment. -### 3. Modifying your component `style` prop - -Each `Unistyle` (C++ HybridObject) has an attached `C++` state. This state can be lost when using the spread operator, which is why Unistyles safeguards against that. - -If we try to read the style on C++ side without its associated state, an error will be thrown: `Unistyle is not bound!`. - -However, this doesn't mean you can't copy or spread your styles. It is still possible to do so, but it requires the Babel plugin, which converts your styles into an array format. - -```ts -// 😩 ouch, you have just removed C++ state -const mergedStyles = { - ...styles.container, - ...styles.text -} - -// 💥 Unistyle is not bound! - -``` - -```ts -// 😎 you're safe -const mergedStyles = [ - styles.container, - styles.text -] - -// 😇 we can read the state - -``` - -Or with babel plugin: - -```ts - - -// 😇 will be replaced with - -``` - -### 4. Component factory +### 3. Component factory (borrowing ref) This is the most crucial part—without it, Unistyles won’t be able to update your views from C++. In the early versions of Unistyles 3.0, we tried solving this problem by using the `ref` prop, but it wasn’t reliable enough. @@ -180,63 +141,95 @@ import { Image } from 'react-native-unistyles/components/native/Image' ``` -### Summary +### 4. Creating scopes for stateless variants -That's it! We hope you enjoy the DX of Unistyles 3.0 with the help of the Babel plugin. If you encounter any Babel issues, we're ready to tackle them and resolve them with priority! +When you use variants, each time you call `useVariants`, a new scope is created. This scope contains a local copy of stylesheet that won't affect other components. +This feature is similar to time travel, allowing you to explore different states of your styles with different calls to `useVariants`. -## Additional configuration +From your perspective, using variants is simple: you just need to call the `useVariants` hook: -The Babel plugin comes with a few additional options to extend its usage. +```tsx +styles.useVariants({ + size: 'small' +}) +``` -### `autoProcessImports` +Behind the scenes, we create a scoped constant that can be accessed anywhere within the same block: -If you use ui-kit components, you can configure the Babel plugin to process them. +```tsx +const _styles = styles +{ + const styles = _styles.useVariants({ + size: 'small' + }) -```js title="babel.config.js" -/** @type {import('react-native-unistyles/plugin').UnistylesPluginOptions} */ -const unistylesPluginConfig = { - autoProcessImports: ['@lib/ui-kit'], + // Your code here } +``` -module.exports = function (api) { - api.cache(true) +This approach also works seamlessly with `console.log`, allowing you to inspect styles at any point: - return { - plugins: [ - ['react-native-unistyles/plugin', unistylesPluginConfig] - ] - } -} +```tsx +// Styles without variants +console.log(styles.container) + +styles.useVariants({ + size: 'small' +}) + +// Styles with variants: small +console.log(styles.container) + +styles.useVariants({ + size: 'large' +}) + +// Styles with variants: large +console.log(styles.container) ``` -### `autoProcessPaths` +By leveraging such scopes, we ensure support for any level of nesting! -Similar to `autoProcessImports`, you can configure the Babel plugin to process paths. +### Extra configuration -```js title="babel.config.js" -/** @type {import('react-native-unistyles/plugin').UnistylesPluginOptions} */ -const unistylesPluginConfig = { - autoProcessPaths: ['external-library/components'], -} +The Babel plugin comes with a few additional options to extend its usage. -module.exports = function (api) { - api.cache(true) +#### `autoProcessImports` - return { - plugins: [ - ['react-native-unistyles/plugin', unistylesPluginConfig] - ] - } -} +By default babel plugin will look for any `react-native-unistyles` import to start processing your file. +However, in some cases you might want to process files that miss such import: +- ui-kits that aggregates Unistyles components +- monorepos that use Unistyles under absolute path like `@codemask/styles` + +If that's your case, you can configure the Babel plugin to process them. + +#### `autoProcessPaths` + +By default babel plugin will ignore `node_modules`. +However similar to `autoProcessImports`, you can configure it to process extra paths. + +Under these paths we will replace `react-native` imports with `react-native-unistyles` factories that will borrow components refs [read more](/v3/other/babel-plugin#3-component-factory-borrowing-ref). + +Defaults to: + +```ts +['react-native-reanimated/src/component', 'react-native-gesture-handler/src/components'] ``` -### `debug` +#### `debug` -In order to debug issues with the Babel plugin you can enable the `debug` boolean. +In order to list detected dependencies by the Babel plugin you can enable the `debug` flag. +It will `console.log` name of the file and component with Unistyles dependencies. + +#### Usage in `babel.config.js` + +You can apply any of the options above as follows: ```js title="babel.config.js" /** @type {import('react-native-unistyles/plugin').UnistylesPluginOptions} */ -const unistylesPluginConfig = { +const unistylesPluginOptions = { + autoProcessImports: ['@react-native-ui-kit', '@codemask/styles'], + autoProcessPaths: ['external-library/components'], debug: true, } @@ -245,7 +238,7 @@ module.exports = function (api) { return { plugins: [ - ['react-native-unistyles/plugin', unistylesPluginConfig] + ['react-native-unistyles/plugin', unistylesPluginOptions] ] } } diff --git a/docs/src/content/docs/v3/other/for-library-authors.mdx b/docs/src/content/docs/v3/other/for-library-authors.mdx index d52e3605..192d5bd9 100644 --- a/docs/src/content/docs/v3/other/for-library-authors.mdx +++ b/docs/src/content/docs/v3/other/for-library-authors.mdx @@ -35,7 +35,7 @@ reducing boilerplate code and making your library more user-friendly. ## New architecture only -Unistyles does not export any code that re-renders your components. While it requires enabling the New Architecture, we believe this trade-off is worthwhile, as more apps are expected to transition to the New Architecture in the coming months. +Unistyles won't re-render your components unless you want to. While it requires enabling the New Architecture, we believe this trade-off is worthwhile, as more apps are expected to transition to the New Architecture in the coming months. ## Minimum requirements diff --git a/docs/src/content/docs/v3/references/3rd-party-views.mdx b/docs/src/content/docs/v3/references/3rd-party-views.mdx new file mode 100644 index 00000000..8d8f955f --- /dev/null +++ b/docs/src/content/docs/v3/references/3rd-party-views.mdx @@ -0,0 +1,28 @@ +--- +title: How to auto-update 3rd party views? +description: Learn about how to use Unistyles with 3rd party components +--- + +import { Card } from '@astrojs/starlight/components' +import Seo from '../../../../components/Seo.astro' + + + +:::tip +This is our decision algorithm that ensures best practices for your app. +::: + +1. If you're using `react-native`, `react-native-reanimated`, or `react-native-gesture-handler` components, avoid doing anything. It will work out of the box. + +2. If you're using third-party components and you're confident they internally use `react-native` components, check the [Babel plugin configuration](/v3/other/babel-plugin#extra-configuration) to see if they can be processed to work out of the box. + +3. If that fails, try migrating to the [withUnistyles](/v3/references/with-unistyles) factory. It follows best practices and ensures that only a single component is re-rendered when dependencies change. + +4. If that also fails, follow best practices and use the [useUnistyles](/v3/references/use-unistyles) hook. + + diff --git a/docs/src/content/docs/v3/references/display-hide.mdx b/docs/src/content/docs/v3/references/display-hide.mdx index a0987804..6abbe9d7 100644 --- a/docs/src/content/docs/v3/references/display-hide.mdx +++ b/docs/src/content/docs/v3/references/display-hide.mdx @@ -18,8 +18,7 @@ This was helpful for hiding certain JSX components based on specific screen size However, this pattern was a bit tedious, as it required writing custom logic to determine whether a component should be visible or not. -With Unistyles 3.0, we’ve removed the `useStyles` hook, so there is no direct way to listen for breakpoint changes. -But don’t worry — it’s still possible to hide or show components! +With Unistyles 3.0, preferred way of listening for breakpoint changes is with `Display` and `Hide` components. ### Display diff --git a/docs/src/content/docs/v3/references/use-unistyles.mdx b/docs/src/content/docs/v3/references/use-unistyles.mdx new file mode 100644 index 00000000..a2657688 --- /dev/null +++ b/docs/src/content/docs/v3/references/use-unistyles.mdx @@ -0,0 +1,165 @@ +--- +title: useUnistyles +description: Learn about escape hatch in Unistyles 3.0 +--- + +import { Card } from '@astrojs/starlight/components' +import Seo from '../../../../components/Seo.astro' + + + +Unistyles provides a way to access your app's theme and runtime within your components through a hook. + +:::caution +We strongly recommend **not using** this hook, as it will re-render your component on every change. This hook was created to simplify the migration process and should only be used when other methods fail. + +Follow our [decision algorithm](/v3/references/3rd-party-views) to learn when to use this hook. +::: + +### When to use it? + +If you're using `react-native`, `react-native-reanimated`, or `react-native-gesture-handler` components, you should avoid this hook. Unistyles updates these views via the ShadowTree without causing **any re-renders**. + +Consider using this hook only if: +- You need to update a view in a third-party library like `react-native-blurhash` +- You've already tried using [withUnistyles](/v3/references/with-unistyles) without success + +### How to use it? + +This is a standard hook that exposes `theme` and `rt` (runtime) properties. You can import it from `react-native-unistyles`: + +```tsx +import { useUnistyles } from 'react-native-unistyles' + +const MyComponent = () => { + const { theme, rt } = useUnistyles() + + return ( + // your view + ) +} +``` + +### Why isn't it recommended? + +We encourage using `withUnistyles` instead because it ensures only a single component is re-rendered instead of multiple components or the entire app. If you use this hook in a root component, you lose all the benefits of ShadowTree updates and trigger full app re-renders on every change. + +Learn more about [How Unistyles works?](/v3/start/how-unistyles-works) to understand why this is not ideal. + +Another advantage of `withUnistyles` is that it tracks style dependencies, ensuring only components with changed dependencies are re-rendered. In contrast, `useUnistyles` will re-render the component whenever `theme` or `rt` properties change. Note that `runtime` contains multiple values that can change frequently during your app's lifecycle. + +### How to use it correctly? + +If you must use this hook, follow these best practices: + +#### 1. Use it only for a single component +```tsx +import { useUnistyles } from 'react-native-unistyles' +import Icon from 'react-native-cool-icons/MaterialIcons' + +const MyComponent = () => { + const { theme } = useUnistyles() + + // Ensure this component has no children + return ( + + ) +} +``` + +Like `withUnistyles`, create a new component and use the hook there. Avoid using this hook in your root component or screen, as it will cause unnecessary re-renders for other components. + +#### 2. Use it with `react-navigation` components like `Stack` or `Tabs` +```tsx +import { Stack } from 'expo-router' + +export default function Layout() { + const { theme } = useUnistyles() + + return ( + + + + ) +} +``` + +This is allowed because `react-navigation` does not re-render screens on style prop change. Note that using `withUnistyles` instead may generate a warning since `Stack` components won't allow other external components. + +#### 3. Migration from Unistyles 2.0 +If you're migrating from version 2.0 to 3.0, you can use `useUnistyles` to access the theme and runtime in your components. This works similarly to the `useStyles` hook in 2.0. Once migration is complete, refactor your code to align with Unistyles 3.0 principles. + +### Bad Practices + +#### 1. Using it with complex components: +```tsx +import { useUnistyles } from 'react-native-unistyles' +import { Blurhash } from 'react-native-blurhash' + +const MyComponent = () => { + const { theme } = useUnistyles() + + return ( + + + + + + + ) +} +``` +This will re-render multiple components unnecessarily. Instead move `Blurhash` to a separate component and use `useUnistyles` there. + +#### 2. Using it at the root level: +```tsx +import { useUnistyles } from 'react-native-unistyles' + +const MyApp = () => { + const { theme } = useUnistyles() + + return ( + + + + ) +} +``` +Using the hook at the root level eliminates all Unistyles benefits, causing your app to re-render unnecessarily. + +#### 3. Using it with `react-native` components: +```tsx +import { useUnistyles } from 'react-native-unistyles' +import { Text } from 'react-native' + +const MyComponent = () => { + const { theme } = useUnistyles() + + return ( + + Hello world + + ) +} +``` +This is a bad practice. Unistyles updates `react-native` components through the ShadowTree without re-rendering. Using this hook here will cause unnecessary re-renders. Once again follow our [decision algorithm](/v3/references/3rd-party-views) to learn about another options. + + + + diff --git a/docs/src/content/docs/v3/references/web-only.mdx b/docs/src/content/docs/v3/references/web-only.mdx index 82876d04..2f4752f6 100644 --- a/docs/src/content/docs/v3/references/web-only.mdx +++ b/docs/src/content/docs/v3/references/web-only.mdx @@ -150,4 +150,109 @@ const styles = StyleSheet.create({ }) ``` +### CSS Variables + +Unistyles 3.0 converts all your themes to CSS variables by default, eliminating heavy JS processing when changing the theme and allowing the CSS engine to take over. + +In more detail, it converts all **strings** into CSS variables. For example, if we have the following theme: + +```ts +const darkTheme = { + colors: { + primary: '#4b7594' + }, + gap: (v: number) => v * 8, + fontSize: 16 +} +``` + +It will be converted to: + +```css +:root.dark { + --colors-primary: #4b7594; +} +``` + +After conversion, Unistyles will use CSS variable instead of string to reference the theme value. + +##### If you're using `adaptiveThemes` +CSS variables will be placed under the `@media (prefers-color-scheme)` [query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) ensuring that the app will automatically switch to the new theme. + +##### If you're not using `adaptiveThemes` +Class of your html root element will be updated to match the new one. + + + +### When to disable CSS variables? + +##### When you have different size variables / functions in your themes + +```tsx +// ❌ Not OK +const regularTheme = { + colors: sharedColors, + gap: (v: number) => v * 8, + fontSize: 16 +} + +const largeTheme = { + colors: sharedColors, + // gap function has a different factor + gap: (v: number) => v * 16, + // fontSize is a different value + fontSize: 32 +} +``` + +```tsx +// ✅ OK +const lightTheme = { + colors: { + ...sharedColors, + background: '#fff', + typography: '#000' + }, + gap: (v: number) => v * 8, + fontSize: 16 +} + +const darkTheme = { + colors: { + ...sharedColors, + background: '#000', + typography: '#fff' + }, + gap: (v: number) => v * 8, + fontSize: 16 +} +``` + +##### When you use conditions to style your components instead of relying on the same theme values + +```tsx +// ❌ Not OK +const styles = StyleSheet.create(theme => ({ + container: { + // this is a condition and won't work with CSS variables + backgroundColor: theme.isDark + ? theme.colors.grey200 + : theme.colors.grey700 + } +})) +``` + +```tsx +// ✅ OK +const styles = StyleSheet.create(theme => ({ + container: { + // your rely on the same theme values across different themes + backgroundColor: theme.colors.background + } +})) +``` + +If none of the above applies to you, you can use CSS variables to boost your app's performance. diff --git a/docs/src/content/docs/v3/references/with-unistyles.mdx b/docs/src/content/docs/v3/references/with-unistyles.mdx index e9c6581f..84b8794d 100644 --- a/docs/src/content/docs/v3/references/with-unistyles.mdx +++ b/docs/src/content/docs/v3/references/with-unistyles.mdx @@ -15,7 +15,7 @@ import Seo from '../../../../components/Seo.astro' Before reading this guide, make sure that you understand [How Unistyles works](/v3/start/how-unistyles-works) and how [Babel plugin](/v3/other/babel-plugin) -manipulates your code. +manipulates your code. Also read our [decision algorithm](/v3/references/3rd-party-views) to learn when to use this factory. ### Why do you need it? diff --git a/docs/src/content/docs/v3/start/configuration.mdx b/docs/src/content/docs/v3/start/configuration.mdx index e378f1fa..7cf88ebf 100644 --- a/docs/src/content/docs/v3/start/configuration.mdx +++ b/docs/src/content/docs/v3/start/configuration.mdx @@ -73,10 +73,11 @@ const breakpoints = { ### Settings (Optional) -The `Settings` object has been simplified, and in the most recent version, it supports only two properties: +The `Settings` object has been simplified, and in the most recent version, it supports only three properties: - **`adaptiveThemes`** – a boolean that enables or disables adaptive themes [learn more](/v3/guides/theming#adaptive-themes) -- **`initialTheme`** – a string or a synchronous function that sets the initial theme. +- **`initialTheme`** – a string or a synchronous function that sets the initial theme +- **`CSSVars`** – a boolean that enables or disables CSS variables (defaults to `true`) [learn more](/v3/references/web-only#css-variables) ```tsx title="unistyles.ts" const settings = { diff --git a/docs/src/content/docs/v3/start/getting-started.mdx b/docs/src/content/docs/v3/start/getting-started.mdx index 8bdd599e..eed37c1d 100644 --- a/docs/src/content/docs/v3/start/getting-started.mdx +++ b/docs/src/content/docs/v3/start/getting-started.mdx @@ -53,7 +53,12 @@ module.exports = function (api) { } } ``` - + + Finish installation based on your platform: @@ -78,7 +83,7 @@ Finish installation based on your platform: 🚧 Work in progress, we will share more details soon. - 🚧 Work in progress, we will share more details soon. + Unistyles offers first-class support for Next.js Server Side Rendering. To run the project, we recommend following the guidelines provided by [Next.JS](https://nextjs.org/docs). diff --git a/docs/src/content/docs/v3/start/introduction.mdx b/docs/src/content/docs/v3/start/introduction.mdx index 28e26402..86b75977 100644 --- a/docs/src/content/docs/v3/start/introduction.mdx +++ b/docs/src/content/docs/v3/start/introduction.mdx @@ -40,6 +40,6 @@ If you're familiar with styling in React Native, then you already know how to us - Includes a cross-platform parser written in C++, ensuring consistent output across all platforms - Leverages [Nitro Modules](https://nitro.margelo.com/) under the hood (everything is strongly typed!) - Transforms your `StyleSheets` into enhanced `StyleSheets` with superpowers 🦸🏼‍♂️ that can access themes, platform-specific values, and more! -- Loved by developers worldwide: 1.1M+ downloads and over 1.5K stars on GitHub +- Loved by developers worldwide: 1.3M+ downloads and over 1.8K stars on GitHub diff --git a/docs/src/content/docs/v3/start/migration-guide.mdx b/docs/src/content/docs/v3/start/migration-guide.mdx index d2a77909..645a72af 100644 --- a/docs/src/content/docs/v3/start/migration-guide.mdx +++ b/docs/src/content/docs/v3/start/migration-guide.mdx @@ -113,8 +113,22 @@ The migration process is quite simple, but it can be tedious since you'll need t + return } ``` +9. If you want to speed up the migration process, but keep your views re-rendered, use [useUnistyles](/v3/references/use-unistyles) hook: -9. If you need to access `breakpoint` to show/hide your components use `Display` and `Hide` components instead: + ```tsx + import { Button } from 'react-native' + import { useUnistyles } from 'react-native-unistyles' + + const MyText = () => { + const { theme } = useUnistyles() + + return ( +