Help installing Unistyles

[bolti95]

I've installed Unistyles to use with a RN project using Expo router, which is running the applications in development mode using metro bundler.

I've followed the instructions to install Unistyles but I think I've gone wrong somewhere... I've checked that:

1. the project uses react-native 0.78.0+ ... I'm using "react-native": "0.81.5"
2. new architecture is enabled
3. Expo SDK 53+ ... I'm using "~54.0.31"
4. ran :
   npm add react-native-unistyles react-native-nitro-modules react-native-edge-to-edge
5. ran :
   npx expo prebuild --clean , then:
   npm run android
6. Configured babel to recognise the plugin:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['react-native-unistyles/plugin', {
        root: 'app',
      }]
    ]
  };
};

7. Configured metro.config.js

const { getDefaultConfig } = require('expo/metro-config');
const path = require("path");
const root = path.join(__dirname, ".")


/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(root, {
  watchFolders: [root],
  isCSSEnabled: true,
});

module.exports = config;

8. written out a themes.ts file with the configured light/dark themes in Unistyles example.

9. declared the unistyles.ts file to override theme types for TS

import { darkTheme, lightTheme } from "./themes";

type AppThemes = {
  light: typeof lightTheme;
  dark: typeof darkTheme;
};

declare module "react-native-unistyles" {
  export interface UnistylesThemes extends AppThemes {}
}

10. I've added a nitro.json file to (try to) detect the UnistylesShadowRegistry

{
  "builder": "rollup",
  "platforms": {
    "android": [
        "UnistylesShadowRegistry"
      ]
    ,
    "ios": [
        "UnistylesShadowRegistry"
      ]
  }
}

I'm not so familiar with Nitro Modules configuration, or Unistyles - so any pointers I'd appreciate. 🙏 😄 thanks

[bolti95]

For additional info, I've added a console log of the Hybrid Object names which NitroModules detects in the project in my _layout.tsx

import { NitroModules } from "react-native-nitro-modules";

 console.log(NitroModules.getAllHybridObjectNames?.());

the result of the log is:
["UnistylesShadowRegistry", "UnistylesStyleSheet", "UnistylesRuntime"]

[jpudysz]

Hey man!
Skip part 10. It's not necessary

You just need to:

1. Install deps
2. Update babel config
3. Create unistyles.ts file (name doesn't matter): eg. https://github.com/jpudysz/react-native-unistyles/blob/main/example/unistyles.ts
4. Import it as soon as possible
5. Pre build
6. Run the app

It works with no extra nitro configs/code etc. 😁

[jpudysz]

Can you share a repo?