Building a Cross-Platform Mobile App with React Native and Expo

Introduction

Building a cross-platform mobile app that works seamlessly on both iOS and Android can be a daunting task, but React Native and Expo simplify this process significantly. React Native, a framework developed by Facebook, allows developers to write mobile applications using JavaScript and React, while Expo provides a powerful set of tools and services to streamline development, testing, and deployment.

In this guide, we’ll walk through the key steps of building a cross-platform app with React Native and Expo, covering project setup, core development concepts, and deployment strategies. Whether you're a solo developer or part of a team, this approach ensures faster iteration and a consistent user experience across platforms.

Setting Up Your React Native and Expo Project

Before diving into development, you’ll need to set up your environment. Expo simplifies this process by abstracting away much of the native toolchain.

Prerequisites

Node.js (v14 or later)
npm or yarn
Expo CLI (install globally via npm install -g expo-cli)

Creating a New Project

Run the following command to generate a new Expo project:

expo init MyCrossPlatformApp

You’ll be prompted to choose a template. For most projects, the blank (TypeScript) or minimal template is a good starting point.

Running the App

Navigate into your project folder and start the development server:

cd MyCrossPlatformApp  
expo start

This launches the Expo DevTools in your browser, allowing you to run the app on an emulator, physical device (via the Expo Go app), or in a web browser.

Core Development Concepts

Building UI with React Native Components

React Native provides a rich set of cross-platform components that map to native UI elements. Here’s an example of a simple screen with a button and text:

import React from 'react';  
import { View, Text, Button, StyleSheet } from 'react-native';  

const App = () => {  
  return (  
    <View style={styles.container}>  
      <Text style={styles.title}>Welcome to My App!</Text>  
      <Button  
        title="Press Me"  
        onPress={() => alert('Button pressed!')}  
      />  
    </View>  
  );  
};  

const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
    justifyContent: 'center',  
    alignItems: 'center',  
  },  
  title: {  
    fontSize: 20,  
    fontWeight: 'bold',  
    marginBottom: 20,  
  },  
});  

export default App;

Handling Platform-Specific Code

While React Native promotes code reuse, sometimes you need platform-specific adjustments. You can use the Platform module:

import { Platform, StyleSheet } from 'react-native';  

const styles = StyleSheet.create({  
  header: {  
    paddingTop: Platform.OS === 'ios' ? 50 : 30,  
  },  
});

Alternatively, create separate files like Component.ios.js and Component.android.js, and React Native will automatically load the correct one.

Extending Functionality with Expo Modules

Expo provides a suite of modules for common mobile features (camera, geolocation, notifications, etc.) without requiring native code.

Example: Using the Camera Module

First, install the module:

expo install expo-camera

Then, implement a basic camera screen:

import React, { useState, useEffect } from 'react';  
import { Text, View, TouchableOpacity } from 'react-native';  
import { Camera } from 'expo-camera';  

const CameraScreen = () => {  
  const [hasPermission, setHasPermission] = useState(null);  
  const [cameraRef, setCameraRef] = useState(null);  

  useEffect(() => {  
    (async () => {  
      const { status } = await Camera.requestPermissionsAsync();  
      setHasPermission(status === 'granted');  
    })();  
  }, []);  

  if (hasPermission === null) {  
    return <View />;  
  }  
  if (hasPermission === false) {  
    return <Text>No access to camera</Text>;  
  }  

  return (  
    <View style={{ flex: 1 }}>  
      <Camera  
        style={{ flex: 1 }}  
        ref={ref => setCameraRef(ref)}  
      />  
      <TouchableOpacity  
        style={{ alignSelf: 'center', margin: 20 }}  
        onPress={async () => {  
          if (cameraRef) {  
            let photo = await cameraRef.takePictureAsync();  
            console.log(photo);  
          }  
        }}  
      >  
        <Text>Take Photo</Text>  
      </TouchableOpacity>  
    </View>  
  );  
};  

export default CameraScreen;

Deploying Your App

Building for Production

Expo makes it easy to generate production-ready builds for both platforms:

expo build:android  
expo build:ios

These commands generate standalone app binaries that can be uploaded to the Google Play Store or Apple App Store.

Over-the-Air Updates (OTA)

Expo supports OTA updates, allowing you to push bug fixes and minor updates without requiring users to download a new version from the app store. Configure this in app.json:

{  
  "expo": {  
    "runtimeVersion": {  
      "policy": "sdkVersion"  
    }  
  }  
}

Then publish updates with:

expo publish

Conclusion

React Native and Expo provide a powerful combination for building cross-platform mobile apps efficiently. By leveraging Expo’s tooling, you can focus on writing JavaScript while still delivering native-like performance. Whether you're prototyping or building a full-fledged app, this approach reduces complexity and accelerates development.

To dive deeper, explore Expo’s documentation (expo.dev) and the React Native ecosystem. Happy coding!

"Building a Cross-Platform Mobile App with React Native and Expo"