Andrio Effendi

Tamagui is an innovative UI kit designed to streamline the process of creating beautiful and performant user interfaces for both React Native and web applications. In this post, we'll dive into its features, why it's gaining popularity, and how to use it in your projects.

Tamagui Logo

Key Features of Tamagui

Cross-Platform Consistency Tamagui allows you to build apps with a single codebase that looks and feels great on both mobile and web platforms.
Theming and Design Tokens With built-in support for theming and design tokens, Tamagui makes it easy to maintain a consistent look and feel across your application.
Performance Optimizations Tamagui's components are optimized for performance, ensuring your apps remain fast and responsive even under heavy usage.
Customizable Components Every component is fully customizable, allowing you to tailor your UI to your specific needs without compromising on design quality.
First-Class Developer Experience Tamagui's intuitive APIs and extensive documentation make it a joy to work with, even for developers new to the framework.

Getting Started with Tamagui

Installation

To start using Tamagui, you need to install it in your project. If you’re using a React Native or Expo project, follow these steps:

Install Tamagui and its dependencies:
```
npm install tamagui react-native-svg
```

Set up the Tamagui configuration by creating a tamagui.config.ts file:

import { createTamagui } from 'tamagui';
 
export const config = createTamagui({
  themes: {
    light: {
      background: '#ffffff',
      color: '#000000',
    },
    dark: {
      background: '#000000',
      color: '#ffffff',
    },
  },
  tokens: {
    size: {
      small: 12,
      medium: 16,
      large: 24,
    },
  },
  components: {},
});
 
export type AppConfig = typeof config;

Wrap your application with the TamaguiProvider:

import { TamaguiProvider } from 'tamagui';
import { config } from './tamagui.config';
 
export default function App({ children }) {
  return <TamaguiProvider config={config}>{children}</TamaguiProvider>;
}

Building Your First UI

Let’s create a simple UI using Tamagui’s components. Start with a button and some layout components:

import { Button, Stack, Text } from 'tamagui';
 
export default function HomeScreen() {
  return (
    <Stack flex={1} justifyContent="center" alignItems="center" padding={16}>
      <Text theme="dark" fontSize={20} marginBottom={20}>
        Welcome to Tamagui!
      </Text>
      <Button theme="blue" size="large" onPress={() => alert('Button Pressed!')}>
        Click Me
      </Button>
    </Stack>
  );
}

Adding Theming

Tamagui makes it easy to switch between light and dark themes. Update the TamaguiProvider to enable theming:

import { TamaguiProvider, useTheme } from 'tamagui';
import { config } from './tamagui.config';
 
export default function App({ children }) {
  const theme = useTheme();
 
  return (
    <TamaguiProvider config={config} theme={theme}>
      {children}
    </TamaguiProvider>
  );
}

Adding Animations

Tamagui supports animations out of the box. Let’s add a simple animation to a box:

import { Stack, useAnimation } from 'tamagui';
 
export default function AnimatedBox() {
  const animation = useAnimation({
    opacity: [0, 1],
    translateY: [-10, 0],
  });
 
  return (
    <Stack
      animation={animation}
      width={100}
      height={100}
      backgroundColor="blue"
      borderRadius={16}
    />
  );
}

Why Choose Tamagui?

If you're looking for a tool that combines design flexibility, performance, and ease of use, Tamagui is a strong contender. Whether you're building a simple app or a complex project, Tamagui has the tools to help you succeed.

Conclusion

Tamagui is redefining what's possible with UI development in React Native. Its unique features and developer-centric design make it a must-try for anyone looking to enhance their app development workflow.

Ready to explore Tamagui? Check out the official documentation and start building your next project today!

Exploring Tamagui: The Ultimate UI Kit for React Native