Project setup

📡 What you will learn

• Use the Expo CLI.
• Install the UI library react-native-paper.
• Use VS Code to code from your computer.

👾 Before we start the exercise

• You should have VS Code installed on your machine.
• Running npx create-expo-app --help should not output any error.
• 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.

👨‍🚀 Exercise 2

Create a new React Native project using expo

• Copy-paste the following commands in your terminal

npx create-expo-app spacecraft --template expo-template-blank-typescript

cd spacecraft

• To preview the app run this and scan the QR Code

npm 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.

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:

npm install react-native-paper react-native-safe-area-context

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:

Create another Screen

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

• Rename your file App.tsx to LoginScreen.tsx.
• Update the name of your component to LoginScreen.

--export default function App() {
++export default function LoginScreen() {

• Create 2 folders src and screens the next example and move your LoginScreen.tsx inside src/screens:

.
├── App.tsx
├── package.json
├── src
│    └── screens
│          └── LoginScreen.tsx
├── tsconfig.json
└── yarn.lock

• Create a new file App.tsx, import LoginScreen and render it.
• We need to wrap our 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';

function App() {
  return (
    <PaperProvider>
      <LoginScreen />
    </PaperProvider>
  );
};

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

Congratulations 👏! You created yout first screen 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 component that takes a title props <Header title="SpaceCraft"/>

🔭 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