### Install Solito Starter App with CLI

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/starter.md

Use this command to install the Solito starter monorepo locally if you prefer a terminal-based setup.

```sh
npx create-solito-app@latest my-solito-app
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/nandorojo/solito/blob/master/README.md

Run this command to install all necessary project dependencies after cloning the repository.

```sh
yarn
```

--------------------------------

### Start Local Development Server

Source: https://github.com/nandorojo/solito/blob/master/docs/README.md

Starts a local development server for live preview. Changes are reflected without restarting.

```bash
yarn start
```

--------------------------------

### Start Next.js Local Development

Source: https://github.com/nandorojo/solito/blob/master/example-monorepos/with-api/readme.md

This command starts the Next.js development server for local testing.

```bash
yarn web
```

--------------------------------

### Full Example with MotiPressable

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/use-link.mdx

An example demonstrating how to integrate useLink with MotiPressable to create an animated link component.

```APIDOC
## Full Example

Here is an example of `useLink`, together with `MotiPressable` from [`moti`](https://moti.fyi).

```tsx twoslash
import { MotiPressableProps, MotiPressable } from 'moti/interactions'
import { useLink, UseLinkProps } from 'solito/link'

export type MotiLinkProps = UseLinkProps &
  Omit<
    MotiPressableProps,
    // ignore props that will be overridden by useLink
    keyof UseLinkProps | keyof ReturnType<typeof useLink>
  >

export const MotiLink = (props: MotiLinkProps) => {
  const linkProps = useLink(props)

  return <MotiPressable {...props} {...linkProps} />
}
```

> This code snippet is the source code for Solito's [Moti integration](/usage/moti-link) 🤯

You can now use `MotiLink` as if it were `MotiPressable`, along with the props for our link:

```tsx
<MotiLink
  animate={({ pressed }) => {
    'worklet'

    return {
      scale: pressed ? 0.9 : 1,
    }
  }}
  href="/artists/drake"
  as="/@drake"
>
  <Text>Drake</Text>
</MotiLink>
```
```

--------------------------------

### Install Solito

Source: https://context7.com/nandorojo/solito/llms.txt

Install Solito using yarn or npm. Configure Next.js to transpile Solito and other necessary packages.

```sh
yarn add solito
# or
npm i solito
```

```js
// apps/next/next.config.js
const { withExpo } = require('@expo/next-adapter')
const withPlugins = require('next-compose-plugins')
const withTM = require('next-transpile-modules')([
  'solito',
  // add other packages that need transpiling, e.g. moti, nativewind
])

module.exports = withPlugins([withTM, [withExpo, { projectRoot: __dirname }]], {
  images: {},
})
```

--------------------------------

### Contribute to create-solito-app

Source: https://github.com/nandorojo/solito/blob/master/create-solito-app/readme.md

Steps to set up the development environment for contributing to the `create-solito-app` project. This includes cloning the repository, installing dependencies, and running tests.

```bash
cd create-solito-app
yarn
yarn test
```

--------------------------------

### Start Expo Local Development

Source: https://github.com/nandorojo/solito/blob/master/example-monorepos/with-api/readme.md

After building a dev client, use this command to start the Expo development server for native applications.

```bash
yarn native
```

--------------------------------

### Verify React Installation

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/compatibility.md

Run this command to check if React is installed more than once in your project, which can cause issues.

```bash
yarn why react
```

--------------------------------

### Install Gitmoji CLI for Contributing

Source: https://github.com/nandorojo/solito/blob/master/README.md

Install the gitmoji-cli globally to use gitmoji for commit messages when contributing to the project.

```sh
yarn global add gitmoji-cli
```

--------------------------------

### Install Native Dependencies

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/tailwind.mdx

Install libraries with native code in `apps/expo`. Ensure the exact same version is installed in `packages/app` if using it there to avoid monorepo issues.

```sh
cd apps/expo
yarn add react-native-reanimated

cd ../..
yarn
```

--------------------------------

### Start Docusaurus Development Server

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/intro.md

Navigate into your new Docusaurus project directory and start the development server. The site will automatically reload on changes.

```shell
cd my-website

npx docusaurus start
```

--------------------------------

### Install Next.js Peer Dependencies

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/install.md

Install the required peer dependencies for Next.js integration.

```sh
yarn add -D next-transpile-modules next-compose-plugins
```

--------------------------------

### Run Development Server with npm, yarn, or pnpm

Source: https://github.com/nandorojo/solito/blob/master/develop/appdir/README.md

Use these commands to start the development server for the Next.js application. Open http://localhost:3000 in your browser to view the running application.

```bash
npm run dev
```

```bash
yarn dev
```

```bash
pnpm dev
```

--------------------------------

### Install Solito with Yarn

Source: https://github.com/nandorojo/solito/blob/master/README.md

Use this command to add Solito to your project dependencies.

```sh
yarn add solito
```

--------------------------------

### Install Pure JS Dependencies

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/tailwind.mdx

Install JavaScript-only dependencies in `packages/app` for cross-platform use. Remember to run `yarn` in the root after adding dependencies.

```sh
cd packages/app
yarn add date-fns
cd ../..
yarn
```

--------------------------------

### Full Example: MotiLink Component

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/use-link.mdx

This example shows a complete MotiLink component that integrates Solito's useLink hook with MotiPressable for animated press interactions. It defines MotiLinkProps by extending UseLinkProps and MotiPressableProps.

```typescript
import { MotiPressableProps, MotiPressable } from 'moti/interactions'
import { useLink, UseLinkProps } from 'solito/link'

export type MotiLinkProps = UseLinkProps &
  Omit<
    MotiPressableProps,
    // ignore props that will be overridden by useLink
    keyof UseLinkProps | keyof ReturnType<typeof useLink>
  >

export const MotiLink = (props: MotiLinkProps) => {
  const linkProps = useLink(props)

  return <MotiPressable {...props} {...linkProps} />
}
```

--------------------------------

### Install Solito with NPM

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/install.md

Use this command to add Solito to your project dependencies using NPM.

```sh
npm i solito
```

--------------------------------

### Complete Next.js Configuration with Redirects and Plugins

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/recipes/deep-linking.mdx

This example shows a complete `next.config.js` file including the deep linking redirect configuration and common plugins like `@expo/next-adapter` and `next-transpile-modules`.

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true,
  async redirects() {
    return [
      {
        source: '/.well-known/:file',
        destination: '/api/.well-known/:file',
        permanent: false,
      },
    ]
  },
}

const { withExpo } = require('@expo/next-adapter')
const withPlugins = require('next-compose-plugins')
const withTM = require('next-transpile-modules')([
  'solito',
  'dripsy',
  '@dripsy/core',
  'moti',
  'app',
])

module.exports = withPlugins(
  [withTM, [withExpo, { projectRoot: __dirname }]],
  nextConfig
)

```

--------------------------------

### Configure Paths for Apple App Site Association

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/recipes/deep-linking.mdx

Modify the `paths` array in the `apple-app-site-association` configuration to selectively open specific URLs in your app. This example excludes paths starting with `/products/` while allowing all others.

```typescript
const BUNDLE_ID = 'YOUR-APPLE-APP-BUNDLE-ID'
const TEAM_ID = 'YOUR-APPLE-APP-STORE-TEAM-ID'

const association = {
  applinks: {
    apps: [],
    details: [
      {
        appID: `${TEAM_ID}.${BUNDLE_ID}`,
        // all paths, except for marketing pages
        paths: [
          // all paths, except for marketing pages where the URL starts with /products/
          // order matters! the first matched case will be used
          'NOT /products/*',
          '*',
        ],
      },
    ],
  },
}

export default (_: NextApiRequest, response: NextApiResponse) => {
  return response.status(200).send(association)
}
```

--------------------------------

### App Router Layout Setup

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/v4.mdx

Configure the root layout for the Next.js App Router. Ensure to include the StylesProvider for proper styling integration.

```tsx
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>
  )
}
```

--------------------------------

### Link to Settings Screen using TextLink

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/guides/new-route.md

Provides an example of creating a navigable link to the settings screen using the `TextLink` component from `solito/link`.

```tsx
import { TextLink } from 'solito/link'

export function LinkToSettings() {
  return <TextLink href="/settings">Settings</TextLink>
}
```

--------------------------------

### Configure Next.js for Solito

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/install.md

Update your `next.config.js` to include Solito and other packages that require transpilation. This setup is necessary for Next.js to correctly process Solito's modules.

```javascript
const { withExpo } = require('@expo/next-adapter')
const withPlugins = require('next-compose-plugins')

const withTM = require('next-transpile-modules')([
  'solito',
  // add other packages here that need transpiling, such as moti
])

module.exports = withPlugins([withTM, [withExpo, { projectRoot: __dirname }]], {
  // your next config goes here ...
})
```

--------------------------------

### Create a Custom Link Component with useLink

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/use-link.mdx

This example demonstrates how to create a custom MyLink component using the useLink hook. It spreads the returned linkProps onto a Pressable component.

```typescript
import { useLink, UseLinkProps } from 'solito/link'
import { Pressable } from 'react-native'
type Props = UseLinkProps & {
  children: React.ReactNode
}
// ---cut---

const MyLink = ({ href, as, ...props }: Props) => {
  const linkProps = useLink({
    href,
    as,
  })

  return <Pressable {...props} {...linkProps} />
}
```

--------------------------------

### Example Linking Prefixes

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/recipes/deep-linking.mdx

Configure the prefixes for your React Navigation linking. Ensure you include custom URL schemes and universal link domains (http/https) for your app to recognize incoming links.

```typescript
import * as Linking from 'expo-linking'

const url = 'beatgig.com'

const config = {
  prefixes: [
    Linking.createURL('/'),
    // https, including subdomains like www.
    `https://${url}/`,
    `https://*.${url}/`,
    // http, including subdomains like www.
    `http://${url}/`,
    `http://*.${url}/`,
  ],

  // ...
}
```

--------------------------------

### Using MotiLink Component

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/use-link.mdx

This example demonstrates how to use the MotiLink component with an href and as prop, along with an animate prop for press-based scaling effects. It renders a Text component inside the MotiLink.

```tsx
<MotiLink
  animate={({ pressed }) => {
    'worklet'

    return {
      scale: pressed ? 0.9 : 1,
    }
  }}
  href="/artists/drake"
  as="/@drake"
