[V2] UNISTYLES_ERROR_RUNTIME_UNAVAILABLE

[Atanas Kanchev]

Description

Getting error UNISTYLES_ERROR_RUNTIME_UNAVAILABLE coming from node_modules/react-native-unistyles/src/Unistyles.ts:18

if (!isInstalled) {
            throw new Error(UnistylesError.RuntimeUnavailable)
}

Steps to reproduce

Snack or a link to a repository (optional)

https://github.com/atanaskanchev/rnu2

Unistyles version

next

React Native version

0.72.6

Platforms

iOS

[Jacek Pudysz]

You need to pod-install :)

[Atanas Kanchev]

You need to pod-install :)

So I've tried:

1. npx expo prebuild and
2. installed the pods

but still getting the same

[Jacek Pudysz]

I think it's because v2 is not correctly configured for npm. I was only working on local copy. Let me check that 👌

[Jacek Pudysz]

@atanaskanchev please try with:

yarn add react-native-unistyles@next // 2.0.0-alpha.6
yarn expo prebuild --clean

[Atanas Kanchev]

Unfortunately still the same with alpha 6 including Android.

Additionally I've noticed that the type of theme from useStyles comes as never instead of UnistylesTheme

[Jacek Pudysz]

Have you seen instructions from #41 ?
Android is not ready yet.

[Atanas Kanchev]

Ah, I'm sorry, I've missed the Android JSI wrapper task 😇. but I've followed the install instructions from there though

[Jacek Pudysz]

No worries 😄 , let's find out the solution.

Here is an example config: https://github.com/jpudysz/react-native-unistyles/blob/2.0/examples/expo/src/styles/index.ts

In the same file you can use UnistylesRegistry to register themes and breakpoints (TypeScript will guide you).
From now on, you can use createStyleSheet and useStyles imported from react-native-unistyles.

If you have multiple themes you need to also call useInitialTheme and thats it.
Do you have the same error that runtime is not available or something else?

[Atanas Kanchev]

I think I've followed all the steps in the repro repo, not sure what I'm missing

[Atanas Kanchev]

In the example config we've got

type AppThemes = {
    light: typeof lightTheme
    dark: typeof darkTheme
    premium: typeof premiumTheme
}

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

Can an interface extend a type in TS, not sure?

[Jacek Pudysz]

I'm checking your repo, will get back soon

[Jacek Pudysz]

I was able to run the example:

I simply:

yarn
yarn expo prebuild

I'm getting TypeScript hints from the theme in createStyleSheet.

There is indeed issue with theme accessed from useStyles - I need to fix it in the next version.

I was able to run your example.

The problem is that you didn't import anywhere /styles folder so the UnistylesRegistry is not triggered. Your themes and breakpoints are empty.

To simply fix that add import:

import '../styles'

to the _layout.tsx, or import it somewhere else (some kind of index.ts file).

[Atanas Kanchev]

Unfortunately I'm still facing the issue after updating to alpha 7 and importing the styles. Will close it down as most probably there's some issue with my local setup. Thanks for your help @jpudysz

[Jacek Pudysz]

Btw. I've just published alpha.8 with the fix for the theme hints: