Need help with solito setup for unistyles v2 🙏

[ammarfaris]

Hi there again @jpudysz , I'm using the latest command to create a solito starter project with expo-router:

npx create-solito-app@latest -t with-expo-router

Then I try to setup unistyles 2.0 ; I saw a sample that you have with the solito setup with unistyles v1, hence I think you are familiar with solito mono repo:

This is what i did:

In packages/app I created a styles folder which has all three files breakpoints.ts, themes.ts and unistyles.ts following your setup guide.

Then, in apps/expo/app/_layout.tsx I called the UnistylesRegistry once by importing import 'app/styles/unistyles ; same goes to the root for nextjs at apps/next/pages/_app.tsx

For nextjs, I realized the additional setup to add react-native-unistyles in the list of transpilePackages in the next.config.js file.

const { withExpo } = require('@expo/next-adapter')

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  transpilePackages: [
    'react-native',
    'react-native-web',
    'solito',
    'dripsy',
    '@dripsy/core',
    'moti',
    'app',
    'react-native-reanimated',
    '@expo/html-elements',
    'react-native-gesture-handler',
    'react-native-unistyles' // added
  ],
}

module.exports = withExpo(nextConfig)

In packages/app/features/home/screen.tsx I changed the content to follow your Basic Usage sample:

import React from 'react'
import { View, Text } from 'react-native'
import { createStyleSheet, useStyles } from 'react-native-unistyles'

export function HomeScreen()  {
    const { styles } = useStyles(stylesheet)

    return (
        <View style={styles.container}>
            <Text style={styles.text}>
                Unistyles example
            </Text>
        </View>
    )
}

const stylesheet = createStyleSheet(theme => ({
    container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: theme.colors.background
    },
    text: {
       color: theme.colors.typography
    }
}))

However, after building via EXPO DEV CLIENT I received this error:

and when running the NEXTJS APP I received this error:

I think they have something to do with both expo and nextjs apps not recognizing or finding the UnistylesRegistry / unistyles.ts.

Thank you in advance for your help 🙏

[jpudysz]

You need to also init Unistyles on client to inject required listeners, bindings etc.

To do that just import you config as always:

import '../unistyles'

[jpudysz]

I'm not sure if there is a better way ATM, but I will focus on SSR as soon as I finish 2.x. It's not ideal and I imagine static styles for both SSR/web.

[ammarfaris]

You need to also init Unistyles on client to inject required listeners, bindings etc.

To do that just import you config as always:

import '../unistyles'

Mentioned in my original post

Then, in apps/expo/app/_layout.tsx I called the UnistylesRegistry once by importing import 'app/styles/unistyles ; same goes to the root for nextjs at apps/next/pages/_app.tsx

Should i put it somewhere else ? @jpudysz

[jpudysz]

I have a working demo on my computer. Will push it later today to the repo.

[ammarfaris]

okay thanks, when I put the code below directly instead of importing from my styles folder it works, so definitely the import is somehow not working..hmm... i checked the path, it's correct....

replaced import 'app/styles/unistyles' with the direct code below...

UnistylesRegistry.addBreakpoints(breakpoints)
  .addThemes({
    light: lightTheme,
    dark: darkTheme,
    // register other themes with unique names
  })
  .addConfig({
    // you can pass here optional config described below
    adaptiveThemes: true,
  })

[ammarfaris]

okay thanks, when I put the code below directly instead of importing from my styles folder it works, so definitely the import is somehow not working..hmm... i checked the path, it's correct....

replaced import 'app/styles/unistyles' with the direct code below...

UnistylesRegistry.addBreakpoints(breakpoints)
  .addThemes({
    light: lightTheme,
    dark: darkTheme,
    // register other themes with unique names
  })
  .addConfig({
    // you can pass here optional config described below
    adaptiveThemes: true,
  })

But apparently it works only for my NEXTJS portion of the app, my EXPO app via expo dev client still throwing Unistyles runtime is not available.

