From cd6bac3bac5124765dedee86d716949661092a97 Mon Sep 17 00:00:00 2001 From: sra1kumar-NULL Date: Tue, 16 Jul 2024 16:55:29 +0530 Subject: [PATCH] fix: updated the migration documentation --- .../Upgrade to v2/index.nw.stories.mdx | 719 ++++++++++++------ 1 file changed, 475 insertions(+), 244 deletions(-) diff --git a/example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx b/example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx index 466f11378..a88c3266b 100644 --- a/example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx @@ -1,15 +1,12 @@ --- -title: Upgrade to v2 | gluestack-ui - -description: A migration guide is a document designed to help you seamlessly transition from your current gluestack ui version v1 to the new version v2. Whether you are upgrading, switching to a new version directly this guide provides step-by-step instructions, best practices, and troubleshooting tips to ensure a smooth migration process. - +title: Upgrade to v2 with codemod | gluestack-ui +description: In this document, we will guide you through the steps for upgrading from gluestack-ui v1 to gluestack-ui v2. --- import { Meta } from '@storybook/addon-docs'; - import { Tabs, CollapsibleCode, @@ -17,64 +14,55 @@ import { Table, TableContainer, InlineCode, -} from "@gluestack/design-system"; +} from '@gluestack/design-system'; -# Upgrade to v2 +# Upgrade to gluestack-ui v2 with Codemod -A migration guide is a document designed to help you seamlessly transition from your current gluestack ui version v1 to the new version v2. Whether you are upgrading, switching to a new version directly this guide provides step-by-step instructions, best practices, and troubleshooting tips to ensure a smooth migration process. +This guide provides detailed steps to upgrade from gluestack-ui v1 to gluestack-ui v2. With codemod you can automate the process of code transformations, making it easier and faster to migrate your project to gluestack-ui v2. By following this guide, you'll ensure a smooth transition with minimal manual adjustments. -## Installation +## gluestack-ui v1 Usage Scenarios: -Run the below command to setup the project: +gluestack-ui v1 users can be divided into three scenarios: -``` -npx gluestack-ui@latest init -``` +- **Scenario 1** : Users who imported the gluestack-ui configuration from `@gluestack-ui/config`. +- **Scenario 2** : Users who exported the gluestack-ui configuration and made modifications to it (`gluestack-ui.config.ts`). +- **Scenario 3** : Users who exported components as well. -Above command will override certain files and add `gluestack-ui-provider`, +
-- `tailwind.config.js` -- `global.css` -- `babel.config.js` / `next.config.*` -- `metro.config.js` -- `tsconfig.json` +At this time, we fully support migration for users in **Scenario 1 and Scenario 2** using codemod. -## Setup the GluestackUIProvider: +### Overview of Steps to Follow (for Scenario 1 and Scenario 2 Users) -Add the following code at the root of your project: +
+1. **Initialize gluestack-ui v2**: `npx gluestack-ui@latest init` +2. **Setup Tailwind CSS**: `import "@/global.css"` +3. **Add All Components**: `npx gluestack-ui@latest add --all` +4. **Code Migration**: `npx @gluestack-ui/v2-codemod@latest ` +
-## Before : +## Step 1 : Initialize gluestack-ui v2 -```jsx -import { GluestackUIProvider } from "@gluestack-ui/themed"; -export default function App() { - return {/* Your code */}; -} -``` - -## After : +**Run the below command to setup the project**: -```jsx -import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider"; -export default function App() { - return {/* Your code */}; -} +``` +npx gluestack-ui@latest init ``` -## Setup tailwind CSS: +To refer more about the gluestack-ui v2 installation, check [this](https://staging.gluestack.io/ui/docs/home/getting-started/installation). +## Step 2 : Setup Tailwind CSS Import `global.css` / `globals.css` where Tailwind directives are defined. ```jsx -import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider"; -import "@/global.css"; +import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'; +import '@/global.css'; export default function App() { return {/* Your code */}; } ``` - -## Component addition: +## Step 3 : Add All Components To add all the components run the following command: @@ -82,129 +70,53 @@ To add all the components run the following command: npx gluestack-ui@latest add --all ``` -You can add only the necessary components instead of including all. Check [here](https://gluestack.io/ui/nativewind/docs/components/heading). +You can add only the necessary components instead of including all. Check [here](https://staging.gluestack.io/ui/docs/components/heading). -```jsx -npx gluestack-ui@latest add heading + + +```jsx +npx gluestack-ui@latest add heading ``` + -## Update config : - -### 1. If you are using @gluestack-ui/config-v2 - -- If you are using `@gluestack-ui/config-v2`, there's no need to make any changes since the default NativeWind configuration is already similar. +## Step 4 : Code Migration -### 2 . If you are using @gluestack-ui/config or custom config or ejected config +### Codemod +The gluestack-ui v2 migration process has been streamlined with the creation of a codemod. This codemod automates the conversion of your existing v1 code to v2, ensuring a smooth transition. Here’s what the codemod does: -- In both of the cases, we should manually change the tailwind config respective to the style changes we made in the `gluestack-ui` configuration. - -For config conversion, the changes will be made to the config which is being passed to the provider in v2. - -### Config conversion : - -```jsx -// Gluestack-UI v1 - -// Without CSS Variables -{ - tokens: { - ...defaultConfig.tokens, - colors: { - ...defaultConfig.tokens.colors, - primary0: "#F5F3FF", - primary50: "#999999", - }, - }, -}; - -// Gluestack-UI v2 - -// With CSS variables -{ - light: vars({ - "--color-primary-0": "#F5F3FF", - "--color-primary-50": "#999999", - }), -}; - -// Updating the config(nativewind) file -{ - extends: { - colors: { - primary: var(--colors-primary), - }, - }, -}; - -// Different color modes -{ - light: vars({ - "--color-background-0": "#B3B3B3", - "--color-background-50": "#999999", - }), - dark: vars({ - "--color-background-0": "#111827", - "--color-background-50": "#171717", - }), -}; - -``` - -For Tailwind config configuration please refer to [this](https://tailwindcss.com/docs/configuration) . - -## Screens Migration - -### 1. Codemod - -- We made a codemod that will turn all your stylings in v1 code to v2 compatibility styles. -- All the styles will be converted matching the appropriate styling for that in NativeWind. -- Limitations: - - Descendant Styling ( As it’s not supported in NativeWind at the moment.) +##### Style Migration: + - It migrates all your existing stylings in v1 code to the appropriate v2 code. + - The migrated styles will match the styling conventions used in NativeWind. +##### Config Migration: + - If you have a custom v1 configuration, the codemod will also migrate this configuration to be compatible with v2. +##### Limitations: + - Descendant Styling ( As it’s not supported in NativeWind at the moment) - Value of `sx` prop is variable +#### Please proceed with the following steps to continue the migration: + + + + With Codemod + + + Manual + + + + +<> +### Run the following command : -### Descendant Styling : - -- Descendant styling will not be resolved and we’ll keep it as it is. -- You can update it manually by moving it to the respective element where the style is required - -```jsx -// Before: -import { Box, Text } from "@gluestack-ui/themed"; - - - Simple Text -; - -// After: -import { Box } from "@/components/ui/box"; -import { Text } from "@/components/ui/text"; - -// descendant style will remain as it is. - - Simple Text -; - -// Update the descendant styling: -import { Box } from "@/components/ui/box"; -import { Text } from "@/components/ui/text"; - -// descendant style will remain as it is. - -// color:'white' --> text-white - - Simple Text -; -``` - -### Usage : - -```jsx -npx @gluestack-ui/v2-codemod@latest +```bash +npx @gluestack-ui/v2-codemod@latest ``` -### 2. Manual Styling Changes + + + +<> -To manually change the styling of any respective v1 specific style we can follow this property mapper to ideally convert the styles to `NativeWind` stylings. +To manually change the styling of any respective v1 specific style to v2 style we can follow this property mapper to ideally convert the styles to `NativeWind` stylings. ### Property Mapper : @@ -216,10 +128,10 @@ In this property mapper table you can find all the properties of v1 and how they - Gluestack-UI v1 + gluestack-ui v1 - Gluestack-UI v2 + gluestack-ui v2 @@ -247,7 +159,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`size={"value"}`} + {`size="value"`} @@ -287,7 +199,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`h={"value"}`} + {`h="value"`} @@ -297,7 +209,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`w={"value"}`} + {`w="value"`} @@ -547,7 +459,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`flex={"value"}`} + {`flex={value}`} @@ -557,7 +469,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`flexDirection={"value"}`} + {`flexDirection="value"`} @@ -577,7 +489,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`h={"value"}`} + {`h="value"`} @@ -607,7 +519,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`maxWidth={"value"}`} + {`maxWidth="value"`} @@ -617,7 +529,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`maxHeight={"value"}`} + {`maxHeight="value"`} @@ -627,7 +539,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`minWidth={"value"}`} + {`minWidth="value"`} @@ -637,7 +549,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`minHeight={"value"}`} + {`minHeight="value"`} @@ -677,7 +589,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`top={"value"}`} + {`top={value}`} @@ -687,7 +599,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`bottom={"value"}`} + {`bottom={value}`} @@ -697,7 +609,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`left={"value"}`} + {`left={value}`} @@ -707,7 +619,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`right={"value"}`} + {`right={value}`} @@ -717,7 +629,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`zIndex={"value"}`} + {`zIndex={value}`} @@ -767,7 +679,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`$sm={"value"}`} + {`$sm={value}`} @@ -777,7 +689,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`$md={"value"}`} + {`$md={value}`} @@ -787,7 +699,7 @@ In this property mapper table you can find all the properties of v1 and how they - {`$lg={"value"}`} + {`$lg={value}`} @@ -799,7 +711,6 @@ In this property mapper table you can find all the properties of v1 and how they - ### Property Combinations : <> @@ -808,10 +719,10 @@ In this property mapper table you can find all the properties of v1 and how they - Gluestack-UI v1 + gluestack-ui v1 - Gluestack-UI v2 + gluestack-ui v2 @@ -925,54 +836,374 @@ In this property mapper table you can find all the properties of v1 and how they +## Update config : + +For config conversion,we need to make changes in two files gluestack-ui config file & Tailwind CSS config file. + +### Config conversion : + +```jsx +// gluestack-ui v1 + +// Without CSS Variables +{ + tokens: { + ...defaultConfig.tokens, + colors: { + ...defaultConfig.tokens.colors, + primary0: "#F5F3FF", + primary50: "#999999", + }, + }, +}; + +// gluestack-ui v2 + +// With CSS variables +{ + light: vars({ + "--color-primary-0": "#F5F3FF", + "--color-primary-50": "#999999", + }), +}; + +// Updating the config(nativewind) file +{ + extends: { + colors: { + primary: var(--colors-primary), + }, + }, +}; + +// Different color modes +{ + light: vars({ + "--color-background-0": "#B3B3B3", + "--color-background-50": "#999999", + }), + dark: vars({ + "--color-background-0": "#111827", + "--color-background-50": "#171717", + }), +}; + +``` + +### Tailwind Config conversion : + +```jsx +/** @type {import('tailwindcss').Config} */ +// tailwind.config.js +module.exports = { + darkMode: 'class', + content: [ + './src/**/**/*.{html,js,jsx,ts,tsx}', + './app/**/**/*.{html,js,jsx,ts,tsx}', + './layouts/*.{html,js,jsx,ts,tsx}', + './screens/**/**/*.{html,js,jsx,ts,tsx}', + './components/**/**/*.{html,js,jsx,ts,tsx}', + ], + presets: [require('nativewind/preset')], + theme: { + extend: { + //adding new fontSize tokens + fontSize: { + '2xs': '10px', + '3xs': '8px', + }, + //adding new media query breakpoints + screens: { + 'base': '0px', + }, + + colors: { + //adding new color tokens + rose: { + 0: 'var(--color-rose-0)', + 50: 'var(--color-rose-50)', + 100: 'var(--color-rose-100)', + 200: 'var(--color-rose-200)', + 300: 'var(--color-rose-300)', + 400: 'var(--color-rose-400)', + 500: 'var(--color-rose-500)', + 600: 'var(--color-rose-600)', + 700: 'var(--color-rose-700)', + 800: 'var(--color-rose-800)', + 900: 'var(--color-rose-900)', + 950: 'var(--color-rose-950)', + error: 'var(--color-rose-error)', + warning: 'var(--color-rose-warning)', + muted: 'var(--color-rose-muted)', + success: 'var(--color-rose-success)', + }, + primary: { + 0: 'var(--color-primary-0)', + 50: 'var(--color-primary-50)', + 100: 'var(--color-primary-100)', + 200: 'var(--color-primary-200)', + 300: 'var(--color-primary-300)', + 400: 'var(--color-primary-400)', + 500: 'var(--color-primary-500)', + 600: 'var(--color-primary-600)', + 700: 'var(--color-primary-700)', + 800: 'var(--color-primary-800)', + 900: 'var(--color-primary-900)', + 950: 'var(--color-primary-950)', + }, + secondary: { + 0: 'var(--color-secondary-0)', + 50: 'var(--color-secondary-50)', + 100: 'var(--color-secondary-100)', + 200: 'var(--color-secondary-200)', + 300: 'var(--color-secondary-300)', + 400: 'var(--color-secondary-400)', + 500: 'var(--color-secondary-500)', + 600: 'var(--color-secondary-600)', + 700: 'var(--color-secondary-700)', + 800: 'var(--color-secondary-800)', + 900: 'var(--color-secondary-900)', + 950: 'var(--color-secondary-950)', + }, + tertiary: { + 50: 'var(--color-tertiary-50)', + 100: 'var(--color-tertiary-100)', + 200: 'var(--color-tertiary-200)', + 300: 'var(--color-tertiary-300)', + 400: 'var(--color-tertiary-400)', + 500: 'var(--color-tertiary-500)', + 600: 'var(--color-tertiary-600)', + 700: 'var(--color-tertiary-700)', + 800: 'var(--color-tertiary-800)', + 900: 'var(--color-tertiary-900)', + 950: 'var(--color-tertiary-950)', + }, + error: { + 0: 'var(--color-error-0)', + 50: 'var(--color-error-50)', + 100: 'var(--color-error-100)', + 200: 'var(--color-error-200)', + 300: 'var(--color-error-300)', + 400: 'var(--color-error-400)', + 500: 'var(--color-error-500)', + 600: 'var(--color-error-600)', + 700: 'var(--color-error-700)', + 800: 'var(--color-error-800)', + 900: 'var(--color-error-900)', + 950: 'var(--color-error-950)', + }, + success: { + 0: 'var(--color-success-0)', + 50: 'var(--color-success-50)', + 100: 'var(--color-success-100)', + 200: 'var(--color-success-200)', + 300: 'var(--color-success-300)', + 400: 'var(--color-success-400)', + 500: 'var(--color-success-500)', + 600: 'var(--color-success-600)', + 700: 'var(--color-success-700)', + 800: 'var(--color-success-800)', + 900: 'var(--color-success-900)', + 950: 'var(--color-success-950)', + }, + warning: { + 0: 'var(--color-warning-0)', + 50: 'var(--color-warning-50)', + 100: 'var(--color-warning-100)', + 200: 'var(--color-warning-200)', + 300: 'var(--color-warning-300)', + 400: 'var(--color-warning-400)', + 500: 'var(--color-warning-500)', + 600: 'var(--color-warning-600)', + 700: 'var(--color-warning-700)', + 800: 'var(--color-warning-800)', + 900: 'var(--color-warning-900)', + 950: 'var(--color-warning-950)', + }, + info: { + 0: 'var(--color-info-0)', + 50: 'var(--color-info-50)', + 100: 'var(--color-info-100)', + 200: 'var(--color-info-200)', + 300: 'var(--color-info-300)', + 400: 'var(--color-info-400)', + 500: 'var(--color-info-500)', + 600: 'var(--color-info-600)', + 700: 'var(--color-info-700)', + 800: 'var(--color-info-800)', + 900: 'var(--color-info-900)', + 950: 'var(--color-info-950)', + }, + typography: { + 0: 'var(--color-typography-0)', + 50: 'var(--color-typography-50)', + 100: 'var(--color-typography-100)', + 200: 'var(--color-typography-200)', + 300: 'var(--color-typography-300)', + 400: 'var(--color-typography-400)', + 500: 'var(--color-typography-500)', + 600: 'var(--color-typography-600)', + 700: 'var(--color-typography-700)', + 800: 'var(--color-typography-800)', + 900: 'var(--color-typography-900)', + 950: 'var(--color-typography-950)', + }, + outline: { + 0: 'var(--color-outline-0)', + 50: 'var(--color-outline-50)', + 100: 'var(--color-outline-100)', + 200: 'var(--color-outline-200)', + 300: 'var(--color-outline-300)', + 400: 'var(--color-outline-400)', + 500: 'var(--color-outline-500)', + 600: 'var(--color-outline-600)', + 700: 'var(--color-outline-700)', + 800: 'var(--color-outline-800)', + 900: 'var(--color-outline-900)', + 950: 'var(--color-outline-950)', + }, + background: { + 0: 'var(--color-background-0)', + 50: 'var(--color-background-50)', + 100: 'var(--color-background-100)', + 200: 'var(--color-background-200)', + 300: 'var(--color-background-300)', + 400: 'var(--color-background-400)', + 500: 'var(--color-background-500)', + 600: 'var(--color-background-600)', + 700: 'var(--color-background-700)', + 800: 'var(--color-background-800)', + 900: 'var(--color-background-900)', + 950: 'var(--color-background-950)', + error: 'var(--color-background-error)', + warning: 'var(--color-background-warning)', + muted: 'var(--color-background-muted)', + success: 'var(--color-background-success)', + }, + }, + fontFamily: { + heading: undefined, + body: undefined, + mono: undefined, + }, + fontWeight: { + hairline: '100', + extraBlack: '950', + }, + fontSize: { + '2xs': '10px', + }, + }, + plugins: [], + }, +}; +``` + +For Tailwind config configuration please refer to [this](https://tailwindcss.com/docs/configuration) . + + + + + + +### Limitations (Descendant Styling) : + +- Descendant styling will not be resolved and we’ll keep it as it is. +- You can update it manually by moving it to the respective element where the style is required + +```jsx +//Before: + +import { Box, Text } from '@gluestack-ui/themed'; +export default function App() { + return ( + + Simple Text + + ); +} + +//After: + +import { Box } from '@/components/ui/box'; +import { Text } from '@/components/ui/text'; + +//descendant style will remain as it is. +export default function App() { + return ( + + Simple Text + + ) +} +//Manual Changes: +//Update the descendant styling: +import { Box } from '@/components/ui/box'; +import { Text } from '@/components/ui/text'; + +//descendant style will remain as it is. +//color:'white' --> text-white +export default function App() { + return ( + + Simple Text + + ) +} +``` + ## Examples of some property combinations : -Applying styles in different color modes ( light/dark ) : +
+**Applying styles in different color modes (light/dark)** : -Before: +**Before**: ```jsx -import { Box } from "@gluestack-ui/themed"; +import { Box } from '@gluestack-ui/themed'; export default function App() { return ( - + Simple Text ); } ``` -After: +**After**: ```jsx -import { Box } from "@/components/ui/box"; +import { Box } from '@/components/ui/box'; export default function App() { return Simple Text; } ``` -Applying styles for different media queries ( sm/md/lg ) using `@`: +**Applying styles for different media queries (sm/md/lg) using `@`**: -Before: +**Before**: ```jsx -import { Box } from "@gluestack-ui/themed"; +import { Box } from '@gluestack-ui/themed'; export default function App() { return ( - + Simple Box ); } ``` -After: +**After**: ```jsx -import { Box } from "@/components/ui/box"; +import { Box } from '@/components/ui/box'; export default function App() { return ( @@ -981,26 +1212,26 @@ export default function App() { } ``` -Applying styles for different media queries ( sm/md/lg ) using `$` : +**Applying styles for different media queries (sm/md/lg) using `$`** : -Before: +**Before**: ```jsx -import { Box } from "@gluestack-ui/themed"; +import { Box } from '@gluestack-ui/themed'; export default function App() { return ( - + Simple Box ); } ``` -After: +**After**: ```jsx -import { Box } from "@/components/ui/box"; +import { Box } from '@/components/ui/box'; export default function App() { return ( @@ -1009,12 +1240,12 @@ export default function App() { } ``` -Applying basic layout stylings : +**Applying basic layout stylings** : -Before: +**Before**: ```jsx -import { Box } from "@gluestack-ui/themed"; +import { Box } from '@gluestack-ui/themed'; export default function App() { return ( @@ -1025,36 +1256,36 @@ export default function App() { } ``` -After: +**After**: ```jsx -import { Box } from "@/components/ui/box"; +import { Box } from '@/components/ui/box'; export default function App() { return Simple Box; } ``` -Applying basic layout stylings in different color modes : +**Applying basic layout stylings in different color modes** : -Before: +**Before**: ```jsx -import { Box } from "@gluestack-ui/themed"; +import { Box } from '@gluestack-ui/themed'; export default function App() { return ( - + Simple Box ); } ``` -After: +**After**: ```jsx -import { Box } from "@/components/ui/box"; +import { Box } from '@/components/ui/box'; //By default if you don't mention any mode it's take light mode. export default function App() { @@ -1062,26 +1293,26 @@ export default function App() { } ``` -Applying styles for different action states ( hover/active etc..,) : +**Applying styles for different action states (hover/active etc..,)** : -Before: +**Before**: ```jsx -import { Box } from "@gluestack-ui/themed"; +import { Box } from '@gluestack-ui/themed'; export default function App() { return ( - + Simple ); } ``` -After: +**After**: ```jsx -import { Box } from "@/components/ui/box"; +import { Box } from '@/components/ui/box'; //If not mentioned any mode explicitly then it's gonna take light mode only. export default function App() { @@ -1093,47 +1324,47 @@ export default function App() { } ``` -Applying styles for different platforms ( mobile/web/android/ios) : +**Applying styles for different platforms (mobile/web/android/ios)** : -Before: +**Before**: ```jsx -import { Text } from "@gluestack-ui/themed"; +import { Text } from '@gluestack-ui/themed'; export default function App() { return ( - Gluestack + gluestack-ui ); } ``` -After: +**After**: ```jsx -import { Text } from "@/components/text"; +import { Text } from '@/components/text'; export default function App() { - return Gluestack; + return gluestack-ui; } ``` -Applying styles for different color modes at different media queries : +**Applying styles for different color modes at different media queries** : -Before: +**Before**: ```jsx -import { Center } from "@gluestack-ui/themed"; +import { Center } from '@gluestack-ui/themed'; export default function App() { return ( @@ -1141,15 +1372,15 @@ export default function App() { px="$4" mb={-0.5} sx={{ - "@base": { - _light: { bg: "$backgroundLight0" }, - _dark: { bg: "$backgroundDark800" }, + '@base': { + _light: { bg: '$backgroundLight0' }, + _dark: { bg: '$backgroundDark800' }, }, - "@md": { - py: "$48", - px: "$12", - _light: { bg: "$primary500" }, - _dark: { bg: "$primary700" }, + '@md': { + py: '$48', + px: '$12', + _light: { bg: '$primary500' }, + _dark: { bg: '$primary700' }, }, }} > @@ -1157,10 +1388,10 @@ export default function App() { } ``` -After: +**After**: ```jsx -import { Center } from "@/components/center"; +import { Center } from '@/components/center'; export default function App() { return ( @@ -1169,42 +1400,42 @@ export default function App() { } ``` -`Descendant Styling` ( we need to manually change these styling as this is not available in NativeWind) : +**Descendant Styling (this type of styling is not supported by NativeWind)** : -Before: +**Before**: ```jsx -import { CheckboxLabel, Text } from "@gluestack-ui/themed"; +import { CheckboxLabel, Text } from '@gluestack-ui/themed'; export default function App() { return ( - Gluestack + gluestack-ui ); } ``` -After: +**After**: ```jsx -import { CheckboxLabel } from "@/components/checkbox"; -import { Text } from "@/components/text"; +import { CheckboxLabel } from '@/components/checkbox'; +import { Text } from '@/components/text'; // we need to remove the descendant styling from parent element and add that // styling to all the child elements export default function App() { return ( - Gluestack + gluestack-ui ); }