DEV Community

Nestor Solalinde
Nestor Solalinde

Posted on • Originally published at 181.126.83.235 on

React Native Tutorial by The Net Ninja - Notes

#courses #javascript #react

Youtube Link: https://www.youtube.com/watch?v=ur6I5m2nTvk&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ

Repo: https://github.com/iamshaunjp/react-native-tutorial

Documentation: https://reactnative.dev/docs/getting-started

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

components lib: 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/

npm install --global expo-cli
expo init myproject
npm start
Enter fullscreen mode Exit fullscreen mode

Full examples:

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

The reviews App: 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)

React Native Tutorial #11 – Todo App (part 3)

React Native Tutorial #12 – Alerts

React Native Tutorial #13 – Dismissing the Keyboard

React Native Tutorial #14 – Flexbox Basics

React Native Tutorial #15 – Icons & More Flexbox

lesson-16 to lesson-35: The reviews App

React Native Tutorial #16 – Starting the Reviews App

React Native Tutorial #17 – Custom Fonts

React Native Tutorial #18 – Global Styles

React Native Tutorial #19 – React Navigation Setup

React Native Tutorial #20 – Stack Navigator

React Native Tutorial #21 – Navigating Around

React Native Tutorial #22 – Passing Data Between Screens

React Native Tutorial #23 – Navigation Options

React Native Tutorial #24 – Drawer Navigation

React Native Tutorial #25 – Custom Header Component

React Native Tutorial #26 – Custom Card Component

React Native Tutorial #27 – Using Images

React Native Tutorial #28 – Background Images

React Native Tutorial #29 – Modals

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

React Native Tutorial #31 – Formik Forms (part 2)

React Native Tutorial #32 – Validation with Yup

React Native Tutorial #33 – Showing Form Errors

React Native Tutorial #34 – Custom Button Component

React Native Tutorial #35 – Wrap Up

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:

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

Flatlist, touchable component:

    <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>
Enter fullscreen mode Exit fullscreen mode

Alert:

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

Keyboard dismiss:

    <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>
Enter fullscreen mode Exit fullscreen mode

Flexbox:

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',
  }
});
Enter fullscreen mode Exit fullscreen mode

Icons:

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

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

Fonts:

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

– Installation:

expo install expo-font @expo-google-fonts/nunito
npm install expo-app-loading
Enter fullscreen mode Exit fullscreen mode
  • Example: 
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 />;
    }
}
Enter fullscreen mode Exit fullscreen mode

lesson-18 – Global Styles:

Just create a file in styles -> global.js and create and do:

(nothing weird)

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,
  },
});
Enter fullscreen mode Exit fullscreen mode

lesson-19 – React Navigation Configuration

# 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
Enter fullscreen mode Exit fullscreen mode

lesson-20 – Stack Navigator

Installs for react navigator 5.0x:

routes/homeStack.js:

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>
);
Enter fullscreen mode Exit fullscreen mode

And bind it into the App.js root component:

...
import { AppNavigator } from "./routes/HomeStack";
...
if (fontsLoaded) {
    return <AppNavigator />;
  } else {
   ...
  }
Enter fullscreen mode Exit fullscreen mode

lesson-21 – Example navigation:

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

./routes/drawer.js

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> 
  );
}
Enter fullscreen mode Exit fullscreen mode

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

npm install formik
Enter fullscreen mode Exit fullscreen mode

Formik Example:

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

mitchell_cheng profile image

Text compression & Code splitting & Modern image formats - Performance optimization

Mitchell -

keploy profile image

AI-Powered Code Generation: Revolutionizing Development

keploy -

sharathchandark profile image

Build Live Code Editor Clone with HTML, CSS and JavaScript

sharathchandark -

seyma profile image

🎨 Colorful React TypeScript Tailwind Portfolio Website

Codex -