Complete React Native Bootcamp

Creating a project with react native cli Preview 08:36

In this section we are learn how to create an app without using expo and we will also understand project structure of that app which is little bit different from expo.

Running an application on Android and iOS Preview 12:16

In this video we will learn how we can run app on android and IOS  which is generated from react native cli .

Exploring file structure Preview 07:47

In this video we will learn how files are organized in a default installed react native and Expo app and the meaning of each file and folder.

Rewriting application Preview 09:50

In this video we will learn how to write our first program in React native.

introduction to styling in React native Preview 11:01

In this video we will learn about style in react native (how to  change font size,font style of text,change background of screen)

What is a component Preview 05:56

In this video we will discuss about most important elements in react native (Components, Props & State) but now we focus on components.

Creating a dumb component Preview 08:55

In  this video we will learn about some Dumb component. we are creating some file and folder and use in App.js file.

Props and Smart components Preview 05:55

move forward ,Now in this video we will convert our Dumb component to smart component and Discuss more about Props (Props means properties ,every components have its own properties).

Loading images into the app Preview 11:50

In  this video we will learn how to import images in react native app either can be directly from local resources of the app or from internet.

Styling basics in react native Preview 09:34

In this video we will learn about basic style in react native .

Introduction to flexbox Preview 08:46

In  this video we will learn about flexbox(Flexbox is designed to provide a consistent layout on different screen sizes)

More on flexbox for mobile Preview 11:42

In  this video we will learn more about flexbox(Flex Direction,Justify Content,Align Items)

Introduction to states and constructor Preview 10:14

In  this video we will discuss about states and constructor.

states: data controller, if we want to change data then we have to use state.

constructor: In general, you should initialize state in the constructor, and when you want to change data then call setState.

Managing state and fun app Preview 15:11

In  this video we will learn more about constructor and states,

creating a small fun app using react native.

Buttons in react native Preview 10:11

In  this video we will learn about Buttons and Alert box.Button are essential components in any app.

create a new  background changer app

Touchables in react native Preview 09:08

In  this video we will learn about Touchables components ,with the help of Touchables you can build your own button ,you can use text,images whatever you want to use just wrap it around  inside touchable.

Background changer app Preview 11:04

In this video we will create a random background color changer app in react native.

Getting app assets Preview 07:31

In this video we will create a Dice Roller app in React Native.

in this app we use an image below the image we are gone a put a button and through the button we are going to generate random images every single time.

Design custom button Preview 06:10

In  this video we will create a custom button using Touchable opacity.

Getting a Random Number Preview 04:41

In  this video we will simply want to create state and bring the images from state.and create a method which generate a random values using Math.random() function.

getting Random images Preview 05:28

In  this video we will create a switch case statement and set image according to that number. finish Dice Roller App

Handling Notches Preview 09:06

In this section we are creating a new app which is currency converter app , And Discuss about some ios related issue and resolve that issue using SafeAreaView.

Creating input and Result Views Preview 14:41

In  this video we will Design our currency converter app, we are creating 2 views ( one for result & one for input).

Creating all the buttons Preview 12:31

In  this video we will Design our Button and improve style of the app.

Adding working logic Preview 12:36

In  this video we will learn how to calculate the results when user press the button.

Handling keyboards events in React native Preview 04:10

In  this video we will try to hide our keyboard in react native app.

Ejecting expo app to Android and iOS app Preview 06:33

In  this video we will learn how we eject our expo app into android and ios.Expo allows you to eject your pure-JS project from the Expo iOS/Android clients, providing you with native projects that can be opened and built with Xcode and Android Studio.

Third party components Preview 09:53

In this section we will create an amazing app TIC TAC TOE and Discuss about third party components

Exploring Native Base Preview 11:04

In this video we will Explore third party components (Native base)

Can you debug in React Native Preview 04:06

In this video we will learn how to debug errors in react native.

Loading Custom Fonts and Resolve Errors Preview 14:45

In this video we will learn how to load custom fonts in react native and resolve error from previous videos.

Adding TODOs and TIC TAC TOE Preview 09:46

In this video we will start our Tic Tac Toe app and create design and function for that.

Flipping Cross and Zeros Preview 10:40

