Is it possible to use this library in a hybrid environment?

[mkrotel14]

I work in a company that uses both Android and iOS as main mobile technology, eventually some features are added in react native to speed up the development process.

My question then is, Can I use this library in a react native that was manually integrated into Android/iOS? I tried in a bare react-native project and it works but I can't seem to get past the "Unistyles runtime is not available..." error.

My React Native projects starts with each "context" being isolated one from the other

// index.js

import {AppRegistry} from 'react-native';

import App from './src/App';
import Feature1 from './src/pages/Feature1';
import Feature2 from './src/pages/Feature2';

function FeatureRegister1(props) {
    return (
        <App {...props}>
            <Feature1 />
        </App>
    )
}

function FeatureRegister2(props) {
    return (
        <App {...props}>
            <Feature2 />
        </App>
    )
}

AppRegistry.registerComponent("Feature1", () => FeatureRegister1)
AppRegistry.registerComponent("Feature2", () => FeatureRegister2)

This enables for Feature1 and Feature2 have its own routes and screen without sharing context or having props that are unnecessary (although the bundle is the same, we are not doing code splitting for this example).

The App is a basic wrapper for common code between Feature1 and Feature2 where I initiate useQuery, react-intl and the Unistyle.

I don't know how can I make it work but it seems that all efforts lead to nowhere.

My folder structure looks like:

  - src/
    - App.tsx
    - pages/
    - shared/
      - theme
        - index.ts
  package.json
  unistyles.ts

My unistyle file imports themes defined inside the theme.ts

// unistyle.ts
import {UnistylesRegistry} from 'react-native-unistyles';
import {theme} from './src/shared/theme';

type AppThemes = {
  customTheme: typeof theme;
};

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

UnistylesRegistry.addThemes({
  customTheme: theme,
}).addConfig({
  initialTheme: 'customTheme',
});

Not to mention that my App.tsx contains the unistyle import

// App.tsx
import '../unistlyles';

function App({children}): JSX.Element {
  return (
    <View>
      {children}
    </View>
  );
}

export default App;

[jpudysz]

Hey @mkrotel14 to be honest, I don't know. Your setup seems to be correct, but the "Unistyles runtime is not available..." error is present when your iOS/Android projects didn't detect Unistyles via autolinking. This may happen if your hybrid app somehow doesn't support autolinking.

Here are the steps required to give you some insight:

• Install Unistyles and ensure it's listed as a dependency in package.json.
• Run pod install to install the native code; since Unistyles contains a podspec file, it will be auto-linked by React Native.
• During the pod install, you should see a message stating that react-native-unistyles (2.7.1) has been installed.
• At this point, the "Unistyles runtime is not available..." error should not be present, as your app should have access to the global.__UNISTYLES__ object.

Your project must be failing during the pod install or autolinking process. Ensure that you can see the success message while installing Unistyles.

[jpudysz]

It allows for manual linking. I'm using manual linking in react-native-unistyles repository (for local example). You can use react-native.config.js file and specify the uri to the node modules package. Here is example: https://github.com/jpudysz/react-native-unistyles/blob/main/examples/expo/react-native.config.js

[mkrotel14]

I ran some tests and I can assert, as you mentioned, that the issue is with autolink... the weird thing is that other installed libraries are being autolinked without issues and I don't need to manually import this module.

I was able to import this module on File -> New -> Import Module or the good old:

// settings.gradle

include ':react-native-unistyles'

project(':react-native-unistyles').projectDir = new File(rootDir, '../node_modules/react-native-unistyles/android')

Next step is to test on iOS but if there is a podspec file, probably will be easier.

As to why autolink didn't work, still a mistery, but at least I can use the library and not rely on styled-components anymore 🙏

[jpudysz]

Cool! You can also play around with react-native.config.js. It should be the easiest way to link it

[mkrotel14]

Nice, it worked 🎉

Although a little bit different from the example you provided, I looked on what properties and how to use it for react-native.config.js file. This is how it looks like:

module.exports = {
  dependency: {
    platforms: {
      android: {
        sourceDir: './node_modules/react-native-unistyles/android'
      }
    }
  }
}

After that, i just did a Gradle Sync on Android Studio and voilà.