Building Cross-Platform Android & iOS Apps with React Native and Expo

Introduction:

Developing for multiple platforms can be challenging due to platform-specific differences, but our expertise in React Native allows us to create cross-platform apps with a single codebase. This article explores how Hike Branding sets up, develops, and deploys Android and iOS apps using React Native and Expo.

Why Choose React Native and Expo?

Benefits of React Native:

• Cross-Platform Compatibility: Write once, run on both Android and iOS.
• Faster Development: Leverage hot reloading to see changes instantly.
• Large Community: Supported by Facebook and a vast developer ecosystem.

Benefits of Expo:

• No Native Code Required: Build and test apps without configuring Xcode or Android Studio.
• Built-in APIs: Provides access to device features like camera, push notifications, and more.
• Over-the-Air (OTA) Updates: Deploy updates without waiting for app store approval.
• Easy Deployment: Publish apps quickly using expo publish.

Setting Up Your Development Environment

Prerequisites:

• Install Node.js (LTS version recommended)
• Install Expo CLI:
• npm install -g expo-cli
• Install a code editor (VS Code recommended)
• Download the Expo Go app (Android & iOS) to preview your app on a physical device

Creating a New Expo Project:
Run the following command to initialize a new project:

• expo init MyCrossPlatformApp
• Choose a template (e.g., blank for a simple project).
• Navigate to your project folder:
• cd MyCrossPlatformApp
• Start the development server:
• expo start
• Scan the QR code using Expo Go on your device to preview your app.

Building the Core Features

1. Creating a Simple UI
   Modify App.js to define a basic UI:

   import React from ‘react’;

   import { View, Text, StyleSheet } from ‘react-native’;

   export default function App() {

   return (

   Hello, React Native with Expo!

   );

   }

   const styles = StyleSheet.create({

   container: {

   flex: 1,

   justifyContent: ‘center’,

   alignItems: ‘center’,

   backgroundColor: ‘#f0f0f0’,

   },

   title: {

   fontSize: 24,

   fontWeight: ‘bold’,

   },

   });

2. Adding Navigation
   Install React Navigation:

   npm install @react-navigation/native

   npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

   Set up navigation:

   import { NavigationContainer } from ‘@react-navigation/native’;

   import { createStackNavigator } from ‘@react-navigation/stack’;
   const Stack = createStackNavigator();

   function HomeScreen() {

   return (

   Home Screen

   );

   }
   export default function App() {

   return (

   );
   }

Testing Your App on Android & iOS

Running on an Android Emulator:

• Install Android Studio and set up an emulator.
• Start the emulator and run:
• expo start
• Press ‘a‘ in the terminal to launch the Android emulator.

Running on an iOS Simulator (Mac Only):

• Install Xcode and open the iOS simulator.
• Run:
• expo start
• Press ‘i’ in the terminal to launch the iOS simulator.

Building and Deploying Your App

1. Build for Android & iOS
   To create production-ready builds:
   • expo build:android
   • expo build:ios

   Expo will generate APK (for Android) and IPA (for iOS) files for distribution.

2. Deploying to App Stores
   Android:
   1. Sign up for a Google Play Developer account.
   2. Upload the APK file to the Play Console.
   3. Follow the submission process and publish your app.

   iOS:

   1. Sign up for an Apple Developer account.
   2. Use Expo’s managed workflow (eas build -p ios) for building iOS apps.
   3. Submit the app to the App Store Connect.

Conclusion:

React Native and Expo offer an efficient way to develop cross-platform Android and iOS apps using a single codebase. With Expo’s managed workflow, Hike Branding streamlines development, testing, and deployment, eliminating the need for complex native configurations. Whether you’re starting fresh or looking to optimize your mobile development process, Expo enhances productivity and accelerates time to market.

Looking to build your next mobile app? Hike Branding is here to help—let’s bring your idea to life with React Native and Expo!