Create a new App

Let’s create a new React Native project with Obytes starter.

Requirements

First make sure you have the following tools installed on your machine:

• React Native dev environment
• Node.js LTS release
• Git
• Watchman, required only for macOS or Linux users
• Pnpm
• VS Code Editor

Initializing a new project

First make sure you have pnpm installed on your machine, if not you can install it using the following command:

npm install -g pnpm

Start your project using create-rootstrap-rn-app command:

npx create-rootstrap-rn-app@latest MyApp

The command will create an expo app named MyApp and install all the dependencies added by the starter.

Note

Because we’re using the Expo custom dev client to support native dependencies with the starter. The Expo Go app is not an option to consider here; instead, you need to create the app and install it on your simulator or device to start using it.

Note

Adhere to Android’s specific naming conventions as described in the Android documentation. The name must satisfy the following rules:

• It must have at least two segments (one or more dots).
• Each segment must start with a letter.
• All characters must be alphanumeric or an underscore [a-zA-Z0-9_].

Open Project on VS Code

VS code is the recommended editor for this starter, The starter comes with a list of recommended extensions, settings and project snippets that we think will improve your coding experience.

Open the project on VS Code using the following command:

code .

When you open the project on VS Code you will see a popup asking you to install the recommended extensions, The easy way is to install all recommended extensions by clicking on Install All button.

To ensure that your code is properly validated and formatted, we highly recommend installing all of the recommended extensions. However, if you’re hesitant to install them all, we suggest at least installing the following extensions, as they are essential to our code validation and formatting on file save:

• ESLint
• Prettier
• Tailwindcss IntelliSense
• Pretty TypeScript Errors

Here is the complete list of recommended extensions:

• ESLint
• Prettier
• tailwindcss IntelliSense
• Auto Rename Tag
• Auto close tag
• Code spell checker
• GitLens
• Import Cost
• Cobalt 2 theme
• Turbo console log
• i18n Ally
• Github copilot
• Pretty TypeScript Errors

Running the app

If the installation was successful, the created app should be ready to use, and because we are using the expo custom dev client, you may launch the app on your simulator or device by running the following command:

# Run the app on iOS simulator
pnpm ios

# Run the app on Android simulator
pnpm android