A Guide to React Native and Expo

React Native is a widely used framework for building cross-platform mobile applications. It is based on the React library and allows developers to write code once and deploy it on both iOS and Android platforms. Expo is a toolchain and platform for developing and deploying React Native applications that allows developers to easily create new projects, test their code, and publish their apps to app stores. In this article, we will discuss how to get started with a new React Native project using Expo.

Step 1: Setting up the Environment

Before we can start building our React Native, we will need to set up our development environment. We will need Node.js, npm, and the Expo CLI installed on our machine. To install Node.js and npm, visit the official Node.js website and download the latest version. Once that's installed, we can install the Expo CLI by running the following command:

npm install -g expo-cli

After the install, we can create a new project by running the following command:

expo init my-app

This command will create a new React Native project using Expo and set up the necessary files and directories.

Step 2: Running the Project

Once we have created our project, we can run it using the following command:

cd my-app
# next
yarn install
# then
yarn start

This command will start the development server and either open a web page in our default browser with a QR code or it will show up in the terminal. That QR code can be scanned with your phone. The Expo Go app will load our application and we can begin testing it on our device.

Step 3: Understanding the Project Structure

When we create a new React Native project using Expo, it generates a basic project structure. The main files and directories that we need to be familiar with include:

• App.js: The main entry point for our application.
• >node_modules/: where all our project dependencies are installed.
• >package.json: The file that contains the metadata and dependencies for our project.
• src/: The directory where we will store our application source code.

It is important to understand the project structure so that we can navigate and modify our project easily.

Step 4: Installing Dependencies

Our React Native project using Expo may require additional dependencies that we need to install to add functionality to our application. We can use yarn to install these dependencies by running the following command:

yarn add dependency-name

After installing a new dependency, we need to import it into our code to use it.

Step 5: Adding Navigation

Navigation is an essential part of any mobile application. React Navigation is a popular library that allows us to easily add navigation to our React Native application. We can install React Navigation by running the following command:

yarn add @react-navigation/native

This command will install the core React Navigation library. We can then install additional navigation components by running the following command:

yarn add @react-navigation/stack @react-navigation/bottom-tabs

This command will install the Stack Navigator and Tabs Navigator components, which allows us to navigate between screens in our application. We can then import and use the Stack and Tab Navigator components in our code. We will also need to install two more additional packages that will be necessary for navigation in our app. Do so by running the following command:

npx expo install react-native-screens react-native-safe-area-context

Learn more about Stack Navigation and Tab Navigation from the guides on the React Navigation website. A basic App.js with Stack Navigation could look something like this:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HomeScreen from './screens/HomeScreen';
import OtherScreen from './screens/OtherScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Home'>
        <Stack.Screen name='Home' component={HomeScreen} options={{ title: 'Overview' }} />
        <Stack.Screen name='Other' component={OtherScreen} options={{ title: 'Other Page' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Step 6: Styling the Application

Styling is an important aspect of any mobile application. React Native provides a StyleSheet API that allows us to add styles to our components. We can define styles in our code and apply them to our components using the following syntax:

const styles = StyleSheet.create({ ... })

We can then apply the styles to our components following this example:

import * as React from 'react';

import { StatusBar } from 'expo-status-bar';

import {

  Button,

  StyleSheet,

  Text,

  View

} from 'react-native';



export default function HomeScreen({ navigation }) {

  return (

    <View style={styles.container}>

      <Text style={styles.pageTitle}>Welcome to My App</Text>
      <Button

        title="Go to Other page"

        onPress={() => navigation.navigate('Other')}

      />


      <StatusBar style="auto" />

    </View>

  );
}

const styles = StyleSheet.create({
  container: {

    flex: 1,

    alignItems: 'center',

    justifyContent: 'center',

  },
  pageTitle: {

    fontSize: 30,

    fontWeight: 'bold',

    textAlign: 'center',

  },
});

By using the StyleSheet API, we can create a consistent and appealing look for our application.

Step 7: Debugging the Application

Debugging is an important part of the development process. Expo provides tools for debugging our React Native application. We can use the Expo Developer Tools to inspect and debug our application. To open the Expo Developer Tools, we can press "d" in our terminal or select "Debug remote JS" in the Expo app on our phone. We can then use the tools to inspect our code, view logs, and debug our application.

Step 8: Publishing the Application

After we have completed our React Native project using Expo, we can publish it to app stores. Expo provides a simple way to publish our application using the following command:

expo publish

This command will create a new build of our application and publish it to the Expo server. We can then share the URL for our application with others to test and use.

In conclusion, getting started with a new React Native project using Expo is a straightforward process. Expo makes setting up the environment quick and easy so you can get to development as soon as possible. Write code one, deploy everywhere. By following these steps, we can get started with creating high-quality cross-platform applications using React Native and Expo.