Guide to React Native Expo & Tamagui Setup

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 androidPress a to launch the Android emulator (ensure it’s running).

• For iOS:

npm run iosPress 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',
    ],
  }
}

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

#ReactNativeExpo #ReactNativeUIframework #Expoappdevelopment #Tamaguiintegration