In this video we will learn how to import Item from expo and create an array for button then set that array into button.

flip cross and zeros in app.

Writing more functions Preview 05:30

In this video we will learn how to choose item icon and item color in tic tac toe app and create more functions like resetGame(),winGame().

Writing winning logic for TIC TAC TOE Preview 05:40

In this video we will write code of winning logic in winGame() functions  for tic tac toe app in react native.

Design part of TIC TAC TOE Preview 16:31

In this video we will Design Our Tic Tac Toe App and finish that app.

Exploring Expo docs Preview 05:06

In this video we will Explore more stuffs in react native (explore documentation about expo and deep dive into expo documentation)

Getting assets for playing sound Preview 10:57

In this video we will start our new spanish number app.

Download assets folder .

Understand the play method Preview 12:29

In this video we will try to learn how to play sounds on button click.

Creating a button for sound Preview 10:16

In this video we will Design our spanish number app.

Finishing Audio app Preview 10:23

In this video we will finish our spanish number app.

Bug in default app and fix Preview 07:34

In this section we will create Scratch and Win Game app and Explore Documentation about Dimensions in react native.

Define the function for game Preview 12:03

In this video we will craft our application and we are gone a project our strategy for this game and define all the functions like( resetGame(),showAllitem(),scratchItemcolor()& generateRandomnumber() ).

Getting functions for ready Preview 12:56

In this video we will write code for all the functions in  Scratch and Win Game app in react native.

Getting the design part and fixes Preview 12:36

In this video we will finish our designing part for this game

Dimensions and Assignment Preview 11:53

In this video we will finish our Scratch and Win game app.

Info property list and manifest permission Preview 05:18

In this Section we will learn about Native app development,we will also cover navigation part & Camera .

Creating a new Camera App (Both front and back camera) clicking some picture with this and show in our app.

Working on multiple screen React navigation Preview 09:25

In this video we will learn how to create multiple screen and how to pass data from one screen to another screen .

Creating your first screen and Navigation Preview 11:06

In this video we will create screen (Home.js) and working with stacknavigator and Appcontainer.

create a follow screen Preview 06:59

In this video we will create one more screen (Follow.js) and learn how to open another screen on button click with the help of stacknavigator and Appcontainer.

Take information to New screen Preview 10:04

In this video we will learn how to pass data from one screen to another screen and how can i reuse one method in second screen which is already define in first screen.

Using information on other screen Preview 12:44

In this video we will catch that data (which is transfer from first screen)  and try to use that data in our applications.

creating photoCliker app Preview 08:29

Moving forward in this section , we will create our camera app using camera API  in react native. This is very simple app just  click a  photo and show that photo in our app.

Design home screen Preview 08:13

In this video we will design our camera app, the design is very simple we will create a button in home screen and when user click on that button the camera should be open in another screen .

Refractroing and Permission Preview 13:53

In this video we will fix some errors and learn how to take permissions in expo.

Flashlight and camera flip Preview 10:02

In this video we will learn how to flip camera and how to switch ON/OFF our flashlight in camera app.

Designing View for camera and bugs Preview 13:51

In this video we are set our view and set action on touchable Opacity .

Thinking process behind debugging Preview 06:41

In this video we are debug our code and resolve all the issues and finish our camera app.

Reading docs for Flastlist and AsyncStorage Preview 07:23

In this section we will learn how to store the data and how to access storage in react native.

we will also learn about new components that is flatlist.

Create 4 screens and Navigate Preview 15:00

In this video we will create four screen (HomeScreen,EditScreen,AddNewContactScreen,ViewContactScreen) and navigate all screen using stacknavigator.

Add a floating action button Preview 08:44

In this video we will learn how to create floating action button on home screen and when user click on that button then we navigate user to next screen using stacknavigator.

Save Data in AsyncStorage Preview 15:38

In this video we will create our constructor() and state in addContactScreen.

we will also create our function for savedata() and save data in AsynStorage.

Design Add contact screen and challenge Preview 12:58

In this video we will design our addcontactscreen using native base, the design is very simple there are some input field and one button.

Assignment solution for scroll Preview 04:56

