4.3.0 - React Navigation 7

Solito 4.3.0

yarn add solito

4.3.0 now supports React Navigation v7. The types under the hood have been updated.

Closes #498, as this also addresses issues with Solito and Expo SDK 52.

Breaking changes

TLDR – if you're on the newer React Navigation 7, you don't need to change anything other than upgrading Solito.

This is only a breaking change if you're using a very old version of React Navigation. The only breaking change is the one where LinkingContext was officially exported by @react-navigation/native, which happened somewhere around @react-navigation/native@6.2. So if you're on a newer version than that, then this should work fine for you without upgrading @react-navigation/native.

Recommendations

I recommend upgrading React Navigation and Solito!

4.2.2

Fixes

The following is now supported on native:

router.push('#')

This will be a no-op in keeping with web behavior. The motivation is for cases where the URL may be nullable:

router.push(url || '#')

4.2.1

Fix: useParams() previously could return params as undefined on native at times. This defied the types. For now, it will fallback to an empty object instead.

4.2.0

• Add support for target="_blank" and the rel prop for Link and TextLink. Close #452.

4.1.2

Simple release: adds forwardRef to SolitoImage on Web, passing down the ref to NextImage under the hood:

import { SolitoImage } from 'solito/image'

export default function Image() {
  const ref = useRef<SolitoImage>(null)

  return <SolitoImage ref={ref} src="" alt="" height={300} width={300} />
}

Addresses #439.

Previous versions of 4.1 had messed up NPM releases, which is why it skips to this one.

v4 – Next.js App Router

Solito 4: React Native + Next.js App Router 🎉

Solito 4 is an exciting step for the React Native + Next.js Stack. You can now use React Native with the Next.js App Router.

See the docs.

Breaking Changes

This version has no breaking changes and is backwards compatible with the pages folder. It introduces a number of new hooks and imports to let you build with the Next.js App Directory.

In typical Solito fashion, any new functionality will mirror the Next.js import paths and APIs as closely as possible.

Upgrade Guide

1. yarn add solito from packages/app
2. yarn add next from apps/next

New Features

solito/navigation

Following the Next.js approach, there is now a new import, solito/navigation, for the App Router hooks. When building a page in the app directory, you will use this instead of other imports you may be used to for hooks, such as solito/router.

See the docs for all hooks.

The following hooks are added:

• useRouter: Similar to the useRouter hook from solito/router, adapted for the App Router by following the next/navigation conventions. It has the same behavior on iOS and Android.
• useParams: Read dynamic segment parameters (/users/[userId]) as { userId: string }.
• useSearchParams: Read URL search parameters using the URLSearchParams class.
• usePathname: The much-requested hook to read the current path. This hook may change in the future, depending on its stability on native.
• useUpdateSearchParams: A convenience hook to update search parameters as an object. Calls setParams on native, and router.push or router.replace on Web (configurable).
• useLink The same hook that exists now from solito/link, adapted for the App Router. You can call this to create accessible, custom link components.

solito/link

Link and TextLink components are now marked with use client, making them compatible with RSC and the App Router.

See the docs for Link.

solito/image

SolitoImage is now marked with use client, making it compatible with RSC and the App Router.

See the docs for Image.

solito/moti

To use the MotiLink component in the App Directory, you should import it from solito/moti/app.

See the docs for MotiLink.

Setup

Before you can start using the App Directory, you need to add some minimal setup.

/app/layout.tsx

Clear out the layout.tsx file to look like this:

import { StylesProvider } from './styles-provider'
import './globals.css'

export const metadata = {
  title: 'Create Solito App',
  description: 'Generated by create Solito app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <StylesProvider>{children}</StylesProvider>
      </body>
    </html>
  )
}

Notice that we have two imports at the top. Let's implement those next.

/app/styles-provider.tsx

StylesProvider should look like this (you can copy-paste it):

Click to view code

// @ts-nocheck
'use client'
import { useServerInsertedHTML } from 'next/navigation'
import { StyleSheet } from 'react-native'

export function StylesProvider({ children }: { children: React.ReactNode }) {
  useServerInsertedHTML(() => {
    // if you use Tamagui, you should add its sheet here too.
    const sheet = StyleSheet.getSheet()
    return (
      <style
        dangerouslySetInnerHTML={{ __html: sheet.textContent }}
        id={sheet.id}
      />
    )
  })
  return <>{children}</>
}

/app/globals.css

Finally, add this CSS reset:

Click to view code

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;
}

That's it!

_document.tsx/_app.tsx

You can start using the App Router with Solito without changing those existing files.

Example Monorepos

The Solito example monorepos have not yet moved to the App Router.

That said, there is a Solito + Next.js App Directory example, which should be a useful reference for the setup.

React Server Components

Please note that the root of your page will often be marked with use client for React Native Web compatibility.

In the future, Tamagui may support React Server Components, so you can use that if you want to use RSC down the line. Until RSC is implemented on the native side, you likely won't find yourself using them in a Solito app.

That said, the Next.js App Router has many additional features (like nested layouts) that will be useful without RSC.

Follow the Next.js Docs

Please reference the official Next.js docs for using the App Router.

3.2.6

Bug Fixes

router.push({ pathname: '/', query: { items: [1, 2] }) handled the items array incorrectly, turning it into a comma-separated string: /?items=1,2.

This was reported at #379 and fixed. The output is now correct: /?items=1&items=2.

v3.2.3

Features

• contentFit for solito/image is now supported, instead of resizeMode, which is deprecated (#371)

Bug Fixes

• setParam returned by useParam('names') would incorrectly put a comma-separated string in the URL on Web when passing an array. This is fixed in 3.2.3. You can now pass setParam([name1, name2]) and it will work. stringify will not apply to arrays.

📝 Docs: Auth, Platform Code

The docs now have 2 new pages:

• How to use Firebase Auth with Solito (with video & source code): https://solito.dev/guides/auth
• Plaform-specific code recipe: https://solito.dev/recipes/platform-code

3.2.0

Fixes

• useRouter previously updated its reference on every render. It no longer does. It should be safe to use router.push or push() inside of useCallback now.