Skip to content

3.1
Compare
Choose a tag to compare
@nandorojo nandorojo released this 16 Mar 19:28
· 201 commits to master since this release
v3.1.0
bfb6cd6

3.1: Examples, versions & upgrade guides 👨🏻‍🚒

This version doesn't upgrade any code in the solito package. Instead, I made many improvements to all example monorepo templates. For existing Solito users, I'll try to outline the changes below to make it easy to apply to your apps.

Yarn 3 🐷

Closing #29 #354 #308

All examples now use Yarn 3, with awesome speed improvements.

How I did it (for existing apps)

To upgrade Yarn 3, I did the following.

yarn set version stable
yarn -v # 3.4.1

Next, add nodeLinker: node-modules in the .yarnrc.yml file that should have been created:

yarnPath: .yarn/releases/yarn-3.4.1.cjs
nodeLinker: node-modules

Lastly, add the following to your .gitignore:

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

This may not be exhaustive. I highly recommend reading this guide to make sure all the steps for your particular app are followed. See the Yarn 3 docs too.

Reanimated 3 ⚡️

I upgraded Reanimated to 3.0.2. Don't use an earlier 3.0 version, since they won't have my PRs adding Next.js support.

Reanimated 3 includes my PR which removes the need for a Babel or SWC plugin on Web. This simplifies Reanimated + Next.js a lot, since you no longer need an SWC plugin. Let's see what you need to do to upgrade.

Keep in mind that upgrading to Reanimated 3 removes support for Expo Go.

What I did

  • In apps/expo:
    • Replace react-native-reanimated in apps/expo/package.json to point to "3.0.2" (exact version).
  • In apps/next:
    • yarn add setimmediate
    • import setimmediate at the top of pages/_app.tsx
    • Remove the SWC plugin from next.config.js (see more at the bottom)

Expo Next Adapter 5 🛁

I upgraded @expo/next-adapter to 5.0.2. This removes all automatic transpilation of react-native & expo packages, so you now need to do this yourself in next.config.js. It also means our next.config.js is super simplified – which I'll touch on in below.

What I did

Some of the changes will be covered below in next.config.js. But an important breaking change is that we now need to use our own _document.tsx file, whereas we previously exported one from @expo/next-adapter.

If you were re-exporting that file from @expo/next-adapter, you can now use this instead:

pages/_document.js 
// Based on https://github.com/zeit/next.js/tree/canary/examples/with-react-native-web
// and https://github.com/expo/expo-cli/blob/main/packages/webpack-config/web-default/index.html
import NextDocument, { Head, Html, Main, NextScript } from 'next/document'
import * as React from 'react'
import { AppRegistry } from 'react-native'

export const style = `
/**
* Building on the RNWeb reset:
* https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
*/
html, body, #__next {
width: 100%;
/* To smooth any scrolling behavior */
-webkit-overflow-scrolling: touch;
margin: 0px;
padding: 0px;
/* Allows content to fill the viewport and go beyond the bottom */
min-height: 100%;
}
#__next {
flex-shrink: 0;
flex-basis: auto;
flex-direction: column;
flex-grow: 1;
display: flex;
flex: 1;
}
html {
scroll-behavior: smooth;
/* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
-webkit-text-size-adjust: 100%;
height: 100%;
}
body {
display: flex;
/* Allows you to scroll below the viewport; default value is visible */
overflow-y: auto;
overscroll-behavior-y: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-ms-overflow-style: scrollbar;
}
`

export async function getInitialProps({ renderPage }) {
AppRegistry.registerComponent('Main', () => Main)
const { getStyleElement } = AppRegistry.getApplication('Main')
const page = await renderPage()
const styles = [
  <style key="style-reset" dangerouslySetInnerHTML={{ __html: style }} />,
  getStyleElement(),
]
return { ...page, styles: React.Children.toArray(styles) }
}

export class Document extends NextDocument {
render() {
  return (
    <Html>
      <Head>
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
}

Document.getInitialProps = getInitialProps

export default Document

Next.js 13.2.0 🥵

I upgraded next to 13.2.0. You can now use the next.config.js updates below.

Make sure your react and react-dom versions are 18.2.0 by running yarn why react and yarn why react-dom.

Clean up packages

You can uninstall next-font, next-images, next-transpile-modules & next-compose-plugins (unless you use it)

Simplified next.config.js 🧹

You can now uninstall next-transpile-modules and remove webpack5: true from your nextConfig.

Move your next-transpile-modules array into transpilePackages, directly in the nextConfig.

This is what the current one looks like, at apps/next/next.config.js:

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

/** @type {import('next').NextConfig} */
const nextConfig = {
  // reanimated (and thus, Moti) doesn't work with strict mode currently...
  // https://github.com/nandorojo/moti/issues/224
  // https://github.com/necolas/react-native-web/pull/2330
  // https://github.com/nandorojo/moti/issues/224
  // once that gets fixed, set this back to true
  reactStrictMode: false,
  transpilePackages: [
    'react-native',
    'react-native-web',
    'solito',
    'dripsy',
    '@dripsy/core',
    'moti',
    'app',
    'react-native-reanimated',
    '@expo/html-elements',
  ],
}

module.exports = withExpo(nextConfig)

We're down to just 1 comment about config issues. That's some great progress though. Here's a diff of the old to new next.config.js.

For users upgrading existing Solito apps: you will likely have to manually add any packages start with @expo or expo- to your transpilePackages array. This is a breaking change of @expo/next-adapter v5. You might need to dedicate 30 minutes to this step. If you run yarn web, and you get an error for a package, add it to transpilePackages there.

Assets 2
Loading