npx gluestack-ui@alpha upgradegit status# Commit changes
git add .
git commit -m "Pre-migration to v4 backup"
# Or stash changes
git stash{
"dependencies": {
"@gluestack-ui/core": "^3.0.10",
"@gluestack-ui/utils": "^3.0.11"
}
}
npm install @gluestack-ui/core@alpha @gluestack-ui/utils@alpha react-native-reanimated@~4.2.1 react-native-worklets@^0.7.1 @legendapp/motion@^2.4.0 tailwind-variants@^0.1.20 react-native-svg@^15.12.0 nativewind@^4.1.23 @gluestack/ui-next-adapter@alpha react-native-web@^0.20.0 react-native-safe-area-context@^5.6.1 react-aria@^3.41.1 react-stately@^3.39.0 dom-helpers@^5.2.1yarn add @gluestack-ui/core@alpha @gluestack-ui/utils@alpha react-native-reanimated@~4.2.1 react-native-worklets@^0.7.1 @legendapp/motion@^2.4.0 tailwind-variants@^0.1.20 react-native-svg@^15.12.0 nativewind@^4.1.23 @gluestack/ui-next-adapter@alpha react-native-web@^0.20.0 react-native-safe-area-context@^5.6.1 react-aria@^3.41.1 react-stately@^3.39.0 dom-helpers@^5.2.1| Package | Purpose | Required For |
|---|---|---|
react-native-reanimated@~4.2.1 | Primary animation engine for v4 | All Projects |
react-native-worklets@^0.7.1 | Required by react-native-reanimated | All Projects |
@legendapp/motion@^2.4.0 | Used by some components (Tooltip, ActionSheet, Select) | All Projects |
tailwind-variants@^0.1.20 | Enhanced variant system | All Projects |
nativewind@^4.1.23 | Updated styling engine | All Projects |
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
// your existing plugins
],
};
};module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
// your existing plugins
'react-native-worklets/plugin', // Add this line
],
};
};import { withGluestackUI } from '@gluestack/ui-next-adapter';
const nextConfig = {
// ... your config
};
export default withGluestackUI(nextConfig);/** @type {import('tailwindcss').Config} */
module.exports = {
// ... other config
theme: {
extend: {
colors: {
// New v4 color tokens (shadcn-like)
foreground: 'rgb(var(--foreground)/<alpha-value>)',
card: {
DEFAULT: 'rgb(var(--card) / <alpha-value>)',
foreground: 'rgb(var(--card-foreground) / <alpha-value>)',
},
popover: {
DEFAULT: 'rgb(var(--popover) / <alpha-value>)',
foreground: 'rgb(var(--popover-foreground) / <alpha-value>)',
},
muted: {
DEFAULT: 'rgb(var(--muted) / <alpha-value>)',
foreground: 'rgb(var(--muted-foreground) / <alpha-value>)',
},
destructive: {
DEFAULT: 'rgb(var(--destructive) / <alpha-value>)',
},
border: 'rgb(var(--border)/<alpha-value>)',
input: 'rgb(var(--input)/<alpha-value>)',
ring: 'rgb(var(--ring) / <alpha-value>)',
white: 'rgb(255 255 255)',
primary: {
DEFAULT: 'rgb(var(--primary)/<alpha-value>)',
foreground: 'rgb(var(--primary-foreground)/<alpha-value>)',
},
secondary: {
DEFAULT: 'rgb(var(--secondary)/<alpha-value>)',
foreground: 'rgb(var(--secondary-foreground)/<alpha-value>)',
},
typography: {
white: '#FFFFFF',
gray: '#D4D4D4',
black: '#181718',
},
background: {
DEFAULT: 'rgb(var(--background)/<alpha-value>)',
},
accent: {
DEFAULT: 'rgb(var(--accent)/<alpha-value>)',
foreground: 'rgb(var(--accent-foreground)/<alpha-value>)',
},
},
},
},
};'use client';
import { vars } from 'nativewind';
export const config = {
light: vars({
'--primary': '23 23 23',
'--primary-foreground': '250 250 250',
'--card': '255 255 255',
'--secondary': '245 245 245',
'--secondary-foreground': '23 23 23',
'--background': '255 255 255',
'--popover': '255 255 255',
'--popover-foreground': '10 10 10',
'--muted': '245 245 245',
'--muted-foreground': '115 115 115',
'--destructive': '231 0 11',
'--foreground': '10 10 10',
'--border': '229 229 229',
'--input': '229 229 229',
'--ring': '212 212 212',
'--accent': '247 247 247',
'--accent-foreground': '52 52 52',
}),
dark: vars({
'--primary-foreground': '23 23 23',
'--primary': '255 245 245',
'--card': '23 23 23',
'--secondary': '38 38 38',
'--secondary-foreground': '250 250 250',
'--background': '10 10 10',
'--popover': '23 23 23',
'--popover-foreground': '250 250 250',
'--muted': '38 38 38',
'--muted-foreground': '161 161 161',
'--destructive': '255 100 103',
'--foreground': '250 250 250',
'--border': '46 46 46',
'--input': '46 46 46',
'--accent': '38 38 38',
'--accent-foreground': '250 250 250',
'--ring': '115 115 115',
}),
};# Example: Re-copy Button component
npx gluestack-ui add button
# Re-copy all components you're using
npx gluestack-ui add accordion
npx gluestack-ui add alert
npx gluestack-ui add avatar
# ... etccp -r components/ui components/ui-backup# Remove node_modules and package-lock.json
rm -rf node_modules package-lock.json
# Reinstall dependencies
npm install// These imports work in both v3 and v4!
import { createButton } from '@gluestack-ui/core/button/creator';
import { createRadio } from '@gluestack-ui/core/radio/creator';
import { flush } from '@gluestack-ui/utils/nativewind-utils';
import { tva } from '@gluestack-ui/utils/nativewind-utils';
npm run buildnpm run dev# Clear cache and restart
npx expo start --clear
# For React Native CLI
npx react-native start --reset-cache# Expo
npx expo start --clear
# React Native CLI
npx react-native start --reset-cachenpm install --legacy-peer-depsnpm cache clean --force
rm -rf node_modules package-lock.json
npm installproject.ext.react = [
enableHermes: true,
]