>
  <Text>Drake</Text>
</MotiLink>
```

--------------------------------

### Generate a New Docusaurus Site

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/intro.md

Use this command to scaffold a new Docusaurus site with the classic template. Ensure you have npm installed.

```shell
npm init docusaurus@latest my-website classic
```

--------------------------------

### Create a Custom MotiLink Component

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/moti-pressable.mdx

Use this component to create accessible links with animation capabilities. It combines MotiPressable for animations and Solito's useLink hook for navigation. Ensure you have 'moti' and 'solito' installed.

```tsx
import { MotiPressable } from 'moti/interactions'
import { useLink, UseLinkProps } from 'solito/link'

type MotiLinkProps = UseLinkProps &
  Omit<React.ComponentProps<typeof MotiPressable>, keyof UseLinkProps>

export function MotiLink({ 
  as,
  href,
  shallow,
  children,
  ...motiPressableProps
}: MotiLinkProps) {
  const linkProps = useLink({
    as,
    href,
    shallow,
  })

  return (
    <MotiPressable {...motiPressableProps} {...linkProps}>
      {children}
    </MotiPressable>
  )
}
```

--------------------------------

### Next.js Rewrites Configuration

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/recipes/redirects.mdx

Configure rewrites in next.config.js to handle URL redirection. This example redirects URLs starting with '/@:slug' to '/artists/:slug'.

```javascript
// next.config.js

