React Native Expo with Tamagui Integration for Web & Mobile Apps

React Native Expo allows you to build web and mobile applications using a single codebase. By tamagui integration, a powerful React native UI framework, you can create shared components that work seamlessly across both React native web and mobile. Tamagui ensures consistent styling, and optimized performance, and simplifies cross-platform app development by reducing the need for maintaining separate designs for React native web and mobile apps.

Let’s dive into how to create an app with React Native Expo and Tamagui integration.

Step 1: Create a New Expo App

Run the following command to create a new React Native Expo app with a TypeScript template: npx create-expo-app -t expo-template-blank-typescript

Step 2: Navigate to the Project Directory and Test the App

1. Move into the project directory:

cd projectDir

2. Start the app and test it on the emulator:

• For Android:

npm run android
Press a to launch the Android emulator (ensure it’s running).

• For iOS:

npm run ios
Press I to launch the iOS simulator (ensure it’s running).

3. If the app is running fine, you should see this default Expo app screen in your emulator/simulator.

Step 3: Install Web Packages and Run the Web Application

1. Install required web packages:

npx expo install react-dom react-native-web @expo/metro-runtime

2. Run the web application:

npm run web

3. If successful, you should see the default Expo app screen in your browser.

Step 4: Install and Configure Babel

1. Install the Tamagui Babel plugin:

npm install @tamagui/babel-plugin

2. Create a new file named babel.config.js and add the following configuration:

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        '@tamagui/babel-plugin',
        {
          components: ['tamagui'],
          config: './tamagui.config.ts',
          logTimings: true,
          disableExtraction: process.env.NODE_ENV === 'development',
        },
      ],

      // NOTE: this is only necessary if you are using reanimated for animations
      'react-native-reanimated/plugin',
    ],
  }
}Code language: JavaScript (javascript)

Step 5: Configure the Tamagui UI Library

1. Install required packages:

npm install @tamagui/config tamagui

2. Create a new configuration file named tamagui.config.ts and add the following content:

import { config } from '@tamagui/config/v3'
import { createTamagui } from 'tamagui'

export const tamaguiConfig = createTamagui(config)

export default tamaguiConfig

export type Conf = typeof tamaguiConfig

declare module 'tamagui' {
  interface TamaguiCustomConfig extends Conf {}
}Code language: JavaScript (javascript)

3. You can customize the theme to match your project’s styles. Here is a detailed tutorial: https://tamagui.dev/docs/intro/themes

Read More : https://mobisoftinfotech.com/resources/blog/react-native-expo-tamagui-integration-guide