Complete Guide: Setting Up Your First React Native Project

For the purpose of this walkthrough, I will assume you have basic knowledge of JavaScript and ES6, which are the foundational languages for React Native. If you are not familiar with these, I would recommend brushing up on your JavaScript and ES6 skills before proceeding.

1. Introduction to React Native

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.

2. Environment Setup

2.1. Node.js and NPM

You need to have Node.js installed to work with React Native. Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside a web browser. It’s used for running scripts on the server to render content before it is delivered to a web browser. NPM is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js.

You can download the latest version of Node.js here.

2.2. Expo CLI

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

Install Expo CLI by running:

npm install -g expo-cli

2.3. IDE

You will also need a code editor. Visual Studio Code is a great option and you can download it here.

3. Creating a New React Native App

To create a new app, you need to open your terminal, navigate to your working directory and then type the following command:

expo init MyNewProject

Replace ‘MyNewProject’ with the name you want for your project.

Once you press Enter, you will be asked to choose a template for your project. For a simple setup, select ‘blank’. Once you choose the template, the Expo CLI will set up the project for you.

4. Running Your App

To run your app, navigate into your project directory and start the development server:

cd MyNewProject
npm start

This will start a development server for you, and print a QR code in your terminal.

5. Viewing Your App on a Mobile Device

To view your app, you need to install the Expo Go app on your iOS or Android phone. You can download it from the App Store or Google Play Store. Once you have it installed, you can scan the QR code printed by npm start using Expo Go (Android) or the Camera app (iOS). You should be able to see your new app running in your phone.

6. Editing Your App

Now, open App.js in your text editor of choice and start building! Save your changes and they will be immediately reflected on your phone.

7. Structure of a React Native App

A basic React Native app has a file structure that looks something like this:

MyApp/
  App.js
  package.json
  node_modules/
  assets/

The App.js file is where your app’s specific code resides. The package.json file manages the dependencies for your app.

8. Writing React Native Components

React Native apps are written using JavaScript and JSX, a syntax extension for JavaScript that resembles HTML. They’re composed of ‘components’, self-contained pieces of UI that render some output.

Components can be classes or functions. As of React 16.8, function components can use ‘hooks’ to have state and lifecycle features previously only available to class components.

Here’s an example of a simple component:

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

const MyComponent = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
}

export default MyComponent;

9. Styling Components

React Native components can be styled using JavaScript. Styles in React Native are created by defining JavaScript objects, or by using StyleSheet.create, a helper method that can validate your styles.

Here’s an example:

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

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'blue',
  },
});

export default MyComponent;

10. Using React Native APIs and Packages

React Native includes some built-in APIs and components, and you can also install third-party packages for additional functionality.

For example, to use a ScrollView:

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

const MyComponent = () => {
  return (
    <ScrollView>
      <Text>Hello, World!</Text>
      <Text>Welcome to React Native!</Text>
      <Text>Let's build something awesome!</Text>
    </ScrollView>
  );
}

export default MyComponent;

And to install a third-party package, for example, to use a vector icon library:

npm install --save react-native-vector-icons

After you have installed a package, you can import and use it in your code:

import Icon from 'react-native-vector-icons/Ionicons';

const MyComponent = () => {
  return <Icon name="rocket" size={30} color="#900" />;
}

export default MyComponent;

This is just a high-level overview of setting up a React Native project. There’s a lot more to learn about React Native, including navigation, state management, handling user input, and working with APIs. Happy coding!

Complete Guide: Setting Up Your First React Native Project – React native tutorial #2

Published by administrator