React Native Tutorial by The Net Ninja - Notes
Tags: courses, javascript, react
Published: 2021-12-13 14:00:32

---
title: React Native Tutorial by The Net Ninja - Notes
published: true
date: 2021-04-08 16:08:31 UTC
tags: Courses,Javascript,React
canonical_url: http://181.126.83.235/2021/04/08/react-native-tutorial-by-the-net-ninja/
---

Youtube Link: [https://www.youtube.com/watch?v=ur6I5m2nTvk&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ](https://www.youtube.com/watch?v=ur6I5m2nTvk&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ)  
Repo: [https://github.com/iamshaunjp/react-native-tutorial](https://github.com/iamshaunjp/react-native-tutorial)

Documentation: [https://reactnative.dev/docs/getting-started](https://reactnative.dev/docs/getting-started)

Local folder: `E:\NMS\CURSOS\REACT-NATIVE-NINJA\react-native-tutorial`

components lib: [https://reactnativeelements.com/docs/header](https://reactnativeelements.com/docs/header)

## Initial commands – Configuration

Android studio installation: Intel® HAXM installation failed. To install Intel® HAXM follow the instructions found at: https://software.intel.com/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows

Expo documentation: https://docs.expo.io/

```bash
npm install --global expo-cli
expo init myproject
npm start

```

## Full examples:

Todo App: [https://github.com/manolosolalinde/react-native-tutorial/tree/lesson-15](https://github.com/manolosolalinde/react-native-tutorial/tree/lesson-15)

The reviews App: [https://github.com/manolosolalinde/react-native-tutorial/tree/lesson-35](https://github.com/manolosolalinde/react-native-tutorial/tree/lesson-35)

## Tutorial structure:

`lesson-2 to lesson-8`: setup and basics

`lesson-9 to lesson-15`: Todo App

[React Native Tutorial #10 – Todo App (part 2)](https://www.youtube.com/watch?v=LH_SoXiu_Hk&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=10)  
[React Native Tutorial #11 – Todo App (part 3)](https://www.youtube.com/watch?v=LH_SoXiu_Hk&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=11)  
[React Native Tutorial #12 – Alerts](https://www.youtube.com/watch?v=oVA9JgTTiT0&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=12)  
[React Native Tutorial #13 – Dismissing the Keyboard](https://www.youtube.com/watch?v=oVA9JgTTiT0&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=13)  
[React Native Tutorial #14 – Flexbox Basics](https://www.youtube.com/watch?v=oVA9JgTTiT0&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=14)  
[React Native Tutorial #15 – Icons & More Flexbox](https://www.youtube.com/watch?v=C4ikFaP0a5o&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=15)

`lesson-16 to lesson-35`: The reviews App

[React Native Tutorial #16 – Starting the Reviews App](https://www.youtube.com/watch?v=cFVHTazhb7I&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=16)  
[React Native Tutorial #17 – Custom Fonts](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=17)  
[React Native Tutorial #18 – Global Styles](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=18)  
[React Native Tutorial #19 – React Navigation Setup](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=19)  
[React Native Tutorial #20 – Stack Navigator](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=20)  
[React Native Tutorial #21 – Navigating Around](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=21)  
[React Native Tutorial #22 – Passing Data Between Screens](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=22)  
[React Native Tutorial #23 – Navigation Options](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=23)  
[React Native Tutorial #24 – Drawer Navigation](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=24)  
[React Native Tutorial #25 – Custom Header Component](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=25)  
[React Native Tutorial #26 – Custom Card Component](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=26)  
[React Native Tutorial #27 – Using Images](https://www.youtube.com/watch?v=2s5KNg_5_LA&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=27)  
[React Native Tutorial #28 – Background Images](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=28)  
[React Native Tutorial #29 – Modals](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=29)  
[React Native Tutorial #30 – Formik Forms (part 1)](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=30)  
[React Native Tutorial #31 – Formik Forms (part 2)](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=31)  
[React Native Tutorial #32 – Validation with Yup](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=32)  
[React Native Tutorial #33 – Showing Form Errors](https://www.youtube.com/watch?v=o_ErcEKV23I&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=33)  
[React Native Tutorial #34 – Custom Button Component](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=34)  
[React Native Tutorial #35 – Wrap Up](https://www.youtube.com/watch?v=IY5OBeL9LNE&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=35)

## Views, text and styles

Note: React native does not use css. `It emulates the idea of css.`

Note: Styles are not automatically inherited.

In general `views` are used instead of `div`.

Due to the lack of DOM, React Native doesn’t use tags like: div, section, span, input, etc. But don’t worry, almost every HTML tag has an equivalent React Native component, so we are able to use the same mindset of the web to develop with React Native components `View`, `Text`, `TextInput`, etc.

## Examples

ScrollView, Button, TextInput:

```jsx
<ScrollView> 
    <Button title='update state' onPress={clickHandler}/>
    <TextInput
            multiline
            keyboardType='numeric' 
            placeholder='e.g. John Doe'
            onChangeText={()=>setName()}
            style={styles.input}/>
<ScrollView/>

```

Flatlist, touchable component:

```jsx
    <View style={styles.container}>
      <FlatList 
        numColumns={2}
        keyExtractor={(item) => item.id} 
        data={people} 
        renderItem={({ item }) => ( 
        <TouchableOpacity onPress={()=>pressHandler(item.id)}>
          <Text style={styles.item}>{item.name}</Text>
        </TouchableOpacity>
        )}
      />
    </View>

```

Alert:

```jsx
// jsx
      Alert.alert('OOPS', 'Todo must be over 3 characters long', [
        {text: 'Understood', onPress: () => console.log('alert closed') }
      ]);

```

Keyboard dismiss:

```jsx
    <TouchableWithoutFeedback onPress={() => {
      Keyboard.dismiss();
      console.log('dismissed');
    }}>
      <View style={styles.container}>
        <Header />
        <View style={styles.content}>
          <AddTodo submitHandler={submitHandler} />
          <View style={styles.list}>
            <FlatList
              data={todos}
              renderItem={({ item }) => (
                <TodoItem item={item} pressHandler={pressHandler} />
              )}
            />
          </View>
        </View>
      </View>
    </TouchableWithoutFeedback>

```

Flexbox:

```jsx
export default function Sandbox() {
  return (
    <View style={styles.container}>
      <Text style={styles.boxOne}>one</Text>
      <Text style={styles.boxTwo}>two</Text>
      <Text style={styles.boxThree}>three</Text>
      <Text style={styles.boxFour}>four</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 40,
    backgroundColor: '#ddd',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: '100%',
  },
  boxOne: {
    flex: 1,
    backgroundColor: 'violet',
    padding: 10,
  },
  boxTwo: {
    flex: 2,
    backgroundColor: 'gold',
    padding: 10,
    alignSelf: 'flex-end',
  },
  boxThree: {
    flex: 1,
    backgroundColor: 'coral',
    padding: 10,
  },
  boxFour: {
    flex: 3,
    backgroundColor: 'skyblue',
    padding: 10,
    alignSelf: 'flex-start',
  }
});

```

Icons:  
https://docs.expo.io/guides/icons/

```jsx
import { MaterialIcons } from '@expo/vector-icons';
export default function TodoItem({ pressHandler, item }) {
  return (
    <TouchableOpacity onPress={() => pressHandler(item.key)}>
      <View style={styles.item}>
        <MaterialIcons name='delete' size={18} color='#333' />
        <Text style={styles.itemText}>{item.text}</Text>
      </View>
    </TouchableOpacity>
  )
}

```

Fonts:  
– Documentation: https://docs.expo.io/guides/using-custom-fonts/?redirected  
– Installation:

```bash
expo install expo-font @expo-google-fonts/nunito
npm install expo-app-loading

```

- Example:

```jsx
import React from 'react';
import AppLoading from 'expo-app-loading';
import Home from './screens/home';
import { useFonts, Nunito_400Regular, Nunito_700Bold } from '@expo-google-fonts/nunito';

export default function App() {
    let [fontsLoaded] = useFonts({
        Nunito_400Regular,
        Nunito_700Bold,
    });
    if (!fontsLoaded) {
        return <AppLoading />;
    }  
    else {
        return <Home />;
    }
}

```

lesson-18 – Global Styles:  
Just create a file in styles -> global.js and create and do:  
(nothing weird)

```jsx
import { StyleSheet } from 'react-native';
export const globalStyles = StyleSheet.create({
  titleText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  paragraph: {
    marginVertical: 8,
    lineHeight: 20,
  },
  container: {
    flex: 1,
    padding: 20,
  },
});

```

lesson-19 – React Navigation Configuration

```jsx
# install react-navigation 5.0
npm install @react-navigation/native
npm install @react-navigation/stack
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install react-navigation-stack

```

lesson-20 – Stack Navigator  
Installs for react navigator 5.0x:  
`routes/homeStack.js`:

```jsx
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/home";
import ReviewDetails from "../screens/reviewDetails";

const { Navigator, Screen } = createStackNavigator();

const HomeNavigator = () => (
  <Navigator headerMode="none">
 {/* //other options: "float", "screen" */}
    <Screen name="Details" component={ReviewDetails} />
    <Screen name="Home" component={Home} />
  </Navigator>
);

export const AppNavigator = () => (
  <NavigationContainer>
    <HomeNavigator />
  </NavigationContainer>
);

```

And bind it into the App.js root component:

```jsx
...
import { AppNavigator } from "./routes/HomeStack";
...
if (fontsLoaded) {
    return <AppNavigator />;
  } else {
   ...
  }

```

lesson-21 – Example navigation:

```jsx
export default function Home({ navigation }) {

  const pressHandler = () => {
    navigation.navigate('ReviewDetails');
    // navigation.goBack();
    // navigation.push('ReviewDetails'); 
  }

  return (
    <View style={globalStyles.container}>
      <Text style={globalStyles.titleText}>Home Screen</Text>
      <Button title='to review details screen' onPress={pressHandler} />
    </View>
  );
}

```

React Native Tutorial #22 – Passing Data Between Screens

Navigation documentation: https://reactnavigation.org/docs/params

React Native Tutorial #23 – Navigation Options

https://reactnavigation.org/docs/headers#sharing-common-options-across-screens

React Native Tutorial #24 – Drawer Navigation

```
npm install @react-navigation/drawer

```

`./routes/drawer.js`

```jsx
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

import { HomeNavigator } from './homeStack'
import { AboutNavigator } from './aboutStack';

const Drawer = createDrawerNavigator();

export const AppDrawer = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator headerMode="screen" initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeNavigator} />
        <Drawer.Screen name="About" component={AboutNavigator} />
      </Drawer.Navigator>
    </NavigationContainer> 
  );
}

```

React Native Tutorial #30 – Formik Forms (part 1)

```
npm install formik

```

Formik Example:

```jsx
import React from 'react';
import { StyleSheet, Button, TextInput, View, Text } from 'react-native';
import { globalStyles } from '../styles/global.js';
import { Formik } from 'formik';
import * as yup from 'yup';
import FlatButton from '../shared/button.js';

const reviewSchema = yup.object({
  title: yup.string()
    .required()
    .min(4),
  body: yup.string()
    .required()
    .min(8),
  rating: yup.string()
    .required()
    .test('is-num-1-5', 'Rating must be a number 1 - 5', (val) => {
      return parseInt(val) < 6 && parseInt(val) > 0;
    }),
});

export default function ReviewForm({ addReview }) {

  return (

    <View style={globalStyles.container}>
      <Formik
        initialValues={{ title: '', body: '', rating: '' }}
        validationSchema={reviewSchema}
        onSubmit={(values, actions) => {
          actions.resetForm(); 
          addReview(values);
        }}
      >
        {props => (
          <View>
            <TextInput
              style={globalStyles.input}
              placeholder='Review title'
              onChangeText={props.handleChange('title')}
              onBlur={props.handleBlur('title')} 
              value={props.values.title}
            />
            {/* only if the left value is a valid string, will the right value be displayed */}
            <Text style={globalStyles.errorText}>{props.touched.title && props.errors.title}</Text>
            <FlatButton onPress={props.handleSubmit} text='submit' />
          </View>
        )}
      </Formik>
    </View>
  );
}

```