3.1

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.

3.0

yarn add solito

🌈 New Features

Example apps

• Upgraded all examples to Expo SDK 48
• Upgraded expo-router to v1

SolitoImage

Solito now uses expo-image. Please refer to the breaking changes below to migrate.

blurDataURL

SolitoImage now supports the blurDataURL on Native when you set placeholder="blur".

<SolitoImage 
  placeholder='blur'
  blurDataURL='|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj['
  {...props}
/>

contentPosition

You can use contentPosition to mirror the objectPosition behavior from Web.

<SolitoImage 
  contentPosition="top center"
/>

Note that you can use strings like center or top center. But if you want percentage values, you should pass them as an object, since this is the syntax supported by expo-image

<SolitoImage 
  // objectPosition="25% 50%" <- CSS equivalent
  contentPosition={{ top: '25%', left: '50%' }}
/>

👻 Breaking Changes

📸 SolitoImage now uses expo-image on iOS & Android

Previously, SolitoImage usedreact-native-fast-image on iOS & Android, and had a fallback for Expo. This behavior has changed in Solito v3.

Here's how to migrate from Solito v2:

If you're using Expo

• Upgrade to SDK 48+ with expo upgrade
• Install Expo Image in the Expo folder
  • cd apps/expo
  • expo install expo-image
  • yarn remove react-native-fast-image (this is important)
  • cd ../.. && yarn
  • Remember to rebuild your native dependencies: cd apps/expo && expo run:ios
• Expo Go users: If you previously used the alias in your babel.config.js that pointed solito/image to solito/image/expo, you should remove that, and then run expo start -c to clear the cache. If you didn't, have an alias in your Babel config, then you're all set.

If you aren't using Expo, click here

While SolitoImage uses expo-image on native, you can still use react-native-fast-image under the hood for SolitoImage for v3.

cd apps/expo
yarn add -D babel-plugin-module-resolver
cd ../..
yarn

Next, edit your apps/expo/babel.config.js file to add a resolution from solito/image to solito/image/react-native-fast-image.

// babel.config.js
module.exports = function (api) {
  api.cache(true)

  return {
    presets: [['babel-preset-expo', { jsxRuntime: 'automatic' }]],
    plugins: [
      'react-native-reanimated/plugin',
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            'solito/image': 'solito/image/react-native-fast-image',
          },
        },
      ],
    ],
  }
}

next/image is still used under the hood for Web, no breaking changes there.

2.3.0

Features

A release went live minutes ago for v2.2.0 which introduced the new useParams hook.

2.3.0 adds a new functionality for useParam, as well as the new useParams. You can now override the default web behavior to control calling Router.push vs Router.replace.

import { createParam } from 'solito'

const { useParam } = createParam<{ slug: string }>()

// ...in your component:
const [slug, setSlug] = useParam('slug')
 
const onPress = () => setSlug(artist.slug, { webBehavior: 'replace' })

You can pass push or replace to webBehavior. By default, it is set to replace if the param already existed in the URL.

You can do the same with useParams:

import { createParam } from 'solito'

const { useParam } = createParam<{ slug: string }>()

// ...in your component:
const { params, setParams } = useParams()

// default: push
const onPress = () => setParams({ slug: artist.slug }, { webBehavior: 'replace' })

2.2.0

New features

useParams

• createParam now returns a useParams hook, which lets you read and update multiple params. This closes #323.

const { useParams } = createParam<{ first: string, second: string }>()

export function App() {
  const { params, setParams } = useParams()
}

setParams shallow-merges your screen parameters with existing ones on both web and native. This matches React Navigation behavior. It will not clear out your Router.query on Next.js the way that Router.push typically does.

Bug fixes

• Fixed #325 where next/router was imported on native.

2.1.3

Bug Fixes

• Fix SolitoImage not applying height and width on native when fill is not true (thanks to @kyawthura-gg for raising this at #268)
• Update metro resolution for Expo Router example (@yuripaoloni)
• Fix forceSwcTransforms in examples (@tonymckendry)

2.1.2

Bug Fixes

• Fix SolitoImage's global loader via SolitoImageProvider (close #280)

Features

• Support passing href="#" on native
• This lets you conditionally render an href while still passing the type checker. Useful if you're asynchronously loading the link.

2.1 Update multiple params

In 2.1, createParam now exports a useUpdateParams hook, which lets you update multiple params in one function call:

import { createParam } from 'solito'

const { useUpdateParams } = createParam<{ direction: string, order: string }>()

export default function Page() {
  const update = useUpdateParams()

  const onPress = () => {
    update({ direction: 'asc', order: 'color' })
  }
}

1.1.2: Stack replace()

There is a new experimental feature to let you use React Navigation's stack replace action under the hood. It's been working well for me.

With useRouter:

router.replace('/', undefined, {
  experimental: {
    nativeBehavior: 'stack-replace',
    isNestedNavigator: true // this will likely be true
  }
})

And with Link:

<Link
  replace
  experimental={{ nativeBehavior: 'stack-replace', isNestedNavigator: true }}
/>

It's also available in version 2.0.0-canary.4:

yarn add solito@next13

2.0: Next.js 13 Support + Image

Full upgrade guide + release notes here.

yarn add solito

This version will upgrade examples & internal support to work with Next.js 13.

To discuss, check out the issue open at #202

To follow along with the code, see the PR: #202.

New Features

Link

The Link & TextLink components have been adjusted to match the next@13 API.

solito/image

I'm experimenting with a new solito/image component at #217. If anyone is familiar with srcSet and sizes behavior, and how it might be converted to a JS-based implementation on native, I'd greatly appreciate some guidance.

If I move forward with this feature, it opens the door to also add a solito/image/fast component to use react-native-fast-image on iOS and Android.

What's Changed

• Possible typo in docs by @RyelBanfield in #158
• [with-tailwind] fix FOUC + improve Next.js app by @axeldelafosse in #163
• [with-tailwind] Fix TS errors by @axeldelafosse in #167
• Expo router starter + guide by @nandorojo in #169
• Update expo-router.md by @Randall71 in #170
• update starters readme and expo-router entry by @ammarfaris in #173
• Add React Navigation getId link to docs by @kevinvangelder in #176
• useRouter no longer breaks on native (#230) by @ebg1223

New Contributors

• @RyelBanfield made their first contribution in #158
• @axeldelafosse made their first contribution in #163
• @ammarfaris made their first contribution in #173
• @kevinvangelder made their first contribution in #176

Full Changelog: v1.0.11...v2.0

1.0.11: useParam fix

Please upgrade to 1.0.11 if you're on v1! There was a regression in 1.0 that broke the useParam behavior on native. It is resolved in 1.0.11.

The bug was reported in here (with a push fixed within 6 minutes): #152

To anyone affected, sorry about that.

Thank you!