module.exports = {
  async rewrites() {
    return [
      {
        source: '/@:slug',
        destination: '/artists/:slug',
      },
    ]
  },
}
```

--------------------------------

### Create a New Solito App

Source: https://github.com/nandorojo/solito/blob/master/create-solito-app/readme.md

Run this command to initialize a new Solito monorepo project. It scaffolds the necessary files and configurations for you.

```bash
npx create-solito-app@latest
```

--------------------------------

### Build Static Website

Source: https://github.com/nandorojo/solito/blob/master/docs/README.md

Generates static website content for hosting.

```bash
yarn build
```

--------------------------------

### Alternative URL Path Configuration (JSON)

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/guides/new-route.md

Demonstrates how to configure URL paths for screens using a JSON-like structure within the linking configuration.

```json
{
  "screens": {
    "home": "",
    "user-detail": "user/:id",
    "settings": "preferences"
  }
}
```

--------------------------------

### Deploy Website (SSH)

Source: https://github.com/nandorojo/solito/blob/master/docs/README.md

Deploys the website using SSH. Assumes SSH is configured for deployment.

```bash
USE_SSH=true yarn deploy
```

--------------------------------

### Create Solito App with Tailwind

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/tailwind.mdx

Use this command to create a new Solito app pre-configured with Tailwind CSS and NativeWind.

```sh
npx create-solito-app@latest my-solito-app -t with-tailwind
```

--------------------------------

### Link to Settings Screen using useRouter

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/guides/new-route.md

Shows how to programmatically navigate to the settings screen using the `useRouter` hook from `solito/router`.

```tsx
declare const Form: React.FC<{
  onSuccess: () => void
}> 

// ---cut---
import { useRouter } from 'solito/router'

export function LinkToSettings() {
  const router = useRouter()

  function linkToSettings() {
    router.push('/settings')
  }

  return <Form onSuccess={linkToSettings} />
}
```

--------------------------------

### usePathname

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/app-directory/hooks.md

Hook to get the current pathname, with 100% feature parity to Next.js's usePathname.

```APIDOC
## usePathname

### Description
Hook to get the current pathname, with 100% feature parity to Next.js's usePathname.

### Usage
```typescript
'use client'

import { usePathname } from 'solito/navigation'

export default function ExampleClientComponent() {
  const pathname = usePathname()

  // /dashboard?search=hi
  // pathname is /dashboard

  return <>Current pathname: {pathname}</>
}
```

### Note
This hook may not be perfectly safe to use on iOS / Android if you haven't gone all-in on using links to power navigation for React Navigation. If all screens have a linking config, then this should be safe. Expo Router users can use this hook safely.
```

--------------------------------

### Configure SolitoImageProvider with Custom Loader

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/image.mdx

Configure SolitoImageProvider with a custom loader function to define how images are processed and served, for example, using Cloudinary.

```tsx
<SolitoImageProvider
  nextJsURL="https://beatgig.com"
  loader={({ quality, width, src }) => {
    return `https://cloudinary.com/${src}?w=${width}&q=${quality}`
  }}>
  <App />
</SolitoImageProvider>
```

--------------------------------

### Deploy to Vercel

Source: https://github.com/nandorojo/solito/blob/master/example-monorepos/with-api/readme.md

Instantly clone and deploy the Solito monorepo to Vercel using this button. It pre-configures environment variables for Turborepo caching.

```bash
npx turbo run build --filter=next-app
```

--------------------------------

### Basic useRouter Usage

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/use-router.mdx

Destructure push, replace, back, and parseNextPath from useRouter. Use push for navigation and back for going to the previous screen.

```tsx
import { useRouter } from 'solito/router'
// ---cut---

const { push, replace, back, parseNextPath } = useRouter()

