Additional components for Tamagui

🔦 About

This repo is a mono-repo for npm @tamagui-extras/*. Additional components and functionalities extend the UI framework tamagui

📦 @tamagui-extras Storybook

Overview of all components build on top of tamagui Storybook Demo to see all components in action.

Requirement

Install peer dependencies

# yarn add tamagui @tamagui/themes solito

Follow the installation instructions of the tamagui framework.

Packages

@tamagui-extras organisation exports following packages:

• @tamagui-extras/core[link] - core components
• @tamagui-extras/form[link] - form components - based on react-hook-form
• @tamagui-extras/link - link components - based on solito
• @tamagui-extras/file[link] - file components - based on expo-document-picker
• @tamagui-extras/youtube[link] - youtube iframe component
• @tamagui-extras/video[link] - video components - based on expo-av
• @tamagui-extras/rich-text[link] - rich text editor web only: tiptap
• @tamagui-extras/date[link] - date picker and selections

Important NextJS config

Due to external dependencies@tamagui-extras/*utilizes 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.

Installation | Troubleshoot Expo

You have to manually add following dependencies for Expo native builds:

yarn add expo-linear-gradient

Datepicker @tamagui-extras/date

The Datepicker component uses @react-native-community/datetimepicker for native builds. You have to manually install the package in Expo

yarn add @react-native-community/datetimepicker

While writing this docs there has been issues reported with mismatching versioning so make sure to pin the right version in your root package.json

"resolutions": {
    "@react-native-community/datetimepicker": "7.2.0"
},

Adjusting the build

Add @tamagui-extras/* to the next.config.js or babel.config.js file to transpile the package.

{
  loader: 'tamagui-loader',
  options: {
    config: './tamagui.config.ts',
    components: [
      '@tamagui-extras/core',
      '@tamagui-extras/form',
      // add any other packages which uses Tamagui
      'tamagui'
    ]
  }
}

Good to know

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[ComponentName] to have an easy identifier which component belongs to this package.

Code example:

import {LmFormRhfProvider, LmInputRhf, LmSubmitButtonRhf} from "@tamagui-extras/form";
import {LmAlert} from "@tamagui-extras/core";
import console = require("console");

function MyForm() {
    return (
        <LmFormRhfProvider>
            <LmAlert severity={'info'}>Some important message</LmAlert>
            <LmInputRhf name={'name'} label="Name"/>
            <LmSubmitButtonRhf onSubmit={(data) => {
                console.log(data)
            }}>Submit</LmSubmitButtonRhf>
        </LmFormRhfProvider>
    )
}

Upgrade Guide >= 0.16

For better code split experience tamagui-extras is deprecated and @tamagui-extras organisation holds all projects.

Links

tamagui