A simple tutorial to get to know Solito/ can't add or edit a new screen.

[omar-shahid]

Hi all,
First of all, I really appreciate the effort the founder of Solito and the community is doing for creating a future-proof React Native + Next JS stack.

The problem I'm having is I don't know how to add a new screen or edit an existing screen correctly. What exactly solito/link component look for in the file name, URL, or in the navigator to create React Navigation's version of that route? Working with Next JS is easy, as the routes are defined on the Next JS project.

I tried to change the name of user/detail-screen.tsx to user/screen.tsx, like home/screen.tsx in the mono repo, but Solito still looks for user-detail. I looked for URL and React Navigation's setup, but there is no user-detail anywhere. I don't know where Solito pulls out the name. The folder structure is also a bit confusing to me as I don't know what is allowed and what isn't.

I tried to look out for documentation and it doesn't seem to have a section like "Create a new Route" or a simple tutorial to make something (a simple to-do list for example) out of Solito.

Here's the code:

• packages/app/navigation/native:

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

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

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

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

• packages/app/features/user/screen.tsx

import { View, Text } from 'dripsy'
import { createParam } from 'solito'
import { TextLink } from 'solito/link'

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

export function UserDetailScreen() {
  const [id] = useParam('id')

  return (
    <View sx={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text
        sx={{ textAlign: 'center', mb: 16, fontWeight: 'bold' }}
      >{`User ID: ${id}`}</Text>

      <TextLink href="/">👈 Go Home</TextLink>
    </View>
  )
}

• packages/app/featues/home/screen.tsx

import { Text, useSx, View, H1, P, Row, A } from 'dripsy'
import { TextLink } from 'solito/link'
import { MotiLink } from 'solito/moti'

export function HomeScreen() {
  const sx = useSx()

  return (
    <View
      sx={{ flex: 1, justifyContent: 'center', alignItems: 'center', p: 16 }}
    >
      <H1 sx={{ fontWeight: '800' }}>Welcome to Solito.</H1>
      <View sx={{ maxWidth: 600 }}>
        <P sx={{ textAlign: 'center' }}>
          Here is a basic starter to show you how you can navigate from one
          screen to another. This screen uses the same code on Next.js and React
          Native.
        </P>
        <P sx={{ textAlign: 'center' }}>
          Solito is made by{' '}
          <A
            href="https://twitter.com/fernandotherojo"
            // @ts-expect-error react-native-web only types
            hrefAttrs={{
              target: '_blank',
              rel: 'noreferrer',
            }}
            sx={{ color: 'blue' }}
          >
            Fernando Rojo
          </A>
          .
        </P>
      </View>
      <View sx={{ height: 32 }} />
      <Row>
        <TextLink
          href="/user/fernando"
          textProps={{
            style: sx({ fontSize: 16, fontWeight: 'bold', color: 'blue' }),
          }}
        >
          Regular Link
        </TextLink>
        <View sx={{ width: 32 }} />
        <MotiLink
          href="/user/fernando"
          animate={({ hovered, pressed }) => {
            'worklet'

            return {
              scale: pressed ? 0.95 : hovered ? 1.1 : 1,
              rotateZ: pressed ? '0deg' : hovered ? '-3deg' : '0deg',
            }
          }}
          transition={{
            type: 'timing',
            duration: 150,
          }}
        >
          <Text
            selectable={false}
            sx={{ fontSize: 16, color: 'black', fontWeight: 'bold' }}
          >
            Moti Link
          </Text>
        </MotiLink>
      </Row>
    </View>
  )
}

I'd really appreciate it if there is some resource for beginners to make a simple project using Solito, the only resource I found is getting started with Solito and NativeBase (https://docs.nativebase.io/solito) but it is also an example mono repo and not exactly a tutorial.

Thanks again for helping me out!

[omar-shahid]

I'd really appreciate it if there is a tutorial that goes through some of the main concepts like nested react-navigation routing (Stack -> Tabs), and how that would change into Next JS. In short some of the things which show the potential Solito has and where it shines

[nandorojo]

all fair points! video tutorials are a lot of work but i’d love if someone could make one. once you make a screen once, you’ll find it to be really easy. i’ll do my best to do this if i have time at some point

[omar-shahid]

Agreed! It would be better create a new discussion for creating tutorials or move this to discussions as I've figured out to add new screens.

[totti-rdz]

@theJsTsGuy DId you already figured it out? I think you have to change user-detail in packages/app/provider/navigation/index.tsx

[SueHeir]

So in no way am I qualified to be posting tutorials, I'm very new at React, let alone React Native, or even Solito. But if anyone spent way too long trying to figure this out as I did (got stuck trying to get Nextjs part to work), hopefully this helps.

Add a screen under packages/app/features

import { Text, View } from 'dripsy'
import React from 'react'

export function PostScreen() {
  return (
    <View
      sx={{ flex: 1, justifyContent: 'center', alignItems: 'center', p: 16 }}
    >
      <Text>Post</Text>
    </View>
  )
}

Setup react native side

Edit packages/app/navigation/native/index.tsx to include the following entry in const Stack, and the following component in <Stack.navigator>

import { PostScreen } from 'app/features/post/screen'

const Stack = createNativeStackNavigator<{
  Home: undefined,
  Post: undefined
}>()


<Stack.Screen
    name={postName}
    component={PostScreen}
    options={{
      title: 'Test',
    }}
  />

Edit packages/app/provider/navigation/index.tsx to include an entry in the screens:

Note: Post is the name of the screen (i think), and I don't know what 'post' is but I am guessing it has something to do with the "url" that is stored.

<NavigationContainer
      linking={useMemo(
        () => ({
          prefixes: [Linking.createURL('/')],
          config: {
            initialRouteName: 'Home',
            screens: {
              Home: '',
              Post: 'post',
            },
          },
        }),
        []
      )}
    >

Setup next js side

inside apps/next/pages add a file named Post.tsx

import { PostScreen } from 'app/features/post/screen'

export default PostScreen

[nandorojo]

thanks for sharing! that’s exactly right. sorry for the issue you faced early, but welcome to the React (Native) + Solito ecosystem!

[nandorojo]

one thing that’s wrong is your linking: it should be like this:

Post: ‘post’

the left side is the screen name. the right side is the path in the URL that matches (like domain.com/post)

[nandorojo]

i’ll mark this as the answer once that’s fixed :)

[SueHeir]

should be good now, thanks for the quick responses!