const onPress = () => {
  push('/')
}
const onGoBack = () => {
  back()
}
```

--------------------------------

### Initialize Firebase Auth for Native (React Native)

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/guides/auth.md

Initializes Firebase Auth for iOS and Android, re-exporting core functions. Ensure `@react-native-firebase/auth` is installed.

```typescript
import auth from '@react-native-firebase/auth'
import { Firebase } from './types'

const getIsSignedIn: Firebase['getIsSignedIn'] = () =>
  Boolean(auth().currentUser)

const signOut: Firebase['signOut'] = () => auth().signOut()

const signInAnonymously: Firebase['signInAnonymously'] = async () => {
  return (await auth().signInAnonymously()).user
}

const onAuthStateChanged: Firebase['onAuthStateChanged'] = (callback) => {
  return auth().onAuthStateChanged(callback)
}

const getCurrentUser: Firebase['getCurrentUser'] = () => auth().currentUser

export {
  getIsSignedIn,
  signOut,
  signInAnonymously,
  onAuthStateChanged,
  getCurrentUser,
}
```

--------------------------------

### Create Solito App with Expo Router

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/guides/expo-router.md

Use this command to generate a new Solito project pre-configured with Expo Router.

```bash
npx create-solito-app@latest -t with-expo-router
```

--------------------------------

### Next.js Page with Modal Context

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/recipes/use-is-focused.mdx

Wrap modal components with `ModalScreenContext.Provider` to indicate they are modals. This example shows how to conditionally render an `EditArtistModal` based on router query parameters.

```tsx
// pages/artist/[slug].tsx
import { ModalScreenContext } from 'context/modal-screen'
import { useRouter } from 'next/router'

export default function ArtistPage() {
  const router = useRouter()

  return (
    <>
      <ArtistScreen />

      <ModalScreenContext.Provider value={true}>
        {!!router?.query?.showsEditModal && <EditArtistModal />}
      </ModalScreenContext.Provider>
    </>
  )
}
```

--------------------------------

### useLink: Build Custom Accessible Links

Source: https://context7.com/nandorojo/solito/llms.txt

Use `useLink` to get `href`, `onPress`, and `accessibilityRole` for custom pressable link components. It ensures full web accessibility.

```tsx
import { useLink, UseLinkProps } from 'solito/link'
import { MotiPressable, MotiPressableProps } from 'moti/interactions'
import { Pressable } from 'react-native'

// Simple custom link using Pressable
const MyLink = ({ href, as, children }: UseLinkProps & { children: React.ReactNode }) => {
  const linkProps = useLink({ href, as })
  // linkProps = { href: string, onPress: fn, accessibilityRole: 'link' }
  return <Pressable {...linkProps}>{children}</Pressable>
}

// Advanced: MotiLink — animated link with press/hover states (Solito's built-in moti integration)
export type MotiLinkProps = UseLinkProps &
  Omit<MotiPressableProps, keyof UseLinkProps | keyof ReturnType<typeof useLink>>

export const MotiLink = (props: MotiLinkProps) => {
  const linkProps = useLink(props)
  return <MotiPressable {...props} {...linkProps} />
}

// Usage: animate scale on press/hover with full link accessibility on web
export const AnimatedArtistLink = () => (
  <MotiLink
    href="/artists/drake"
    as="/@drake"
    animate={({ hovered, pressed }) => {
      'worklet'
      return { scale: pressed ? 0.9 : hovered ? 1.05 : 1 }
    }}>
    <Text>Drake</Text>
  </MotiLink>
)
```

--------------------------------

### Import SolitoImage

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/image.mdx

Import the SolitoImage component from the 'solito/image' package. This is the initial step before using the component.

```tsx
import { SolitoImage } from 'solito/image'
```

--------------------------------

### Globally Configure Image Loader

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/image.mdx

Wrap your application with `SolitoImageProvider` to set a default loader for all `SolitoImage` components. This avoids repetitive configuration for each image.

```tsx
<SolitoImageProvider
  // all image children will default to this loader
  loader={({ quality, src, width }) => {
    const cloudinaryKey = `your-key`
    return `https://res.cloudinary.com/${cloudinaryKey}/image/upload/q_${quality},w_${width}/${src}`
  }}
>
  <App />
</SolitoImageProvider>
```

--------------------------------

### Deploy Website (No SSH)

Source: https://github.com/nandorojo/solito/blob/master/docs/README.md

Deploys the website without using SSH. Requires specifying the GitHub username.

```bash
GIT_USER=<Your GitHub username> yarn deploy
```

--------------------------------

### useRouter

Source: https://context7.com/nandorojo/solito/llms.txt

Provides navigation methods like `push`, `replace`, and `back`, similar to `solito/router`. Requires `'use client'` in Next.js.

```APIDOC
## useRouter

### Description
Provides navigation methods like `push`, `replace`, and `back`.

### Usage
```typescript
'use client'

import { useRouter } from 'solito/navigation'
import { Pressable, Text } from 'react-native'

export function NavButtons() {
  const router = useRouter()
  return (
    <>
      <Pressable onPress={() => router.push('/users/fernando')}>
        <Text>Open Profile</Text>
      </Pressable>
      <Pressable onPress={() => router.back()}>
        <Text>Back</Text>
      </Pressable>
    </>
  )
}
```
```

--------------------------------

### Render Artist Page as Modal in Next.js

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/recipes/modals.mdx

Use the `Modal` component from `react-native` and `visible` prop based on URL params to conditionally render a page as a modal. This example assumes `artistSlug` is a query parameter.

```tsx
// pages/search

