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

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

Install peer dependencies

# yarn add tamagui @tamagui/themes solito

Follow the installation instructions of the tamagui framework.

@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

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.

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

yarn add expo-linear-gradient

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"
},

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'
    ]
  }
}

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[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>
    )
}

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

tamagui