Upgrade to gluestack-ui v2 with Codemod

import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
import '@/global.css';

export default function App() {
  return <GluestackUIProvider>{/* Your code */}</GluestackUIProvider>;
}

//Before:

import { Box, Text } from '@gluestack-ui/themed';
export default function App() {
  return (
    <Box bg="$red500" sx={{ _text: { color: 'white' } }}>
      <Text>Simple Text</Text>
    </Box>
  );
}

//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 (
    <Box className="bg-red-500"
    //Todo: Change this manually
    sx={{ _text: { color: 'white' } }}
    >
      <Text>Simple Text</Text>
    </Box>
  )
}
//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 (
    <Box className="bg-red-500">
      <Text className="text-white">Simple Text</Text>
    </Box>
  )
}

import { Box } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Box sx={{ _dark: { bg: '$primary100' } }} bg="$primary300">
      Simple Text
    </Box>
  );
}

import { Box } from '@/components/ui/box';

export default function App() {
  return <Box className="dark:bg-primary-100 bg-primary-300">Simple Text</Box>;
}

import { Box } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Box sx={{ '@sm': { bg: '$background100' } }} bg="$background500">
      Simple Box
    </Box>
  );
}

import { Box } from '@/components/ui/box';

export default function App() {
  return (
    <Box className="sm:bg-background-100 bg-background-500">Simple Box</Box>
  );
}

import { Box } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Box $sm={{ bg: '$background100' }} bg="$background500">
      Simple Box
    </Box>
  );
}

import { Box } from '@/components/ui/box';

export default function App() {
  return (
    <Box className="sm:bg-background-100 bg-background-500">Simple Box</Box>
  );
}

import { Box } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Box mt="$4" pb="$2">
      Simple Box
    </Box>
  );
}

import { Box } from '@/components/ui/box';

export default function App() {
  return <Box className="mt-4 pb-2">Simple Box</Box>;
}

import { Box } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Box $md-dark={{ mt: '$4' }} $md-light={{ mt: '$2' }} pb="$2">
      Simple Box
    </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() {
  return <Box className="md:dark:mt-4 md:mt-2 pb-2">Simple Box</Box>;
}

import { Box } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Box $md-hover={{ bg: '$background500' }} $md={{ bg: '$background700' }}>
      Simple
    </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() {
  return (
    <Box className="md:hover:bg-background-500 md:bg-background-700">
      Simple
    </Box>
  );
}

import { Text } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Text
      sx={{
        _ios: {
          marginTop: '$1',
        },
        _android: {
          marginTop: '$2',
        },
      }}
    >
      gluestack-ui
    </Text>
  );
}

import { Text } from '@/components/text';

export default function App() {
  return <Text className="ios:mt-1 android:mt-2">gluestack-ui</Text>;
}

import { Center } from '@gluestack-ui/themed';

export default function App() {
  return (
    <Center
      px="$4"
      mb={-0.5}
      sx={{
        '@base': {
          _light: { bg: '$backgroundLight0' },
          _dark: { bg: '$backgroundDark800' },
        },
        '@md': {
          py: '$48',
          px: '$12',
          _light: { bg: '$primary500' },
          _dark: { bg: '$primary700' },
        },
      }}
    ></Center>
  );
}

import { Center } from '@/components/center';

export default function App() {
  return (
    <Center className="px-4 mb-0.5 bg-background-0 dark:bg-background800 md:py-48 md:px-12 md:bg-primary-500 md:dark:bg-primary-700"></Center>
  );
}

import { CheckboxLabel, Text } from '@gluestack-ui/themed';

export default function App() {
  return (
    <CheckboxLabel
      sx={{
        bg: '$blue500',
        _text: {
          fontSize: '$sm',
          color: '$primary500',
        },
      }}
    >
      <Text>gluestack-ui</Text>
    </CheckboxLabel>
  );
}

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 (
    <CheckboxLabel className="bg-blue-500">
      <Text className="text-sm text-primary-500">gluestack-ui</Text>
    </CheckboxLabel>
  );
}