Releases: nandorojo/solito
4.2.2
4.2.1
4.2.0
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.
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
yarn add solitofrompackages/appyarn add nextfromapps/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.
The following hooks are added:
useRouter: Similar to theuseRouterhook fromsolito/router, adapted for the App Router by following thenext/navigationconventions. 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 theURLSearchParamsclass.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. CallssetParamson native, androuter.pushorrouter.replaceon Web (configurable).useLinkThe same hook that exists now fromsolito/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.
solito/image
SolitoImage is now marked with use client, making it compatible with RSC and the App Router.
solito/moti
To use the MotiLink component in the App Directory, you should import it from solito/moti/app.
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
v3.2.3
Features
contentFitforsolito/imageis now supported, instead ofresizeMode, which is deprecated (#371)
Bug Fixes
setParamreturned byuseParam('names')would incorrectly put a comma-separated string in the URL on Web when passing an array. This is fixed in3.2.3. You can now passsetParam([name1, name2])and it will work.stringifywill 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
3.1.1
- Fix example monorepos. Please keep in mind that you need to use an Expo Dev Client instead of Expo Go.
- A regression in a previous release was caused by the following:
- Multiple versions of
react-native-reanimated. It should only be3.0.2(exact version) inapps/expo, notpackages/app expo-linkingwas incorrectly placed inpackages/appinstead ofapps/expo. It was also an old version. It should be4.0.1
- Multiple versions of
- A regression in a previous release was caused by the following:
- Run
expo run:iosinapps/expoto build your dev client. After that,yarn nativefrom the root will open in a dev client. The scripts have been updated to useyarn start. If you're an existing app, you should add--dev-clientat the end of youryarn nativescript. - I deleted
yarn.lockand reinstalled to fix hoisting issues.
Thanks to everyone for reporting issues with the starters introduced from 3.1. This should fix it now!
This release does not update the solito package.