import { createParam } from 'solito'
import { Modal } from 'react-native'
import dynamic from 'next/dynamic'
const ArtistPage = dynamic(() => import('../artist/[artistSlug]'))
import { SearchList } from 'app/features/search/list'

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

export default function SearchPage() {
  const [artistSlug] = useParam('artistSlug')

  return (
    <>
      <SearchList />
      {/** render the artist page as a modal **/
      <Modal visible={Boolean(artistSlug)}>
        <ArtistPage />
      </Modal>
    </>
  )
}
```

--------------------------------

### Scaffold Solito App

Source: https://context7.com/nandorojo/solito/llms.txt

Instantly scaffold a full starter monorepo for Solito. Use the `-t with-expo-router` flag to include Expo Router.

```sh
npx create-solito-app@latest
# with Expo Router:
npx create-solito-app@latest -t with-expo-router
```

--------------------------------

### Native Navigation Setup with React Navigation

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/guides/new-route.md

Integrate the new screen into your React Native application's navigation stack. This involves adding a new screen definition to your `NativeNavigation` component using `createNativeStackNavigator`.

```tsx
// @filename: ../../features/home/screen.tsx
export declare const HomeScreen: React.FC<{}>

// @filename: ../../features/user/detail-screen.tsx
export declare const UserDetailScreen: React.FC<{}>

// ---cut---
import { createNativeStackNavigator } from '@react-navigation/native-stack'

import { HomeScreen } from '../../features/home/screen'
import { UserDetailScreen } from '../../features/user/detail-screen'

const Stack = createNativeStackNavigator<{
  home: undefined
  'user-detail': {
    id: string
  }
}>()

export function NativeNavigation() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="home"
        component={HomeScreen}
        options={{
          title: 'Home',
        }}
      />
      <Stack.Screen
        name="user-detail"
        component={UserDetailScreen}
        options={{
          title: 'User',
        }}
      />
    </Stack.Navigator>
  )
}
```

--------------------------------

### Next.js Router Query Usage (Before Solito)

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/params.mdx

Illustrates how to access query parameters in Next.js using the `useRouter` hook, serving as a comparison point for Solito's approach.

```ts
import { useRouter } from 'next/router'

const useUsername = () => {
  const router = useRouter()
  const username = router?.query.username
  return username
}
```

--------------------------------

### Define Custom Text Component with NativeWind

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/tailwind.mdx

Example of creating a custom text component (P) using NativeWind's `styled` higher-order component. Base styles are applied directly, and `className` can be used for further customization.

```tsx
import { Text } from 'react-native'
import { styled } from 'nativewind'

export const P = styled(Text, 'text-base text-black my-4')
```

--------------------------------

### Navigate to Next.js App Directory

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/install.md

If you are in a monorepo, change your directory to the Next.js application folder.

```sh
cd apps/next
```

--------------------------------

### Web Entry Point for Settings Screen

Source: https://context7.com/nandorojo/solito/llms.txt

This Next.js page re-exports the shared `SettingsScreen` component, making it accessible via a web URL.

```tsx
// apps/next/pages/settings.tsx — web entry (re-export only)
export { SettingsScreen as default } from 'app/features/settings/screen'
```

--------------------------------

### Wrap App with SolitoImageProvider

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/image.mdx

Wrap your application with SolitoImageProvider and provide the nextJsURL prop to set the base URL for static assets.

```tsx
<SolitoImageProvider nextJsURL="https://beatgig.com">
  <App />
</SolitoImageProvider>
```

--------------------------------

### Import MotiLink

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/moti-link.mdx

Import the MotiLink component from the 'solito/moti' package.

```typescript
import { MotiLink } from 'solito/moti'
```

--------------------------------

### Import useRouter Hook

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/use-router.mdx

Import the useRouter hook from the 'solito/router' package.

```ts
import { useRouter } from 'solito/router'
```

--------------------------------

### Create Custom Hook for Multiple Parameters

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/params.mdx

Demonstrates creating a custom hook to manage multiple specific parameters for a screen, returning them as an object.

```tsx
import { createParam } from 'solito'

type UserScreenParams = { username: string; referredBy?: string }

const { useParam } = createParam<UserScreenParams>()

export const useUserScreenParams = () => {
  const [username] = useParam('username')
  const [referredBy] = useParam('referredBy')

  return {
    username,
    referredBy,
  }
}
```

--------------------------------

### App Router Root Layout Configuration

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/app-directory/overview.md

Set up the root layout in `/app/layout.tsx` to include necessary providers for Solito's App Router compatibility. Ensure it wraps children with `StylesProvider`.

```tsx
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>
  )
}
```

--------------------------------

### Create a Shared Settings Screen Component

Source: https://context7.com/nandorojo/solito/llms.txt

This component is written once and used across both web and native platforms. It utilizes `solito/router` for navigation and `createParam` for handling route parameters.

```tsx
// packages/app/features/settings/screen.tsx — shared component (web + native)
import { View, Text, StyleSheet } from 'react-native'
import { useRouter } from 'solito/router'
import { createParam } from 'solito'

