Codemod to upgrade from v2 -> v3? Has anybody written one?

[trcoffman]

Given how many files we need to edit to move from v2 -> v3, and the very mechanical nature of the transition, jscodeshift seems like the natural way to go about it.

Before I embark upon building a codemod to perform the migration, has anybody already done this? And if so, could you share your codemod with the community?

[jpudysz]

As far as I know, no one has done this before

[fredikey]

@trcoffman i wrote a basic codemod to migrate to Unistyles v3 in simple cases, maybe it'll be useful for you too

it runs only on files that import both createStyleSheet and useStyles from react-native-unistyles

So, the codemod:

• Rewrites the import to keep (or add) StyleSheet and drop the two old specifiers (createStyleSheet, useStyles)
• Removes the usage of the useStyles hook const { styles } = useStyles(...)
• Converts const %variable_name% = createStyleSheet({ … }) to const styles = StyleSheet.create({ … })

npx jscodeshift --transform=transform-unistyles.js --extensions=tsx,ts,js,jsx   --parser=tsx ./src

module.exports = function transform(fileInfo, api) {
 const j = api.jscodeshift
 const root = j(fileInfo.source)

 /* ────────── 1. qualify file ────────────────────────────────────── */
 const uniImports = root.find(j.ImportDeclaration, {
   source: { value: 'react-native-unistyles' },
 })

 const qualifies = uniImports.some(path => {
   const names = path.value.specifiers
     .filter(s => s.type === 'ImportSpecifier')
     .map(s => s.imported.name)
   return names.includes('createStyleSheet') && names.includes('useStyles')
 })

 if (!qualifies) return fileInfo.source

 /* ────────── 2. rewrite the import ──────────────────────────────── */
 uniImports.forEach(path => {
   // drop createStyleSheet & useStyles
   path.value.specifiers = path.value.specifiers.filter(s => {
     const n = s.imported?.name
     return n !== 'createStyleSheet' && n !== 'useStyles'
   })

   // add StyleSheet if missing
   if (!path.value.specifiers.some(s => s.imported?.name === 'StyleSheet')) {
     path.value.specifiers.push(j.importSpecifier(j.identifier('StyleSheet')))
   }
 })

 /* ────────── 3. remove useStyles hook usage ─────────────────────── */
 root
   .find(j.VariableDeclarator, {
     init: { type: 'CallExpression', callee: { name: 'useStyles' } },
   })
   .forEach(vdPath => {
     const parentPath = vdPath.parent
     const parent = parentPath?.value

     if (parent?.type === 'VariableDeclaration') {
       const decls = parent.declarations || []
       if (decls.length === 1) {
         j(parentPath).remove() // remove the entire declaration
       } else {
         j(vdPath).remove() // remove just that declarator
       }
     } else {
       j(vdPath).remove() // safest fallback
     }
   })

 /* ────────── 4. transform createStyleSheet call ─────────────────── */
 root
   .find(j.VariableDeclarator, {
     init: { type: 'CallExpression', callee: { name: 'createStyleSheet' } },
   })
   .forEach(vdPath => {
     vdPath.value.id = j.identifier('styles')
     vdPath.value.init.callee = j.memberExpression(
       j.identifier('StyleSheet'),
       j.identifier('create')
     )
   })
 /* ────────── 5. done ─────── */
 return root.toSource({ quote: 'single' })
}

[theonetheycallneo]

I've amended the above codemod to also handle the transformation of const { styles } = useStyles({ variants }) to styles.useVariants({ variants }). The new logic will be added as a new step that searches for the specific destructuring pattern from useStyles and rewrites it to the styles.useVariants call, preserving the variants argument.

module.exports = function transform(fileInfo, api) {
 const j = api.jscodeshift
 const root = j(fileInfo.source)

 /* ────────── 1. qualify file ────────────────────────────────────── */
 const uniImports = root.find(j.ImportDeclaration, {
   source: { value: 'react-native-unistyles' },
 })

 const qualifies = uniImports.some(path => {
   const names = path.value.specifiers
     .filter(s => s.type === 'ImportSpecifier')
     .map(s => s.imported.name)
   return names.includes('createStyleSheet') && names.includes('useStyles')
 })

 if (!qualifies) return fileInfo.source

 /* ────────── 2. rewrite the import ──────────────────────────────── */
 uniImports.forEach(path => {
   // drop createStyleSheet & useStyles
   path.value.specifiers = path.value.specifiers.filter(s => {
     const n = s.imported?.name
     return n !== 'createStyleSheet' && n !== 'useStyles'
   })

   // add StyleSheet if missing
   if (!path.value.specifiers.some(s => s.imported?.name === 'StyleSheet')) {
     path.value.specifiers.push(j.importSpecifier(j.identifier('StyleSheet')))
   }
 })

 /* ────────── 3. remove useStyles hook usage ─────────────────────── */
 root
   .find(j.VariableDeclarator, {
     init: { type: 'CallExpression', callee: { name: 'useStyles' } },
   })
   .forEach(vdPath => {
     const parentPath = vdPath.parent
     const parent = parentPath?.value

     if (parent?.type === 'VariableDeclaration') {
       const decls = parent.declarations || []
       if (decls.length === 1) {
         j(parentPath).remove() // remove the entire declaration
       } else {
         j(vdPath).remove() // remove just that declarator
       }
     } else {
       j(vdPath).remove() // safest fallback
     }
   })

 /* ────────── 4. transform createStyleSheet call ─────────────────── */
 root
   .find(j.VariableDeclarator, {
     init: { type: 'CallExpression', callee: { name: 'createStyleSheet' } },
   })
   .forEach(vdPath => {
     vdPath.value.id = j.identifier('styles')
     vdPath.value.init.callee = j.memberExpression(
       j.identifier('StyleSheet'),
       j.identifier('create')
     )
   })

 /* ────────── 5. transform const { styles } = useStyles({ variants }) ─────── */
 root
   .find(j.VariableDeclarator, {
     id: {
       type: 'ObjectPattern',
       properties: [
         {
           type: 'ObjectProperty',
           key: { name: 'styles' },
         },
       ],
     },
     init: {
       type: 'CallExpression',
       callee: { name: 'useStyles' },
       arguments: [{ type: 'ObjectExpression' }],
     },
   })
   .forEach(vdPath => {
     const variantsArg = vdPath.value.init.arguments[0] // Get the { variants } object
     vdPath.value.init = j.callExpression(
       j.memberExpression(
         j.identifier('styles'),
         j.identifier('useVariants')
       ),
       [variantsArg]
     )
     vdPath.value.id = j.identifier('styles') // Replace ObjectPattern with single identifier
   })

 /* ────────── 6. done ─────── */
 return root.toSource({ quote: 'single' })
}