Why React Native?

React Native allows developers to build mobile applications using familiar technologies such as JavaScript and React where a single codebase can be used for both iOS and Android platforms.

Why Expo?

Expo builds on top of React Native and enhances the development experience by providing a set of tools, libraries, and services which simplifies project setup, development & deployment.

Prerequisites

Before you begin, make sure you have the following installed on your system:

  1. Node.js: React Native and Expo are built on top of Node.js. You can download and install it from here. View NodeJS versions here.
  2. npm & npx (Node Package Manager & Node Package eXecute): npm and npx are included with Node.js, so once you have Node.js installed, both are available as well.
  3. Expo CLI: to get started with Expo, install the Expo Command Line Interface. Open your terminal and run the following command: npm install -g expo-cli

Creating a New React Native Project with Expo

Run expo init MyCoolProject or by using npx with npx create-expo-app MyCoolProject . I recommend the latter.

Running your app

Writing Your First React Native Code

Open the project in your preferred code editor. The main entry point for your React Native app is usually App.js or index.js. Start by modifying the default code in this file to see changes in your app.

For example, you can replace the contents of App.js with the following code:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello, Expo and React Native!</Text>
    </View>
  );
}

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

As you make changes, the Expo development server will automatically reload your app, allowing you to see the results in real-time.

Conclusion

Congratulations! You've successfully installed Expo and created your first React Native project. From here, you can explore the extensive Expo documentation to learn more about its features and capabilities. Happy coding!