type Params = { tab?: string }
const { useParam } = createParam<Params>()

export function SettingsScreen() {
  const { back } = useRouter()
  const [tab, setTab] = useParam('tab', { initial: 'profile' })

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Settings — {tab}</Text>
      <Text onPress={() => setTab('notifications')}>Notifications</Text>
      <Text onPress={back}>Back</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  title: { fontSize: 24, color: '#fff' },
})
```

--------------------------------

### push() Method

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/use-router.mdx

The push method navigates to a new route. It accepts a URL string or an object with pathname and query parameters.

```APIDOC
## push()

### Description
Navigates to a new screen. Follows the exact same API as `push` returned by [Next.js `useRouter` hook](https://nextjs.org/docs/api-reference/next/router#router-object).

### Usage
#### Basic example
```tsx
import { useRouter } from 'solito/router'

const { push } = useRouter()

const onOpenArtist = () => {
  push('/artists/drake')

  // or, you can do:
  push({
    pathname: '/artists/[slug]',
    query: {
      slug: 'drake',
    },
  })
}
```

#### Passing query parameters
Use the `query` object to pass any query parameters to the next screen.

```tsx
import { useRouter } from 'solito/router'

const { push } = useRouter()

const onOpenArtist = () => {
  push({
    pathname: '/artists/drake',
    query: {
      initialOfferAmount: 500000,
    },
  })
}
```

`solito` will automatically stringify this into a URL for you on Native, making it easy for React Navigation.
```

--------------------------------

### React Navigation Parameter Usage (Before Solito)

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/params.mdx

Shows the traditional way of accessing route parameters using `useRoute` from React Navigation, highlighting the need for abstraction.

```js
import { useRoute } from '@react-navigation/native'

const useUsername = () => {
  const route = useRoute()
  const username = route.params?.username
  return username
}
```

--------------------------------

### Initialize createParam Hook

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/params.mdx

Import and initialize the `createParam` hook from Solito. This sets up the necessary functions for parameter management.

```tsx
import { createParam } from 'solito'

const { useParam, useParams } = createParam()
```

--------------------------------

### Import TextLink Component

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/text-link.mdx

Import the TextLink component from the 'solito/link' package. This is the first step before using the component in your application.

```tsx
import { TextLink } from 'solito/link'
```

--------------------------------

### Configure React Navigation Stack for Native

Source: https://context7.com/nandorojo/solito/llms.txt

Sets up a native stack navigator for React Navigation, including screens for 'home' and 'settings'. The 'settings' screen is configured to accept a 'tab' parameter.

```tsx
// packages/app/navigation/native/index.tsx — React Navigation stack
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { HomeScreen } from '../../features/home/screen'
import { SettingsScreen } from '../../features/settings/screen'

const Stack = createNativeStackNavigator<{ 
  home: undefined
  settings: { tab?: string }
}>()

export function NativeNavigation() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="home" component={HomeScreen} options={{ title: 'Home' }} />
      <Stack.Screen name="settings" component={SettingsScreen} options={{ title: 'Settings' }} />
    </Stack.Navigator>
  )
}
```

--------------------------------

### Nested Modals on iOS (Correct Approach)

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/recipes/modals.mdx

Demonstrates the correct way to render multiple modals on iOS by nesting them. This ensures modals appear correctly when others are already open.

```tsx
// this will work 😎
const [isAuthModalOpen, setIsAuthModalOpen] = useState(false)

const openAuthModal = () => setIsAuthModalOpen(true)

return (
  <Modal visible>
    <Button onPress={viewAuthModal} title="Sign In" />

    <Modal visible={isAuthModalOpen}>
      <AuthFlow />
    </Modal>
  </Modal>
)
```

--------------------------------

### Define Native Stack Navigator

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/guides/new-route.md

Sets up a native stack navigator with screens for home, user detail, and settings. The screen names are crucial for linking.

```tsx
// @filename: ../../features/home/screen.tsx
export declare const HomeScreen: React.FC<{}>

// @filename: ../../features/user/detail-screen.tsx
export declare const UserDetailScreen: React.FC<{}>

// @filename: ../../features/settings/screen.tsx
export declare const SettingsScreen: React.FC<{}>

// ---cut---
import { createNativeStackNavigator } from '@react-navigation/native-stack'

import { HomeScreen } from '../../features/home/screen'
import { UserDetailScreen } from '../../features/user/detail-screen'
import { SettingsScreen } from '../../features/settings/screen'

const Stack = createNativeStackNavigator<{ 
  home: undefined
  'user-detail': {
    id: string
  }
  settings: undefined // this screen has no params
}>()

export function NativeNavigation() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="home"
        component={HomeScreen}
        options={{
          title: 'Home',
        }}
      />
      <Stack.Screen
        name="settings"
        component={SettingsScreen}
        options={{
          title: 'Settings',
        }}
      />
      <Stack.Screen
        name="user-detail"
        component={UserDetailScreen}
        options={{
          title: 'User',
        }}
      />
    </Stack.Navigator>
  )
}
```

--------------------------------

### Solito Navigation Hooks for App Router

Source: https://context7.com/nandorojo/solito/llms.txt

Import and use various navigation hooks like useRouter, useParams, useSearchParams, usePathname, useUpdateSearchParams, and useLink. Ensure 'use client' is present for Next.js.

```tsx
'use client'

