React Native Foundation

What you will learn

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

👾 Before we start the exercise

👨‍🚀 Exercise 2

  • On your terminal create a new application with
expo init spacecraft -t expo-template-blank-typescript
  • 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.

  • On your terminal
yarn add react-native-paper
  • Paste your LoginScreen from the exercice 1 Snack into App.tsx

Congratulations 👏! You should have something like this:

Login Preview

Now we are going to create another Screen. Fell free to kill/relaunch the 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
// App.tsx

import React from 'react';
import LoginScreen from './src/screen/LoginScreen';

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

export default App;

Congratulations 👏! You created yout first screen component.

Remeber, 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. They will be used to display important information on the screen.

Create a new folder and file like this

├── src
│    └── components
│          └── Header.tsx

And copy your previous header, or you can take this one

import { View } from "react-native";
import { Text } from "react-native-paper";

const Header = (props) => {
  return (
    <View style={styles.container}>
      <Text
        style={styles.header}
        {...props}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 24,
  }
  header: {
    fontSize: 15,
    lineHeight: 21,
    textAlign: "center",
    marginBottom: 12,
  },
});

export default Header;

As you can see we are using the Text component exported from react-native-paper instead of the Text component from react-native. This is because we want to ensure that our text will use the same theme.

👽 Bonus

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

password