In this video we will solve issue in scroll view using some tricks.

Get all contact Preview 14:21

In this video we will fetch all  the informations which is store in AsynStorage and display that information in our Home screen.

Using flatlist in Homescreen Preview 06:57

In this video we will learn how to use flatlist in react native .

how to set data in flatlist and how to render item in flatlist.

Fetching info in flatlist Preview 07:40

Moving further ,In this video we will show data in flatlist in home screen and customize our view with the help of native base.

platform specific code Preview 06:08

In this video we will learn how to edit and delete that information which is already store in AsyncStorage,

we will also learn something about platform specific code.

grab key and populate data Preview 08:39

Moving Forward in this section now we will work on ViewContactScreen ,how we can show data in view contact screen.

Open phone indent for iOS and Android Preview 12:20

in this video we will perform some platform specific code & we will also learn how to open dialer and perform calling operation from our app.

Calling SMS intent Preview 04:42

In this video we will call SMS intent from our app.

Debug the app and design Preview 12:08

In this video we will design our ViewContactScreen with the help of native base.so we can perform some action on that.

Adding actions on Phone and SMS Preview 09:52

In this video we trigger that action of call as well as the SMS & We will also work on editContactScreen.

Delete the contact Preview 08:52

In this video we will learn how to delete information from storage in react native

Working on edit screen Preview 10:16

In this video we will working on editContactScreen in our contact app.

update contact with merge operation Preview 06:47

In this video we will learn how to update information in storage in reactnative.

Grande finale of contact app Preview 11:37

Moving forward in this section now in this video we will try to finish our contact app.

Redux theory Preview 10:13

In this video we will learn theoretically concept of redux.

In react native redux is just a state management library.

Never mutate that state Preview 13:05

In this video we will discuss about all the steps in redux

(reducer,store,dispatch,action) and also learn how to connect RN app to redux.

create a basic redux app Preview 09:17

In this video we will create our first basic redux  app.

create store in App.js file.

Design the Reducer Preview 08:01

Moving further in this video we will introduce our reducer ,create reducer in App.js file and pass that reducer in store

Move code in separate file Preview 08:12

In this video we will explore documentation of react-dedux and move code into separate file.

connect and Dispatch Preview 08:41

In this video we will create two functions named as mapStateToProps() and mapDispatchToProps().

mapStateToProps() ->it is called every time the store state. change

Basic Redux App DONE Preview 09:01

In this video we will finish our basic redux app ,

create two method (incCounter and decCounter) and write code for increase counter number and decrease counter number on that method.

Create app and create employee Preview 10:49

In  this section we will again go with redux and create an employee app with redux.

Creating Reducers Preview 10:33

In this video we will create an array of employee with following details like empID,empName and empSalary and we will also create store and reducer then pass the reducer in that store.

Bug in redux app Preview 10:39

In this video we will import provider in our employee app

Bug fix and design Preview 12:56

In this video we will create design for our app  and fix some issues.

Art of debugging Preview 06:51

In this video we will finish our employee app with redux and learn how to debug app in react native.

Exploring API Preview 11:32

In this Section/video we will focusing on API .

Understand the concept of API, how API will works and how we get data from API and show that data in our App.

Understand API and constructor Preview 07:34

In this video we will learn how actually API's are handle and how JSON formatter works

Fetching API in App Preview 07:28

In this video we will create a method for get user data from API using fetch(urlofAPI).

Making a call and wait for it Preview 08:28

In this video we will display the data in our app which is come from API.

Finish app and assignment Preview 17:08

In this video we will grab all the items from API  and show that data in card with some styles and finish our APP.

Exploring firebase react native Preview 06:58

In this Section we are going to talk about react native with firebase,Explore firebase and discuss what is firebase ,why we use firebase in our app.

Firebase project setup Preview 07:22

In this video we are going to configure and will explore some other thing in firebase.

How to create projects in firebase and how to configure that project in firebase.

connect firebase with RN app Preview 07:39

In this video we will start a new app and  connect that app with firebase- Realtime database

creating multiple screens and debug Preview 13:21

In this video we will create four screen (LoadingScreen,LoginScreen,SignUpScreen and HomeScreen).

work on loading screen Preview 07:58

