Moving from Stitches (styled-components) to Unistyles

app.config.ts

@@ -47,9 +47,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
       config: {
         usesNonExemptEncryption: false,
       },
-      infoPlist: {
-        ITSAppUsesNonExemptEncryption: false,
-      },
+      infoPlist: {},
     },
     android: {
       adaptiveIcon: {

babel.config.js

@@ -4,6 +4,7 @@ module.exports = function (api) {
     presets: ['babel-preset-expo'],
     plugins: [
       '@lingui/babel-plugin-lingui-macro',
+      ['react-native-unistyles/plugin', { root: 'src' }],
       'react-native-reanimated/plugin', // NOTE: this plugin MUST be last
     ],
   };

eslint.config.js

@@ -107,14 +107,15 @@ module.exports = defineConfig([
             '*.startsWith',
             'require',
             'useState',
+            'createElement',
           ],
         },
       ],
 
       // Accessibility
       'react-native-a11y/has-accessibility-hint': 'warn',
 
-      // Import sort/order
+      // Import sort/order etc.
       'import/namespace': ['error', { allowComputed: true }],
       'import/order': [
         'error',
@@ -133,6 +134,21 @@ module.exports = defineConfig([
           'newlines-between': 'always',
         },
       ],
+      'no-restricted-imports': [
+        'error',
+        {
+          name: 'react-native',
+          importNames: ['StyleSheet'],
+          message:
+            'Please import StyleSheet from unistyles instead of react-native.',
+        },
+        {
+          name: 'react-native',
+          importNames: ['Text'],
+          message:
+            'Please import Text from our design system instead of react-native.',
+        },
+      ],
     },
   },
 

index.ts

@@ -0,0 +1,2 @@
+import 'expo-router/entry';
+import './src/styles/styled';

package.json

@@ -2,7 +2,7 @@
   "name": "taito-react-native-template",
   "version": "0.0.1",
   "private": true,
-  "main": "expo-router/entry",
+  "main": "index.ts",
   "scripts": {
     "start": "expo start",
     "start:clean": "expo start --clear",
@@ -76,19 +76,21 @@
     "react-native": "0.79.2",
     "react-native-collapsible": "1.6.2",
     "react-native-date-picker": "5.0.12",
+    "react-native-edge-to-edge": "1.6.2",
     "react-native-gesture-handler": "~2.24.0",
     "react-native-ios-context-menu": "3.1.2",
     "react-native-ios-utilities": "5.1.5",
     "react-native-keyboard-controller": "1.17.1",
     "react-native-mmkv": "3.2.0",
+    "react-native-nitro-modules": "0.26.4",
     "react-native-permissions": "5.4.0",
     "react-native-reanimated": "~3.17.5",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.10.0",
     "react-native-svg": "15.11.2",
     "react-native-toast-message": "2.3.0",
+    "react-native-unistyles": "3.0.7",
     "react-native-web": "~0.20.0",
-    "stitches-native": "0.4.0",
     "zeego": "3.0.6",
     "zustand": "5.0.4"
   },

src/Providers.tsx

@@ -1,36 +1,36 @@
 import type { ReactNode } from 'react';
+import { View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { KeyboardProvider } from 'react-native-keyboard-controller';
+import { StyleSheet } from 'react-native-unistyles';
 
 import ErrorBoundary from '~components/common/ErrorBoundary';
 import NavigationThemeProvider from '~components/common/NavigationThemeProvider';
 import Toaster from '~components/common/Toaster';
-import { ColorModeProvider } from '~services/color-mode';
 import { I18nProvider } from '~services/i18n';
-import { styled } from '~styles';
 
 export default function Providers({ children }: { children: ReactNode }) {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <I18nProvider>
-        <ColorModeProvider>
-          <ErrorBoundary>
-            <NavigationThemeProvider>
-              <KeyboardProvider>
-                <AppWrapper>
-                  {children}
-                  <Toaster />
-                </AppWrapper>
-              </KeyboardProvider>
-            </NavigationThemeProvider>
-          </ErrorBoundary>
-        </ColorModeProvider>
+        <ErrorBoundary>
+          <NavigationThemeProvider>
+            <KeyboardProvider>
+              <View style={styles.appWrapper}>
+                {children}
+                <Toaster />
+              </View>
+            </KeyboardProvider>
+          </NavigationThemeProvider>
+        </ErrorBoundary>
       </I18nProvider>
     </GestureHandlerRootView>
   );
 }
 
-const AppWrapper = styled('View', {
-  flex: 1,
-  backgroundColor: '$background',
-});
+const styles = StyleSheet.create((theme) => ({
+  appWrapper: {
+    flex: 1,
+    backgroundColor: theme.colors.surface,
+  },
+}));