[v2] Upgrade Solito to Support Next.js 13

[nandorojo]

To try this:

yarn add solito@next13

• Upgrade examples to Next.js 13
• Upgrade examples to use Solito v2 (incomplete)
• Upgrade Reanimated SWC Plugin for Next.js 13

Closes #202

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
solito	✅ Ready (Inspect)	Visit Preview	Nov 25, 2022 at 4:35PM (UTC)
solito-s9oj	❌ Failed (Inspect)		Nov 25, 2022 at 4:35PM (UTC)
with-custom-fonts	✅ Ready (Inspect)	Visit Preview	Nov 25, 2022 at 4:35PM (UTC)

1 Ignored Deployment

| Name | Status | Preview | Updated | | :--- | :----- | :------ | :------ | | **solito-app** | ⬜️ Ignored ([Inspect](https://vercel.com/fernandorojo/solito-app/9tBQWKD2kyPpqy4XM2L3sBDMqp8f)) | | Nov 25, 2022 at 4:35PM (UTC) |

[chrisarts]

Did you experiment with the app folder ? I try to reproduce the document initialprops in the RootLayout but no luck, keeping the _document file doest work either.

[chrisarts]

Also expo next adapter just upgrate to support next13 take a look: https://github.com/expo/expo-cli/tree/main/packages/next-adapter#readme

[ebg1223]

submitted PR #230 to fix error on expo due to updated nextjs useRouter hook.

[nandorojo]

Did you experiment with the app folder ? I try to reproduce the document initialprops in the RootLayout but no luck, keeping the _document file doest work either.

Not yet. This will require a new approach to injecting styles and such, without _document.

If you want to try, see this: https://beta.nextjs.org/docs/styling/css-in-js

I'm not sure if react-native-web supports this or not.

I think we'd need to add this to the root layout:

import { useServerInsertedHTML } from 'next/navigation';
import { AppRegistry } from 'react-native'

// ...
useServerInsertedHTML(() => {
     // where does Main come from in Next 13?
    AppRegistry.registerComponent('Main', () => Main)
    // @ts-ignore
    const { getStyleElement } = AppRegistry.getApplication('Main')

    return <>{getStyleElement()}</>;
  });

[macrozone]

Did you experiment with the app folder ? I try to reproduce the document initialprops in the RootLayout but no luck, keeping the _document file doest work either.

Not yet. This will require a new approach to injecting styles and such, without _document.

If you want to try, see this: https://beta.nextjs.org/docs/styling/css-in-js

I'm not sure if react-native-web supports this or not.

I think we'd need to add this to the root layout:

import { useServerInsertedHTML } from 'next/navigation';
import { AppRegistry } from 'react-native'

// ...
useServerInsertedHTML(() => {
     // where does Main come from in Next 13?
    AppRegistry.registerComponent('Main', () => Main)
    // @ts-ignore
    const { getStyleElement } = AppRegistry.getApplication('Main')

    return <>{getStyleElement()}</>;
  });

did you found a solution for that?

[AwakenedMind]

Any updates on this

[nandorojo]

Sigh, random pings.

I opened a PR at #397 to add app directory support. Maybe one of you can help figure out how to get useServerInsertedHTML to work with React Native.

[Gabrola]

@nandorojo check the tamagui starter app https://github.com/tamagui/tamagui/blob/master/starters/next-expo-solito/apps/next/app/TamaguiProvider.tsx

[nandorojo]

interesting...does Main still work here? may as well try 🤷‍♂️

[nandorojo]

Wow, can't believe I got this working lol.

[Gabrola]

@nandorojo Woot! 🎉

interesting...does Main still work here? may as well try 🤷‍♂️

I think Main actually does nothing here and the registerComponent function only is only called to trigger the generation of the RN CSS so you can fetch it using getStyleElement, pretty sure if you pass it an empty component it will still work. Also, I think this might be unperformant as it would register the app on each re-render.

Can you try this instead and see if it works? Follows roughly what's in the next.js docs here

  const [reactNativeApp] = useState(() => {
    AppRegistry.registerComponent('Main', () => () => null);
    // @ts-ignore
    return AppRegistry.getApplication('Main');
  });

  useServerInsertedHTML(() => reactNativeApp.getStyleElement());

[chrisarts]

@nandorojo Woot! 🎉

interesting...does Main still work here? may as well try 🤷‍♂️

I think Main actually does nothing here and the registerComponent function only is only called to trigger the generation of the RN CSS so you can fetch it using getStyleElement, pretty sure if you pass it an empty component it will still work. Also, I think this might be unperformant as it would register the app on each re-render.

Can you try this instead and see if it works? Follows roughly what's in the next.js docs here

  const [reactNativeApp] = useState(() => {
    AppRegistry.registerComponent('Main', () => () => null);
    // @ts-ignore
    return AppRegistry.getApplication('Main');
  });

  useServerInsertedHTML(() => reactNativeApp.getStyleElement());

Actually yes, Im not even using the app registry and it works normally, just needs to import the .css with RNW reset.