import {
  useRouter,
  useParams,
  useSearchParams,
  usePathname,
  useUpdateSearchParams,
  useLink,
} from 'solito/navigation'
import { Pressable, Text } from 'react-native'

// useRouter — push, replace, back (same API as solito/router)
export function NavButtons() {
  const router = useRouter()
  return (
    <>
      <Pressable onPress={() => router.push('/users/fernando')}>
        <Text>Open Profile</Text>
      </Pressable>
      <Pressable onPress={() => router.back()}>
        <Text>Back</Text>
      </Pressable>
    </>
  )
}

// useParams — typed access to dynamic route segments
type ShopParams = { tag: string; item: string }

export function ShopItemDetail() {
  const params = useParams<ShopParams>()
  // Route: /shop/[tag]/[item] → URL: /shop/shoes/nike-air-max-97
  // params = { tag: 'shoes', item: 'nike-air-max-97' }
  return <Text>{params.tag} / {params.item}</Text>
}

// useSearchParams — read query string params
type SearchQuery = { search: string }

export function SearchBar() {
  const searchParams = useSearchParams<SearchQuery>()
  const query = searchParams.get('search') // '/dashboard?search=my-project' → 'my-project'
  return <Text>Searching: {query}</Text>
}

// usePathname — current path without query string
export function BreadCrumb() {
  const pathname = usePathname() // '/dashboard?foo=bar' → '/dashboard'
  return <Text>Current page: {pathname}</Text>
}

// useUpdateSearchParams — update query params (native: setParams, web: push/replace)
type FilterParams = { id: string; sort: string }

export function FilterControls() {
  const updateParams = useUpdateSearchParams<FilterParams>()
  return (
    <Pressable
      onPress={() => {
        updateParams({ id: '123', sort: 'desc' })
        // force push instead of replace:
        updateParams({ id: '456' }, { webBehavior: 'push' })
      }}
    >
      <Text>Apply Filter</Text>
    </Pressable>
  )
}

// useLink — low-level hook for custom accessible links
export function CustomNavItem({ href }: { href: string }) {
  const link = useLink({ href })
  // link = { href, onPress, accessibilityRole: 'link' }
  return <Pressable {...link}><Text>Navigate</Text></Pressable>
}

```

--------------------------------

### Push with Query Parameters

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/use-router.mdx

Pass query parameters to the next screen using the 'query' object within the Url object. Solito stringifies these for native navigation.

```tsx
import { useRouter } from 'solito/router'
// ---cut---

const { push } = useRouter()

const onOpenArtist = () => {
  push({
    pathname: '/artists/drake',
    query: {
      initialOfferAmount: 500000,
    },
  })
}
```

--------------------------------

### useRouter - Programmatic Navigation

Source: https://context7.com/nandorojo/solito/llms.txt

The `useRouter` hook from `solito/router` offers a unified navigation API. It seamlessly integrates with `next/router` on the web and React Navigation's dispatcher on native platforms, mirroring the Next.js router API.

```APIDOC
## useRouter

### Description
Provides a unified navigation API that calls `next/router` on Web and React Navigation's dispatcher on native. It mirrors the Next.js router API exactly.

### Usage
```tsx
import { useRouter } from 'solito/router'
import { Button } from 'react-native'

export function ArtistCard({ slug }: { slug: string }) {
  const { push, replace, back, parseNextPath } = useRouter()

  const openArtist = () => {
    // plain string
    push(`/artists/${slug}`)

    // or Next.js Url object — dynamic segments are interpolated automatically
    push({
      pathname: '/artists/[slug]',
      query: { slug, initialOfferAmount: 500_000 },
    })
    // navigates to: /artists/drake?initialOfferAmount=500000
  }

  const replaceWithStackAction = () => {
    replace('/home', undefined, {
      experimental: {
        nativeBehavior: 'stack-replace', // uses StackActions.replace() on native
        isNestedNavigator: true,          // required when stack is nested in tabs/drawer
      },
    })
  }

  // Convert a Url object to a stable string (useful as list keys)
  const href = parseNextPath({
    pathname: '/artists/[slug]',
    query: { slug: 'drake', tab: 'shows' },
  })
  // href === '/artists/drake?tab=shows'

  return (
    <>
      <Button title="Open Artist" onPress={openArtist} />
      <Button title="Go Back" onPress={back} />
    </>
  )
}
```

### Methods
- **push(href, as?, options?):** Navigates to a new screen.
- **replace(href, as?, options?):** Replaces the current screen with a new one.
- **back():** Navigates back to the previous screen.
- **parseNextPath(urlObject):** Converts a Next.js URL object to a stable string.

### Parameters
- **href** (string | object): The destination path or URL object.
- **as** (string, optional): An alias for the URL, used for pretty URLs.
- **options** (object, optional): Navigation options, including experimental features for native behavior.
  - **experimental.nativeBehavior** (string): Specifies native navigation behavior (e.g., 'stack-replace').
  - **experimental.isNestedNavigator** (boolean): Required when the stack is nested in tabs or drawers.
