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):
require('next-transpile-modules')(
[
'solito',
'react-native-web',
'expo-linking',
'expo-constants',
'expo-modules-core',
'expo-document-picker',
'expo-asset',
'expo-av',
'@my/config',
'tamagui-extras'
]
)
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.
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>
)
}
Links
tamagui
