Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bell-kevin/stacknavigationcolors
Stack navigation to display a home screen which has buttons to go to 3 other screens
https://github.com/bell-kevin/stacknavigationcolors
android ios react-native stack-navigation
Last synced: about 1 month ago
JSON representation
Stack navigation to display a home screen which has buttons to go to 3 other screens
- Host: GitHub
- URL: https://github.com/bell-kevin/stacknavigationcolors
- Owner: bell-kevin
- License: agpl-3.0
- Created: 2023-03-09T15:26:57.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-30T01:27:37.000Z (5 months ago)
- Last Synced: 2024-07-30T05:58:26.225Z (5 months ago)
- Topics: android, ios, react-native, stack-navigation
- Language: JavaScript
- Homepage:
- Size: 6.85 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Stack Navigation - Colors
In the tutorial, you encountered a lot of topics about navigation. This project focuses on only 1 type -- stack navigation. You will use stack navigation to display a home screen which has buttons to go to 3 other screens. To keep it simple, the project is about colors; the other screens display different colors and an appropriate picture. The color screens have a background color and a text color from the same color family. Here are examples:
 
 
None of the pages has a white background or black text. The home page has buttons to navigate in a stack to the specified screen. The 3 buttons are the same width, with space between them. Each color screen has a Back button in the header, automatically provided by the stack navigator. The background color is specified in the text; that text is bold weight, in the color family of the screen (see above). To practice using images, add an image that displays the color of the page on each color page. You may pick the 3 colors and the images for the pages. The images must be local assets. The header for all screens has a background color that is not white, text color that is not black, and bold font weight.
You may find it helpful to check the documentation about React Native buttons, and React Navigation. There are lots of images at unsplash.com.
Take 4 screenshots, as shown above.
Submission: Zip together the root folder and the 4 screenshots, and submit the single zipped folder.
 
 
https://reactnative.dev/docs/navigation
## 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.
## Reading: 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](https://bellKevin.me) 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](https://GiveUpGitHub.org) campaign
from [the Software Freedom Conservancy](https://sfconservancy.org) 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.
