How to Create iOS and Android Apps Using React Native and Expo

In today’s digital world, creating mobile apps is a valuable skill. Whether you’re just starting or have some experience in development, this guide will help you create iOS and Android apps using React Native and Expo. We’ll take you step-by-step, from setting up your tools to launching your app. Let’s dive in!

Step 1: Setting Up Your Development Environment

1.1 Install Node.js and npm

Node.js is a JavaScript runtime that allows you to run JavaScript on your computer, and npm (Node Package Manager) helps you manage the packages (libraries) your project needs.

• Download Node.js: Go to the official Node.js website and download the latest LTS (Long Term Support) version for your operating system (Windows, macOS, or Linux).
• Install Node.js: There is need to follow the installation instructions provided on the website, then this will also install npm automatically.

1.2 Install Expo CLI

Expo CLI is a tool that simplifies creating and managing React Native projects.

Open Your Terminal:

• Windows: Use Command Prompt or PowerShell.
• macOS/Linux: Use the Terminal app.

Install Expo CLI Globally

npm install -g expo-cli

This command installs Expo CLI, so you can use it anywhere on your computer.

1.3 Create a New Expo Project
Now, let’s create your first project.
Run the Following Command:

expo init MyFirstApp

MyFirstApp is the name of your project. You can choose any different name.

Choose a Template: 
After running the command, Expo will ask you to choose a template. For beginners, select the “blank” template by pressing Enter.

Navigate to Your Project Directory:

cd MyFirstApp

This command moves you into the newly created project folder.

Step 2: Building Your First Screen

With your project set up, it’s time to create your first screen that users will see.

2.1 Open Your Project in a Code Editor
You’ll need a code editor to write and edit your code. The Visual Studio Code or VS Code is a popular choice or you could go with IntelliJ.
Download VS Code: If you don’t have it yet, install it from the official website or the open source binaries @ VSCodium
Open Your Project:

• Open VS Code.
• Click on File> Open Folder and select your project folder (MyFirstApp)

2.2 Edit App.js
App.js is the main File where your app starts. Let’s modify it to display a simple message.

• Find and Open App.js: In the VS Code sidebar, locate and click on App.js to open it.
• Replace the Existing Code: Delete all the code inside App.js and replace it with the following:
  

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
}

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

Explanation:

• Import Statements: These bring in the necessary modules from React and React Native.
• App Function: This is the main component of your app. It returns a View containing a Text element that says “Hello, World!”
• Stylesheet: This defines how your components look. The container centers the text vertically and horizontally, with a font size of 20.

2.3 Run Your App

Now, let’s see your app in action.

Start the Development Server:

expo start

This command starts the Expo development server and opens a browser window with the Expo Dev Tools.

• Open Your App on a Device: Use a physical device and download the Expo Go App from the App Store for iOS devices and the Play Store for Android devices.
• Scan the QR Code: Open the Expo Go app on your device. Scan the QR code displayed in the Expo Dev Tools browser window.

Using an Emulator/Simulator:

• For Android: Press a in the terminal where expo start is running.
• For iOS: Press i in the terminal.

Note: You need Xcode installed on macOS to use the iOS simulator.

Your app should now display “Hello, World!” on your device or emulator.

Step 3: Adding Navigation

Most apps have multiple screens, like home and details screens. To navigate between these screens, we’ll use React Navigation.

3.1 Install React Navigation

React Navigation is a library that makes adding navigation to your app easy.

Run the Following Commands in Your Terminal:

npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-screens react-native-safe-area-context

Explanation:

• @react-navigation/native: The core library for React Navigation.
• @react-navigation/stack: Allows you to create a stack of screens you can navigate through.
• react-native-screens and react-native-safe-area-context: Required dependencies for React Navigation.

3.2 Set Up Navigation

Now, let’s set up the navigation structure in your app.

Modify App.js: Replace the existing code in App.js with the following:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Explanation:

• Imports:
• NavigationContainer: Manages your app’s navigation state.
• createStackNavigator: Creates a stack of screens.
• HomeScreen and DetailsScreen: The two screens we’ll create next.
• Stack Navigator:
• initialRouteName: Sets the first screen to display (Home).
• Stack.Screen: Defines each screen in the stack.

3.3 Create Screens

Let’s create the two screens: HomeScreen and DetailsScreen.

Create a screens Folder:

In your project directory, create a new folder named screens.

Create HomeScreen.js:

Inside the screens folder, create a file named HomeScreen.js.

Add the following code:

// HomeScreen.js
import React from 'react';
import { Button, View, Text } from 'react-native';

export default function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

Explanation:

HomeScreen Component:

