React Native C53 – C96

C53 ReactNative Philosophy

We learned about render and return function and basics of App component
using snack.expo.

C54 Wireless Buzzer App

 We learned how to use a button component
 ‘OnPress’ function
 Alert box
 Creating a button using touchable opacity

C55 Sound
We added sound function to the button using a API link

C56 Structuring React Code

 We learned how to use import and export of custom react native
components
 We created different files for parts of code
 We learned how to use StyleSheets

C57 Switch Navigator

The purpose of SwitchNavigator is to only ever show one screen at a time. By
default, it does not handle back actions and it resets routes to their default state
when you switch away. We used it during moving from Team Screen to the
Buzzer Screen.
C58 React Native Databases
We created a Realtime database in which we recorded the time stamp of each
team when the buzzer is pressed.
 We used Config.js to link the database with the code

C59 Component Lifecycle and State

A React Component has the following stages in its lifecycle:
● Mounting: This is when the react components are created and rendered on the
screen.
● Updating: This is when the components are updated. For example: Their prop
values are changed.
● Unmounting: This is when the components are removed from the screen
Each lifecycle has a certain methods defined on them.
DOCUMENT REFERENCE: https://reactjs.org/docs/react-component.html
REFERENCE CODE: https://snack.expo.dev/@whitehatjr/pro-c59-teacher-activity-1-reference:-
component-lifecycle-and-state

C60 Quiz Master App

 We used sort method and Compare function to know who is pressing first
 We used map method to display the team names on the app
 We created a Reset button to reset the database

REFERENCE CODE: https://snack.expo.dev/@whitehatjr/pro-c60-quiz-master-app

C61 Fixing Bugs on the Buzzer App

 We fixed the timestamp bug
 We made the buttons inactive once the team is chosen
C62 Capstone class: App Publishing and Local
Environment Setup
We used the command prompt to launch our app in a mobile phone or web
browser.
Reference Link: https://docs.expo.dev/
Reference Link: https://nodejs.org/en/
Reference Code: https://snack.expo.dev/@rajeevtfi/3eff2d

C63 Monkey-Chunky App : A case study

 The app is used to Breakdown words and Show the pronunciation of the
word
 We designed a wireframe for the app
 We collected information from the user and displayed it.
Reference Link: https://reactnativeelements.com/docs/
Reference Link: https://reactnative.dev/docs/textinput
Reference Code: https://snack.expo.dev/@rajeevtfi/monkey-chunky-stage-1:-reference

C64 Accessing data from local files

 We created a local DB which contained the break-up of the words
 We used import and export of data from local files
 Display smaller chunks using map method
Reference Code: https://snack.expo.dev/@rajeevtfi/monkeychunky-stage2--reference

C65 Adding Phonic sounds

We designed a PhonicButton component which takes a chuck of word a plays
the Sound.
C66 Ternary Operators
We learned about ternary operators.

C67 Git and Making Open Source Contributions

Student learns to practically use advanced features of git versioning tools -

staging, branching, merging, comparing, resetting etc. through writing a story.
Student also learns how to contribute to open source projects on github using
git.

C68 Wireless Library Management - A case study

 We discussed about The apps wireframe and UI
 We discussed about basic logic of how the app should work
 Tab Navigation

C69 QR Code Scanner

 WE learned how to get permissions to use camera
 Using the BarcodeScanner component to scan a QR code
 We learned to display data from QR code to text component
Reference Link: https://docs.expo.dev/versions/latest/sdk/bar-code-scanner/

https://www.the-qrcode-generator.com/

Reference Code: https://github.com/whitehatjr/e-library-v2-PRO-C69

C70 Automatically populating text input

  We customized the appearance of Bottom Tab
 Designed the input or the issue and return screen
 We wrote code to automatically populate the QR into text

C71 Introduction to Firestore

 We created a Firestore DB and created some collections and documents
 We wrote code to issue or return a book by updating the DB
Reference Link: https://cloud.google.com/firestore/docs/manage-data/add-data
Reference Code: https://github.com/whitehatjr/e-library-PRO-C71

C72 Avoiding Keyboard overlap and Toasts

 We made the text box editable
 Avoid keyboard overlap with text box
 Added a scan button for the QR code
 We added a transaction message when the transaction is completed
Reference Link: https://reactnative.dev/docs/keyboardavoidingview
https://reactnative.dev/docs/toastandroid#__docusaurus

Reference Code: https://github.com/whitehatjr/e-learning-v2-PRO-C72

C73 Firebase Queries

 We made a Firebase query to check if the book is eligible for transaction
 We made a Firebase query if the Student is eligible to make a transaction
 We display a message confirming the transaction of the book
Reference Link: https://firebase.google.com/docs/firestore/query-data/queries
Reference Code: https://github.com/whitehatjr/e-library-v2-PRO-C73

C74 Lazy Loading

 Created a feature in which if a book name is searched and multiple results
are eligible then they will be shown in a stack and the rest will be loaded
only when the screen is scrolled up

 Display transaction using FlatList

 Display Query result using FlatList
 Build Searchbar to search to search for transaction
Reference Link: https://reactnative.dev/docs/flatlist

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

Reference Code: https://github.com/whitehatjr/e-library-v2-PRO-C74

C 75 Authenticating Users
 Create an Authentication page for users to Authenticate
 Create a Firebase authentication service to Authenticate the server
Reference Link: https://firebase.google.com/docs/auth/web/password-auth
Reference Code: https://github.com/whitehatjr/e-library-PRO-C75

C 76 Blueprints and Stack Navigator

 We discussed the Wireframe for ISS app
 We created 3 screens: Home,Meteor Screen,Iss screen
 We added this to Stack navigator
Reference Link: https://reactnavigation.org/docs/navigation-container/
Reference Code:
https://github.com/prowhitehatjr/C76_ISSTracker_TeacherReferenceCode

C77 HomeScreen and Navigation

  We added Animation, Images and buttons

C 78 ISS location
 Whenever we click on the ISS location screen it shows us the location of
ISS in the map
 Display the Latitude, Longitute.etc.
Reference Link: https://www.npmjs.com/package/react-native-maps
Reference Code; https://github.com/pro-whitehatjr/C78_ISSTracker_TeacherReferenceCode

C 79 Meteor Screen1
 Generate the API key
 Get the data using API key
 Calculate the threat score using NASA API
Reference Link: https://api.nasa.gov/
https://api.nasa.gov/neo/rest/v1/feed?api_key=DEMO_KEY

https://jsonformatter.curiousconcept.com/

Reference Code: https://github.com/pro-whitehatjr/C79_ISSTracker_TeacherReferenceCode

C 80 Meteor Screen 2
We learned how to apply Carousel effect to the meteor screen