One is a React framework for web, iOS, and Android, built on the power of Vite. It offers seamless cross-platform development capabilities and integrates well with Tamagui.
Install
First, create a new One project:
yarn dlx one
Add Tamagui and its dependencies:
yarn add tamagui @tamagui/config
Configuration
Create a tamagui.config.ts file in your project root:
tamagui.config.ts
import{ config }from'@tamagui/config/v3'
import{ createTamagui }from'tamagui'
const tamaguiConfig =createTamagui(config)
exportdefault tamaguiConfig
// this is important!
exporttypeConf=typeof tamaguiConfig
declaremodule'tamagui'{
interfaceTamaguiCustomConfigextendsConf{}
}
Update your vite.config.ts:
vite.config.ts
import{ one }from'one/vite'
import{ tamaguiPlugin }from'@tamagui/vite-plugin'
importtype{ UserConfig }from'vite'
exportdefault{
plugins:[
one({
web:{
defaultRenderMode:'ssg',
},
}),
tamaguiPlugin({
config:'./tamagui.config.ts',
components:['tamagui'],
}),
],
// Vite 6 style configuration
ssr:{
noExternal:true,
},
optimizeDeps:{
include:[
'@tamagui/core',
'@tamagui/config',
],
},
build:{
cssTarget:'safari15',
},
} satisfies UserConfig
Setup Tamagui Provider
Update your root layout file (typically app/_layout.tsx):
app/_layout.tsx
import{ TamaguiProvider }from'tamagui'
import{ Slot }from'one'
import config from'../tamagui.config'
exportdefaultfunctionLayout(){
return(
<TamaguiProviderconfig={config}>
<Slot/>
</TamaguiProvider>
)
}
Usage
Now you can use Tamagui components in your One app:
app/index.tsx
import{ Button, Text, YStack }from'tamagui'
exportdefaultfunctionHome(){
return(
<YStackf={1}jc="center"ai="center"p="$4"space>
<TextfontSize="$6">Welcome to Tamagui with One!</Text>
<Button>Click me</Button>
</YStack>
)
}
Themes
To support light and dark modes, you can use One's built-in color scheme support along with Tamagui's theming system. Update your root layout:
You now have Tamagui set up with One ! You can start building your cross-platform app using Tamagui's powerful styling system and One's seamless development experience.