Displays “Home Screen” text.

Includes a button labeled “Go to Details”. When pressed, it navigates to the Details screen.

• Create DetailsScreen.js:

Inside the screens folder, create a file named DetailsScreen.js.

Add the following code:

// DetailsScreen.js
import React from 'react';
import { View, Text } from 'react-native';

export default function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

Explanation: Displays “Details Screen” text.

3.4 Test Navigation

Save All Files: Ensure all your changes are saved in VS Code.

Reload the App: If the app runs in Expo Go or an emulator, you can shake your device or press r in the terminal to reload.

Navigate Between Screens: On the Home Screen, tap the “Go to Details” button. You should see the Details Screen. Use the back button (usually provided by the stack navigator) to return to the Home Screen.

Step 4: Styling Your App

Making your app look good is important. In React Native, you style your components using JavaScript objects, similar to CSS.

4.1 Create a Stylesheet

Let’s add some styles to our HomeScreen.

Create a styles.js File:

Inside the screens folder, create a file named styles.js.

Add the following code:

// styles.js
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 18,
    color: '#333',
    marginBottom: 20,
  },
  button: {
    padding: 10,
    backgroundColor: '#007BFF',
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
  },
});

export default styles;

Explanation:

• container: Centers content and sets a light gray background.
• text: Sets font size and color and adds space below the text.
• button and buttonText: Styles for a custom button (optional if you choose to customize further).

4.2 Apply Styles to Components

Now, let’s use these styles in our HomeScreen.

Update HomeScreen.js: 

Modify HomeScreen.js to import and use the styles.

// HomeScreen.js
import React from 'react';
import { Button, View, Text } from 'react-native';
import styles from './styles';

export default function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

Explanation:

• Import Styles: import styles from ‘./styles’;
• Apply Styles: Use styles. container for the View and styles. text for the Text.
• Optional: Customize Button (Advanced). If you want to style the button further, you can create a custom button component using TouchableOpacity or other components. However, for simplicity, the default Button component is sufficient for now.

4.3 Test Your Styles

• Save All Files: Make sure all changes are saved.
• Reload the App: Reload the app to see the updated styles. Your Home Screen should now have centered text with a specific font size and color, and the background should be light gray.

Step 5: Testing Your App

Testing ensures your app works correctly and helps catch any issues before users encounter them.

5.1 Unit Testing with Jest

Jest is one of the popular testing framework for JavaScript applications, including React Native apps.

Install Jest: 

Installs Jest as a development dependency.

Run the Following Command:

npm install --save-dev jest

This installs Jest as a development dependency.

Configure Jest:

In your package.json file, add the following under the “scripts” section:

"scripts": {
  "test": "jest"
}

Explanation:

This sets up a script to run Jest tests using the command npm test.

• Create a __tests__ Folder:

In your project directory, create a new folder named tests.

• Create App.test.js:

Inside the tests folder, create a file named App.test.js.

Add the following code:

// __tests__/App.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import App from '../App';

test('renders correctly', () => {
  const tree = renderer.create(<App />).toJSON();
  expect(tree).toMatchSnapshot();
});

Explanation:

• Import Statements:
• React: Needed to render components.
• renderer: From react-test-renderer, used to create a snapshot of your component.
• App: The main App component.
• Test Case:
• test Function: Defines a test named “renders correctly.”
• renderer. create: Renders the App component.
• toJSON: Converts the rendered output to a JSON format.
• expect(…).toMatchSnapshot(): Checks if the output matches the saved snapshot.

Run Tests:

Run the Following Command:

npm test

Jest will run the tests and display the results in the terminal.

The first time you run the test, Jest creates a snapshot file. Future test runs will compare against this snapshot to detect changes.

5.2 Manual Testing

Besides automated tests, manually testing your app on different devices and scenarios is important.

Test on Multiple Devices:

Use different smartphones and tablets to see how your app looks and behaves.

Test Various Scenarios:

• Navigate through all screens.
• Test buttons and interactions.
• Check how the app handles errors or unexpected inputs.

Step 6: Deploying Your App

Deploying your app involves building it for production and distributing it to users.

Build Your App: Use Expo’s build service to create production builds:

• expo build: Android
• expo build: ios

Distribute Your App: Once the build is complete, you’ll get a link to download the APK (for Android) or IPA (for iOS). You can then distribute these files through app stores or directly to users.

Conclusion

Congratulations! You’ve created a basic mobile app using React Native and Expo. This guide covered setting up your development environment, building and styling your app, adding navigation, testing, and deploying. With these skills, you’re on your way to becoming a proficient mobile app developer. Keep experimenting and building more complex apps to further enhance your skills.