React Native Ecosystem

What you will learn

  • Let your computer catch errors BEFORE you ship bugs

👾 Before we start the exercise

Organise your files in a good way. Here is an example:

.
├── App.tsx
├── app.json
├── assets
│    ├── adaptive-icon.png
│    ├── favicon.png
│    ├── icon.png
│    └── splash.png
├── babel.config.js
├── package.json
├── src
│    ├── components
│    │    ├── AppLayout.tsx
│    │    ├── Offline.tsx
│    │    ├── Card.tsx
│    │    └── index.tsx
│    ├── lib
│    │    └── fetchAsync.ts
│    └── screens
│          ├── LoginScreen.tsx
│          ├── TermsScreen.tsx
│          ├── StarshipFeedScreen.tsx
│          └── index.tsx
├── tsconfig.json
└── yarn.lock
  • Create a ./src/components/ folder and move all your components here
  • Create a ./src/components/index.tsx file and exports your components
import AppLayout from './AppLayout';
import Offline from './Offline';
import Card from './Card';

export { AppLayout, Offline, Card };

If you don't do that you can have exporting errors.

// without and index
import Card from './components/Card';

// without exported index.tsx
import { Card } from './components/Card';

☝ This choice is not opiniated.

// It's more or less the same thing

const Card = () => {
  ...
}

// or

function Card(){
  ...
}

Choose a solution and keep it concistent accross your stack.

BUT there is a nice pattern to know: renaming a component on the go

  • Create a ./src/screens/ folder and move all your previsous Screens here
  • Create a ./src/screens/index.tsx file and exports your components
  • On App.tsx
// App.tsx

import { LoginScreen as App } from './src/screens/LoginScreen';
export default App;

👏 Now you are a naming expert!

We are ready to dive on TypeScript. The Typescript cheatsheet may help you one day.

👨‍🚀 Exercise 3

TypeScript has own components and own snippets. Use search or just type ts before every component snippet.

  • Use tsrnfe to create/update your components with interface declarations and move them to ./src/components/