{"id":21473718,"url":"https://github.com/bell-kevin/usecontextregistration","last_synced_at":"2026-05-04T22:37:30.807Z","repository":{"id":235732008,"uuid":"613545165","full_name":"bell-kevin/useContextRegistration","owner":"bell-kevin","description":"Registration with the useContext hook from React Native","archived":false,"fork":false,"pushed_at":"2026-04-20T22:07:34.000Z","size":5425,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-21T00:19:38.962Z","etag":null,"topics":["android","ios","react-native","usecontext","usecontext-hook"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bell-kevin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/funding.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-03-13T19:29:45.000Z","updated_at":"2026-04-20T22:07:30.000Z","dependencies_parsed_at":"2025-12-18T02:04:55.409Z","dependency_job_id":null,"html_url":"https://github.com/bell-kevin/useContextRegistration","commit_stats":null,"previous_names":["bell-kevin/usecontextregistration"],"tags_count":0,"template":false,"template_full_name":"bell-kevin/kevinBellTemplateRepo","purl":"pkg:github/bell-kevin/useContextRegistration","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bell-kevin%2FuseContextRegistration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bell-kevin%2FuseContextRegistration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bell-kevin%2FuseContextRegistration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bell-kevin%2FuseContextRegistration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bell-kevin","download_url":"https://codeload.github.com/bell-kevin/useContextRegistration/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bell-kevin%2FuseContextRegistration/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32628211,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"ssl_error","status_checked_at":"2026-05-04T10:08:02.005Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","react-native","usecontext","usecontext-hook"],"created_at":"2024-11-23T10:18:35.918Z","updated_at":"2026-05-04T22:37:30.786Z","avatar_url":"https://github.com/bell-kevin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Registration with useContext\n\nAccess to data in a React Native project can be handled by passing props, but that is only one mechanism. Another is to use the useContext, a React application, another is to use the Redux library, and more. You will learn about useContext and Redux in the Udemy videos, but you will be using useContext in the rest of this course. After watching a brief introduction about useContext (https://piped.video/watch?v=Hu5lB21Wf5k), which was implemented in a React project, practice the concepts in a React Native project here.\n\nYou previously created a project to practice stack navigation, which had a home page and 3 color pages. You need navigation to move between screens to practice using context, so you will use that color project as the starting point here. MAKE A COPY of that previous project.\n\nIn this project, you will create a very simple registration verification. If a user had entered data about their name, email, and phone, this app would ask them to verify that data. It doesn't have any mechanism for actually responding, to verify or change, that may happen later. It provides a basic experience with context.\n\n### Preparation\n\nDo some housekeeping first. Remove the images on the 3 color pages. In the navigation setup, change the names of the screens to \"Registration\" for the home screen, and \"Name\", \"Phone\", and \"Email\" for the other 3 pages. In the Home screen, be sure to change the navigation to use those names, rather than the color names from the previous project. The titles on each page also need to change to \"Registration\", \"Name\", \"Phone\", and \"Email\". On each color page, display a header that says \"Verify your (name/phone/email)\", and display text below that shows that data from the context.\n\n![p](https://github.com/bell-kevin/useContextRegistration/blob/main/readMeExamplePictures/context-register.PNG) ![p](https://github.com/bell-kevin/useContextRegistration/blob/main/readMeExamplePictures/context-name.PNG)\n\n![p](https://github.com/bell-kevin/useContextRegistration/blob/main/readMeExamplePictures/context-phone.PNG) ![p](https://github.com/bell-kevin/useContextRegistration/blob/main/readMeExamplePictures/context-email.PNG)\n\nNotice that the header on the screen (in the gray section at the top) specifies the data for verification (name, phone, email).\n\n### Set up the Context\n\nCreate a folder in the project named \"context\", and a file in that folder named \"userContext.js\". In the intro video, the context was defined in the App.js file -- here, it will be in its own file. In that file, import createContext from React. This file will contain the definition of the structure of the data for this context. Use createContext to declare an object with the fields \"firstName\", \"lastName\", \"phone\", and \"email\". Declare them with null strings. Create this context in the constant variable UserContext, and export it, similar to the intro video. That code in the userContext.js file is:\n\n![p](https://github.com/bell-kevin/useContextRegistration/blob/main/readMeExamplePictures/context-declare.PNG)\n\n### App.js File\n\nIn that video, the content of the context is a single variable, \"name\", which was set with App.defaultProps. In your project, in App.js, declare a constant variable named \"initialState\", which assigns values to the fields in the object of the context. Use your own first and last names; you can use your own phone number and email, or make it up, for those fields. In the example shown here, that code in the App.js file is:\n\n![p](https://github.com/bell-kevin/useContextRegistration/blob/main/readMeExamplePictures/context-setup.PNG)\n\nTo make the context \"globally\" available, wrap the stack navigator with the context provider component. The file has a NavigationContainer, then a Stack Navigator. Put the Provider between those, so that everything in the stack has access to the context. The Provider requires a \"value\" parameter -- use the initialState variable for that value. See the code for the App.js file in the intro video for guidance.\n\n### Three files\n\n In each of the color files, import useContext from React, and import UserContext from its file, userContext.js. In the function for the file, declare a context variable with useContext. For example, if working in the file about names, use the firstName and lastName values in the context. The variable that uses the context might be named \"userNameCtx\" -- that \"ctx\" helps to identify this as the context, not the actual names. It would look like this to declare the variable that accesses the context:\n\n    const userNameCtx = useContext(UserContext);\n\nDisplay the first name with code like this:\n\n    {userNameCtx.firstName}\n\nDisplay the appropriate text and context values on each of the three screens.\n\nNote: You may change the colors on each page if you wish, for example, making each one the same color. You may not use black text on white background.\n\n \n\nTake 4 screenshots, as shown above.\n\nSubmission: Zip together the root folder and the 4 screenshots, and submit the single zipped folder.\n\n![p](https://github.com/bell-kevin/useContextRegistration/blob/main/screenshots/1.PNG)\n\n![p](https://github.com/bell-kevin/useContextRegistration/blob/main/screenshots/2.PNG)\n\n![p](https://github.com/bell-kevin/useContextRegistration/blob/main/screenshots/3.PNG)\n\n![p](https://github.com/bell-kevin/useContextRegistration/blob/main/screenshots/4.PNG)\n\n![p](https://github.com/bell-kevin/useContextRegistration/blob/main/screenshots/5.PNG)\n\n![p](https://github.com/bell-kevin/useContextRegistration/blob/main/screenshots/6.PNG)\n\n![p](https://github.com/bell-kevin/useContextRegistration/blob/main/screenshots/7.PNG)\n\n![p](https://github.com/bell-kevin/useContextRegistration/blob/main/screenshots/8.PNG)\n\n## How to:\n\nCreate 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:\n\nhttps://code.visualstudio.com/download\n\nhttps://developer.android.com/studio\n\nIf you want to see how your app. will look on iOS (Apple) devices, you'll need Xcode from the Apple app. store:\n\nhttps://developer.apple.com/xcode/\n\nTo run the Xcode app, you'll need a fairly new Apple computer.\n\nhttps://reactnative.dev/docs/environment-setup\n\nhttps://reactnative.dev/docs/components-and-apis\n\nhttps://reactnative.dev/docs/intro-react\n\nCheck out App.js here in the code files for the computer algorithm code.\n\n## Storing Projects\n\nWhen 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.\n\nBUT -- 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?\n\nThat 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.\n\nThis 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.\n\nNote that when you delete that folder, it takes a noticeable amount of time, far more than it takes to reload it.\n\nA 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.\n\n== We're Using GitHub Under Protest ==\n\nThis project is currently hosted on GitHub.  This is not ideal; GitHub is a\nproprietary, trade-secret system that is not Free and Open Souce Software\n(FOSS).  We are deeply concerned about using a proprietary system like GitHub\nto develop our FOSS project. I have a [website](https://bellKevin.me) where the\nproject contributors are actively discussing how we can move away from GitHub\nin the long term.  We urge you to read about the [Give up GitHub](https://GiveUpGitHub.org) campaign \nfrom [the Software Freedom Conservancy](https://sfconservancy.org) to understand some of the reasons why GitHub is not \na good place to host FOSS projects.\n\nIf you are a contributor who personally has already quit using GitHub, please\nemail me at **bellKevin@pm.me** for how to send us contributions without\nusing GitHub directly.\n\nAny use of this project's code by GitHub Copilot, past or present, is done\nwithout our permission.  We do not consent to GitHub's use of this project's\ncode in Copilot.\n\n![Logo of the GiveUpGitHub campaign](https://sfconservancy.org/img/GiveUpGitHub.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbell-kevin%2Fusecontextregistration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbell-kevin%2Fusecontextregistration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbell-kevin%2Fusecontextregistration/lists"}