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!