Project setup

šŸ“” What you will learn

  • Use the expo-cli
  • Install the react-native-paper library with yarn
  • Use VSCode to code from your computer

šŸ›°ļø What you'll build: Spacecraft

Spacecraft is a mobile app that lets users buy starships to explore the Galaxy. They can browse a list of all the starships available, see the details and price for each one.

Want a preview? You can download the final version of the Spacecraft app on Android.

react native with Star Wars API

šŸ‘¾ Before we start the exercise

  • You should have VSCode installed on your machine
  • You should have the expo-cli installed
  • Star the repository react-native-bootcamp on the corner top right. This allows you to easily keep track of updates and new releases, as you will receive notifications when changes are made to the repository.
add stars is nice

šŸ‘Øā€šŸš€ Exercise 2

Create a new React Native project using expo

  • Copy-paste the following commands in your terminal
yarn create expo-app spacecraft --template expo-template-blank-typescript
cd spacecraft
  • To preview the app run this and scan the QR Code
yarn start

Next, take a look at the project files in your text editor.

  • The package.json file lists all available scripts and dependencies. Installing any new library updates this file.
  • In every Expo project we also have an app.json file, which contains all the metadata for our app. This includes the app's name, bundle identifiers, and more.
  • Lastly, we have our App.tsx file, which is an entry point for our application. Try changing text inside the <Text> component to see the changes immediately apply to the content in our app.

One thing you can do next is create a src folder where all our components and screens will be.

Use a Material Design Library called React Native Paper

During this bootcamp, we are going to use the UI library called react-native-paper to have a nice look and feel.

  • From your terminal, install the library with:
yarn add react-native-paper
yarn add react-native-safe-area-context # From v5 there is a need to install react-native-safe-area-context for handling safe area.

If you have issues double check the setup instruction on the documentation.

  • Paste your LoginScreen from the exercice 1 Snack into App.tsx

Congratulations šŸ‘! You should have something like this:

Login Screen Preview

Create another Screen

Feel free to kill/relaunch your expo server if you encounter errors.

  • Rename App.tsx to LoginScreen.tsx and create 2 folders src and screens like this
ā”œā”€ā”€ App.tsx
ā”œā”€ā”€ package.json
ā”œā”€ā”€ src
ā”‚    ā””ā”€ā”€ screens
ā”‚          ā””ā”€ā”€ LoginScreen.tsx
ā”œā”€ā”€ tsconfig.json
ā””ā”€ā”€ yarn.lock
  • Create a new file App.tsx
  • Wrap your application with PaperProvider like this
// App.tsx
import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';

import LoginScreen from './src/screens/LoginScreen';

const App = () => {
  return (
      <LoginScreen />

// eslint-disable-next-line import/no-default-export
export default App;

Congratulations šŸ‘! You created yout first screen component.

Remember, in React Native everything is a component.

It is always a good idea to create small components to your project. In our case, we are going to add a <Header> component.

  • Create a folder components like this example:
ā”œā”€ā”€ src
ā”‚    ā””ā”€ā”€ components
ā”‚          ā””ā”€ā”€ Header.tsx
  • Create a new <Header title="SpaceCraft"/> component

Hint: Have a look a the section Patterns if you don't know how to create a React component.

šŸ‘½ Bonus

  • Create a better ux for the password with an eye icon