```

--------------------------------

### Solito useParam for React Navigation

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/params.mdx

Presents the Solito equivalent for accessing route parameters, demonstrating how `useParam` simplifies the process compared to React Navigation's `useRoute`.

```tsx
import { createParam } from 'solito'

const { useParam } = createParam()

export const useUsername = () => {
  const [username] = useParam('username')

  return username
}
```

--------------------------------

### Set Initial Value with useParam

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/params.mdx

Provide an initial value for a parameter using the `initial` option. This value is used on the first render if the parameter is not present in the URL and the setter hasn't been called.

```typescript
import { createParam } from 'solito'

type Query = {
  bookingId: string
  template: 'story' | 'square'
}

const { useParam } = createParam<Query>()
// ---

const [template, setTemplate] = useParam('template', {
  initial: 'story',
})
```

--------------------------------

### Import Link Component

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/link.mdx

Import the Link component from the 'solito/link' package.

```ts
import { Link } from 'solito/link'
```

--------------------------------

### useLink Hook Usage

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/use-link.mdx

Demonstrates the basic usage of the useLink hook to generate link properties.

```APIDOC
## useLink()

A low-level hook that lets you create your own accessible Link component.

### Usage

```tsx
const linkProps = useLink({
  href,
  as,
  shallow,
  replace,
})
```

### Arguments

- `href`: **required** The URL to link to. Either a `string` or `Url` object.
- `as`: The URL to link to. Either a `string` or `Url` object.
- `shallow`: `boolean`
- `replace`: `boolean`

See the Next.js [Link API](https://nextjs.org/docs/api-reference/next/link) for more details about these props.

### Returns

The hook returns the following values:

- `href`: `string`
- `onPress`: `function`
- `accessibiltyRole`: `string`

You should spread these values directly onto your component:

```twoslash
import { useLink, UseLinkProps } from 'solito/link'
import { Pressable } from 'react-native'
type Props = UseLinkProps & {
  children: React.ReactNode
}
// ---cut---

const MyLink = ({ href, as, ...props }: Props) => {
  const linkProps = useLink({
    href,
    as,
  })

  return <Pressable {...props} {...linkProps} />
}
```
```

--------------------------------

### Cross-Platform Linking with Link and TextLink

Source: https://context7.com/nandorojo/solito/llms.txt

Use `Link` from `solito/link` as a drop-in replacement for Next.js `<Link />`. On Web (Solito 5+), it re-exports `next/link`; on iOS/Android, it triggers React Navigation. `TextLink` renders Text nodes for inline links. Supports native-safe `style` props and experimental native behaviors like `stack-replace`.

```tsx
import { Link, TextLink } from 'solito/link'
import { View, Text } from 'react-native'

// Basic navigation link wrapping a View
export const HomeLink = () => (
  <Link href="/" style={{ padding: 8 }}>
    <View style={{ backgroundColor: 'blue', borderRadius: 4, padding: 12 }}>
      <Text style={{ color: 'white' }}>Home</Text>
    </View>
  </Link>
)

// Dynamic route with `as` for pretty URLs and shallow routing
export const ArtistLink = ({ slug }: { slug: string }) => (
  <Link href={`/artists/${slug}`} as={`/@${slug}`} shallow>
    <View />
  </Link>
)

// TextLink — renders Text nodes (inline text links)
export const SettingsLink = () => (
  <TextLink href="/settings" style={{ color: 'blue', fontWeight: 'bold' }}>
    Go to <Text style={{ textDecorationLine: 'underline' }}>Settings</Text>
  </TextLink>
)

// Stack-replace on native via Link prop
export const ReplaceLink = () => (
  <Link
    href="/dashboard"
    replace
    experimental={{ nativeBehavior: 'stack-replace', isNestedNavigator: true }}
  >
    <View />
  </Link>
)
```

--------------------------------

### Import useLink Hook

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/use-link.mdx

Import the useLink hook from either 'solito/link' for general use or 'solito/navigation' for App Directory projects.

```typescript
import { useLink } from 'solito/link'

# or, for App Directory:
import { useLink } from 'solito/navigation'
```

--------------------------------

### Custom Link with Dripsy 'as' Prop

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/usage/link.mdx

Utilize Dripsy's 'as' prop to forward it to a custom pressable component within a Link.

```tsx
import { Pressable, View } from 'dripsy'
import { Link } from 'solito/link'

// your button component
const Button = ({ as, children }: React.ComponentProps<typeof Pressable>) => (
  <Pressable as={as}>{children}</Pressable>
)

export const ButtonLink = () => (
  <Link href="/">
    <Button as={View} />
  </Link>
)
```

--------------------------------

### Create a Screen Component

Source: https://github.com/nandorojo/solito/blob/master/docs/docs/guides/new-route.md

Define a reusable screen component within the `packages/app` directory. This component can then be shared across both web and native platforms.

```tsx
import { View, StyleSheet, Text } from 'react-native'

export function SettingsScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Settings</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#111',
  },
  text: {
    color: '#fff',
  },
})
```