Building Cross-Platform Web & Mobile Apps with React Native Expo and Tamagui

1. 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:

2. 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:

3. 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', }, ],

4. // 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' exportconst tamaguiConfig = createTamagui(config) exportdefault 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 Step 6: Update App.tsx to Use TamaguiProvider

5. A Tamagui integration into your app, wrap your components with TamaguiProvider. 1. Update your App.tsx file: import { StatusBar } from'expo-status-bar'; import { StyleSheet, Text, View } from'react-native'; import { Button, TamaguiProvider, Theme } from'tamagui'; import tamaguiConfig from'./tamagui.config'; exportdefaultfunctionApp() { return ( <TamaguiProvider config={tamaguiConfig} defaultTheme="light"> <Theme name="light"> <Theme name="blue"> <View style={styles.container}> <Button>Button</Button> {/* Tamagui button */} <Text>Open up App.tsx to start working on your app!</Text> <StatusBar style="auto" /> </View> </Theme> </Theme> </TamaguiProvider> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); Code language: JavaScript (javascript) Step 7: Run and Verify Tamagui Configuration 1. Start the application: npm run start 2. Test on the desired platform: Press a for Android.

6. Press w for Web. 3. Check if Tamagui is configured correctly by adding some components and observing their appearance on both platforms. To showcase Tamagui’s capabilities, we have integrated some example components into the project. You can find the complete codebase and examples on our GitHub repository: https://github.com/mobisoftinfotech/tamagui-react-web-native-tutotial Here Are the Components We’ve Integrated Into the Project for Demonstration: 1. Horizontal Stack View The XStack component allows you to arrange inner components horizontally without the need to manually set the flexDirection property to a row for each wrapper component. Example – <XStack gap="$2"> <View width={40} height={100} /> <View width={40} height={100} /> <View width={40} height={100} /> </XStack>

7. Code language: HTML, XML (xml) In this example, each View component is aligned horizontally with a gap defined by the $2 variable. 2. Vertical Stack View The YStack component arranges inner components vertically, eliminating the need to set flexDirection to column for wrapper components. Example: <YStack gap="$2"> <View width={100} height={20} /> <View width={100} height={20} /> <View width={100} height={20} /> </YStack> Code language: HTML, XML (xml) Here, each View component is stacked vertically with consistent spacing defined by the $2 variable. 3. Button Tamagui provides a Button component with customizable variants such as active, outlined, and more. You can also include icons and manage states like disabled. Examples: <Button theme="active">Active</Button> <Button variant="outlined" />Outlined</Button> <Button iconAfter={Activity}>Large with Icon</Button> Code language: HTML, XML (xml) The theme and variant props control the button’s appearance. Icons can be added using the iconAfter or iconBefore props. 4. Input

8. The Input component allows the creation of various types of text inputs. The TextArea component is also available for multi-line inputs. Input Example: <Input size="$3" placeholder="Size small" /> Code language: HTML, XML (xml) TextArea Example: <TextArea placeholder="Enter your details..." /> Both components support placeholder text and can be customized with size and styling props. Future-Proof Your Product Strategy with Cross-Platform Efficiency Read More: https://mobisoftinfotech.com/resources/blog/react-native-expo-tamagui-integrati on-guide