Skip to content

bell-kevin/reactNativeFinalProject2730

React Native Final Project S DEV 2730 Davis Tech.

Create a final project that demonstrates skills you've learned in this course. It must contain at least 4 screens which use at least 2 navigation schemes (stack, tab, drawer). The program must use at least 3 hooks: useContext, useState, useReducer, useEffect, useLayoutEffect are some of the hooks you've used in the Udemy tutorial for various purposes. There must be a database to store some data, with functionality to add new data and to delete data. There must be user authentication to access all the functionality. The app must access the camera and images, and mapping functionality. All screens must have style, with colors, margins, padding, centering, etc., so the screens have a professional look.

The screens must be connected logically, making an integrated app. This means you can't put a mapping screen in just to have a map -- there must be a reason for the map within your app.

The possibilities for this app are huge, but if you are struggling, you might consider these:

An About Me app, with pages for your favorite places, favorite foods, favorite music, favorite video games, other favorite things. Any of these could have images or stored data, and user authentication for friends who can access the app.

A business app for a business of your choice, such as a lawn care business, auto repair business, baking business, etc. These could have screens for images of products, data for prices and descriptions of services or products, with user authentication for customers to access the business.

A travel app which lists places you have traveled or where you want to travel. This would use maps, and could have data for descriptions, plans, schedules, hotels, restaurants, and more, with user authentication for others who can have access to your travel information.

You are not limited to the attributes shown in the Udemy course. If you have time and interest, you can look up Date and Time Pickers and add some scheduling to the app, or AV (audio / visual) components to add sound and/or video to the app. You must include the required elements listed, but you may add more.

Make a list that specifies where each element is found in your app -- which navigation schemes did you use, and where are they available, where each hook is found, where the database is referenced, where adding to and deleting from that database is found, where maps are used. This helps you to make sure you have included all of the necessary elements, and helps grading to be able to find all the elements.

Be sure to go through the rubric carefully for details.

Submission: screenshots that show the functionality of all screens, the root folder of the project, and the list detailing where to find each required element

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

https://reactnavigation.org/docs/nesting-navigators/#navigating-to-a-screen-in-a-nested-navigator

https://ionic.io/ionicons

How to:

Create one app. for both Android and iOS (Apple) using one computer alorithm for both apps. You'll need Visual Studio Code and Android Studio to get started:

https://code.visualstudio.com/download

https://developer.android.com/studio

If you want to see how your app. will look on iOS (Apple) devices, you'll need Xcode from the Apple app. store:

https://developer.apple.com/xcode/

To run the Xcode app, you'll need a fairly new Apple computer.

https://reactnative.dev/docs/environment-setup

https://reactnative.dev/docs/components-and-apis

https://reactnative.dev/docs/intro-react

Check out App.js here in the code files for the computer algorithm code.

Storing Projects

When you complete a React Native project, you should keep it on your storage device for a little while. There are multiple instances where one project will be the basis of another project. The Udemy course keeps building on the projects, so you definitely need to keep those around until you are done with that project in the course.

BUT -- React Native projects are huge. There is a folder, node_modules, that takes up most of the space. If you keep every project you create in this course, you would need at least 20GB of space, probably more. How can you manage this terrible drain on your storage?

That node_modules folder is automatically added when you create a new project. Once you are done with the project, you can delete that folder, node_modules, and the size of your project will shrink dramatically.

This does not destroy the project. If you find you need to run an old project again, which no longer has its node_modules folder, open it in Visual Studio Code, open a terminal, and type "npm install". This will load the node_modules folder again, and the project is whole and ready to run.

Note that when you delete that folder, it takes a noticeable amount of time, far more than it takes to reload it.

A good practice for course maintenance is to keep the project in its full state until you are sure you won't be using it in the next few days, then delete the node_modules folder.

== We're Using GitHub Under Protest ==

This project is currently hosted on GitHub. This is not ideal; GitHub is a proprietary, trade-secret system that is not Free and Open Souce Software (FOSS). We are deeply concerned about using a proprietary system like GitHub to develop our FOSS project. I have a website where the project contributors are actively discussing how we can move away from GitHub in the long term. We urge you to read about the Give up GitHub campaign from the Software Freedom Conservancy to understand some of the reasons why GitHub is not a good place to host FOSS projects.

If you are a contributor who personally has already quit using GitHub, please email me at [email protected] for how to send us contributions without using GitHub directly.

Any use of this project's code by GitHub Copilot, past or present, is done without our permission. We do not consent to GitHub's use of this project's code in Copilot.

Logo of the GiveUpGitHub campaign

(back to top)