In this video we will work on loading screen ,on that screen first we check user is already logged in or not ,if user is already logged in then we should navigate the user  on home screen else navigate the user  on login screen.

getting exercise files Preview 06:29

In this video first we will download our assets file from our website then discuss about design part of the application.

Design part of sign in screen Preview 10:17

In this video we will design sign-in screen of firebase authentication app.

Design part of Sign up screen Preview 07:47

In this video we will design sign-Up screen of firebase authentication app.

Signup a user at firebase Preview 10:27

In this video we write code for signup the user on firebase using createUserWithEmailAndPassword  method in firebase authentication app.

homescreen design part Preview 06:50

In this video we will design Home screen, on that screen we want to fetch data from firebase and show that data like emailis,userid in simple text format and we also create a button for logout .

signout the user in AuthApp Preview 11:20

In this video we will create a method for logout the user from our app using

Authentication final touch Preview 05:51

In this video we will working on sign-in screen and finish our firebase authentication app.

Exploring firebase database Preview 06:47

In this video we will explore firebase database and try to understand that how firebase database work.

Setting up App and exercise files Preview 05:17

In this video we will setting our project in firebase console and download exercise file for our new app.

Send and get from firebase database Preview 16:47

In this video we will learn how to send and get data from firebase in react native

Design part of message board Preview 11:19

moving further in this section now we will design our message board app with firebase database.

Rules of database in firebase Preview 05:00

In this video we will change database rules on firebase

Getting all files for chat app Preview 10:10

In this video we will create an awesome chat app with firebase database ,

for that first we have to download all the files which is required in this project.

Overwriting initialization Preview 08:27

In this video we will initialize our firebase database in our app.

Firebase Helper part 1 Preview 11:01

In this video we will create a firebase helper class.

Firebase helper class part 2 Preview 06:41

In this video we will write code for credential for connecting firebase database in our app

Creating navigation screens Preview 07:01

In this video we will create multiple screens and navigate that screens in our app.

creating home screen Preview 09:19

moving forward in this section now we will create and design our home screen of chatting app.

chat screen and debug Preview 12:27

In this video we will work on chat screen and try to finish our chatting app with firebase.

What we will create Preview 04:24

In this video/section we will create an app similar to contact app which we already build with asyncStorage but now we will create app with firebase database and we will also upload and fetch image on/from firebase storage.

Download the start files Preview 06:56

Moving further in section first we have to download our starter file from www.learncodeonline.in/reactnative

Understand the project Preview 10:11

In this video we will try to understand how project will work and TODO some tasks like (import screen, initialize firebase)

Working app js file Preview 05:04

In this video we will work on App.js file and write code for how to navigate between screen ,import firebase in our app.

uuid and blobs Preview 08:20

In this video we will work on  AddNewContactScreen and read concept about uuid (how we generate unique id ,why we generate ) and also discuss about image upload to firebase storage.

Upload and download images to firebase storage Preview 16:37

In this video we will learn how to pickup image from storage then upload that image into firebase storage and how to get image from firebase stotrage and show that image in our app.

Saving contact to firebase Preview 09:20

In this video we are going to work on saveContact() method ,so in this video we will learn  how to upload contact details and image link (which we upload on firebase storage) on firebase database.

Working on Homescreen for firebase Preview 14:22

In this video we will work on Home screen.

we will getcontactdetails from firebase database and show that details (name,mobilenumber and image )in flatlist with some styles.

delete contact from firebase Preview 08:09

In this video we will learn how to delete data from firebase database

work on view contact Preview 05:42

In this video we will work on viewScreen.js ,on that screen we will learn how to show particular contact details in ViewScreen and perform some action on that like CALL,SMS...

editscreen selection of images Preview 11:50

In this video we will learn how to edit contact details ,image and update that details into firebase database

uploading new contact in existing key Preview 09:51

In this video we will learn how we upload new contact on firebase with existing key.

lets debug Preview 11:21

In this video we will debug our Contact app and try to finish our contact app with firebase.

Thanks note Preview 00:07

Thanks for taking this course.

We are really happy to serve you this course.

Take a look at our other amazing courses and we are sure to catch you up later!