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

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.

Fully functional Demo to see all components in action.

Install peer dependencies

# yarn add tamagui @tamagui/config-base tamagui-phosphor-icons

Follow the installation instructions of the tamagui framework.

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

Currently following components must be transpiled as you can see in the NextJS app.

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.

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

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.

import {LmFormRhfProvider, LmInputRhf, LmSliderRhf, LmSubmitButtonRhf} from "tamagui-extras";
import {YStack} from 'tamagui'

function MyForm() {
    const [mutate, {isLoading}] = useMutation()
    return (
        <LmFormRhfProvider>
            <YStack space>
                <LmInputRhf name={'name'} label="Name"/>
                <LmSliderRhf name={'slider'} label="Slider"/>
                <LmSubmitButtonRhf
                    onSubmit={(formData) => {
                        mutate(formData)
                    }}
                    loading={isLoading}
                >Submit
                </LmSubmitButtonRhf>
            </YStack>
        </LmFormRhfProvider>
    )
}

tamagui