Tamagui + Solito + Next + Expo Kitchen-Sink

This repo is a mono-repo where tamagui-extras will be developed to add missing components and functionalities into the UI framework tamagui

🔦 About

This monorepo is a kitchen sink for an Expo + Next.js + Tamagui + Solito + Storybook app.

Many thanks to @FernandoTheRojo for the Solito starter monorepo which this was forked from. Check out his talk about using expo + next together at Next.js Conf 2021.

📦 tamagui-extras

Fully functional Demo to see all components in action.

Installation

# yarn install tamagui tamagui-extras

Follow the installation instructions of the tamagui framework.

Important NextJS config

Due to external dependenciestamagui-extrasutilizes some components which needs to be transpiled before you are able to start.

Currently following components must be transpiled (see example):

1require('next-transpile-modules')(
2    [
3        'solito',
4        'react-native-web',
5        'expo-linking',
6        'expo-constants',
7        'expo-modules-core',
8        'expo-document-picker',
9        'expo-asset',
10        'expo-av',
11        '@my/config',
12        'tamagui-extras'
13    ]
14)

Everytime you face the situation that an error message appears similar to SyntaxError: Cannot use import statement outside a module you might use an node module which is not transpiled for web.

Components

All components are prefixed with Lm to have an easy identifier which component belongs to this package.

Integration of react-hook-form

Form components have a trailing Rhf component name for an easy integration with react-hook-form library.

Wrap any form component with LmFormRhfProvider and add a LmSubmitButtonRhf to validate and receive all form values.

1import {LmFormRhfProvider, LmInputRhf, LmSliderRhf, LmSubmitButtonRhf} from "tamagui-extras";
2import {YStack} from 'tamagui'
3
4function MyForm() {
5    const [mutate, {isLoading}] = useMutation()
6    return (
7        <LmFormRhfProvider>
8            <YStack space>
9                <LmInputRhf name={'name'} label="Name"/>
10                <LmSliderRhf name={'slider'} label="Slider"/>
11                <LmSubmitButtonRhf
12                    onSubmit={(formData) => {
13                        mutate(formData)
14                    }}
15                    loading={isLoading}
16                >Submit
17                </LmSubmitButtonRhf>
18            </YStack>
19        </LmFormRhfProvider>
20    )
21}

Links

tamagui