The good news is that there is less flickering for the nextjs app as compared to the expo-web project using expo's create-expo-app (npx create-expo-app my-app) - [Update] BUT there is still very-fast-flickering in my Safari browser, can't seem to notice it in my Chrome browser.

Looking forward for your working demo, @jpudysz ; it's also working on expo dev client too right?

Thanks, keep up the great work! Appreciate your work!

[jpudysz]

Here is simplified demo:

jpudysz/react-native-unistyles-ssr-exmaple@a82f16d

[ammarfaris]

Also, I am looking at your code for the demo above:

export const HomeScreen = () => {
    const { styles, breakpoint, theme } = useStyles(stylesheet);
    const [isClient, setIsClient] = useState(false);

    useEffect(() => {
        setIsClient(true);
    }, []);

    return (
        <View style={styles.container}>
            <Text style={styles.text}>Welcome to Expo + Next.js + Unistyles 👋</Text>
            <Text>Current breakpoint: {isClient ? breakpoint : null}</Text>
            <Text>I like {theme.colors.barbie} color</Text>
            <View style={styles.linksContainer}>
                <TextLink href="/user/unistyles">Go to magic place 🦄</TextLink>
            </View>
            {!isClient && (
                <View style={styles.loader}>
                    <ActivityIndicator />
                </View>
            )}
        </View>
    );
};

the isClient is to show the <ActivityIndicator /> before component mounting right?

Is there a way to make the background color stays as "aloes" or "oak" color before mounting? or there will be a temporary white background before component mounting?

temporary.white.mov

[jpudysz]

For this one, it's because I used breakpoints for backgroundColor:

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: {
            xs: theme.colors.oak,
            md: theme.colors.aloes
        }
    },

Server has no idea what's your browser size. That's why initialy it's undefined, later it's resolved to aloes.
It may also happen for light/dark modes.

[ammarfaris]

Is it possible to have a predefined initial value so that the value is not undefined initially? @jpudysz

[jpudysz]

It wouldn't change anything. If I pick eg. "sm" and your client is "lg" then the effect will be the same - a blink and switch of the layout.

[ammarfaris]

Here is simplified demo:

jpudysz/react-native-unistyles-ssr-exmaple@a82f16d

Thanks for updating the repo @jpudysz . The Nextjs portion of Solito is working fine now after putting the unistyles.ts initialization file at the correct place.

However, for the Expo portion of Solito, I tried to put unistyles.ts at a lot of places and even putting the code to initialize Unistyles runtime (the ones inside unistyles.ts) directly at the Expo portion root => i.e. _layout.tsx , I still get the same error:

 ERROR  Error: Unistyles runtime is not available. Make sure you followed the installation instructions,

Still need help. Thanks!

[ammarfaris]

Yeah, just published here: https://github.com/ammarfaris/app-solito-test-unistyles2

[jpudysz]

Thanks, realistically I will be able to check it tomorrow. Will get back to you

[ammarfaris]

Thanks, appreciate it, appreciate your time.

[jpudysz]

Hello again 👋,

I've forked your repository and successfully run it on iOS without any additional code. You simply need to execute the prebuild command as mentioned here: https://reactnativeunistyles.vercel.app/start/setup/#2-finish-installation. To enable adaptive theming, you should activate userInterfaceStyle, as detailed in this link: https://reactnativeunistyles.vercel.app/reference/faq/#adaptive-mode-doesnt-work-for-me.

Please note, if you execute yarn native from the root directory, it will attempt to start your app in Expo Go, which is no longer supported.

[ammarfaris]

Thanks for @jpudysz for trying the repo and giving hints ;

Apparently, my attempts were on a physical Android device (due to my current limited space in my macbook), and I thought I was correctly building the local builds on my device ; it was actually and unfortunately running Expo Go on my Android device 😢

I now managed to get the apk files by running

eas build --platform android --local

AND after doing some 'gymnastics' following this

Now, it's working fine on my android physical device, thanks for the help! fuh #TIL...