DEV Community

amanbhoria
amanbhoria

Posted on • Edited on

Step up your UI Game with Tamagui

Image description

Add the babel plugin

npm install @tamagui/babel-plugin

Add the plugin in metro.config.js file

Image description

Add @tamagui/config/v3 and tamagui to your package.json and install them. Then add a tamagui.config.ts:

Image description

Then update app/_layout.tsx:

Image description

Note: Don't need to import '../tamagui-web.css'

At last, install the expo-fonts as @tamagui uses expo fonts in the background. So you've to install them

Import the useFonts hook and load the fonts:

Image description

Note: Add this at the starting point of your application for e.g - App.tsx etc.

Now you're good to go. Keep building!

Sentry mobile image

App store rankings love fast apps - mobile vitals can help you get there

Slow startup times, UI hangs, and frozen frames frustrate users—but they’re also fixable. Mobile Vitals help you measure and understand these performance issues so you can optimize your app’s speed and responsiveness. Learn how to use them to reduce friction and improve user experience.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay