{"id":21473742,"url":"https://github.com/bell-kevin/technologyquote","last_synced_at":"2026-05-10T05:46:21.580Z","repository":{"id":235733855,"uuid":"605269858","full_name":"bell-kevin/technologyQuote","owner":"bell-kevin","description":" React Native app project to display a technology quote when a button is pressed","archived":false,"fork":false,"pushed_at":"2025-01-22T03:48:24.000Z","size":3023,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T04:26:46.727Z","etag":null,"topics":["android","ios","react-native"],"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":null,"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}},"created_at":"2023-02-22T20:07:18.000Z","updated_at":"2025-01-22T03:48:22.000Z","dependencies_parsed_at":"2024-07-30T05:58:43.256Z","dependency_job_id":"18f87e99-2d37-4362-86ed-11f006163e24","html_url":"https://github.com/bell-kevin/technologyQuote","commit_stats":null,"previous_names":["bell-kevin/technologyquote"],"tags_count":0,"template":false,"template_full_name":"bell-kevin/kevinBellTemplateRepo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bell-kevin%2FtechnologyQuote","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bell-kevin%2FtechnologyQuote/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bell-kevin%2FtechnologyQuote/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bell-kevin%2FtechnologyQuote/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bell-kevin","download_url":"https://codeload.github.com/bell-kevin/technologyQuote/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243990547,"owners_count":20379810,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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"],"created_at":"2024-11-23T10:18:42.298Z","updated_at":"2026-05-10T05:46:21.524Z","avatar_url":"https://github.com/bell-kevin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Project: Technology Quote\n\nCreate a new React Native app project to display a technology quote when a button is pressed. That quote is: \n\n\"...as technology advances, it becomes more complex and difficult to understand, to the point where it can appear almost magical to those who don't understand it. -- ChatGPT\"\n\nHere are screenshots showing the launch of the app, and the result after pressing the button:\n\n![p1-tech-quote-launch.PNG](https://github.com/bell-kevin/technologyQuote/blob/main/readMePictures/p1-tech-quote-launch.PNG)\n\n![p1-tech-quote-run.PNG](https://github.com/bell-kevin/technologyQuote/blob/main/readMePictures/p1-tech-quote-run.png)\n\n## Background\n\nIn the video tutorial, you saw how to use the onPress() property of a button to respond to the press of that button. In this project, when the button is pressed, the text displayed above it changes. In the tutorial, you used \"useState\" to get the user input from the text input. In this project, you will use \"useState\" to track what data is displayed on the screen. \n\nThe screen is very simple -- a Text component that displays a text variable, and a Button component that the user presses to display some different text. Using state, the text variable can have an initial value that tells the user to press the button, which will display when the app is launched. When the button is pressed, its onPress function calls the useState function that changes the text variable. Because the state changed, the screen will be rendered again, and the new text will be displayed.\n\nHere is a look at that code:\n\n   // declare a variable with useState\n   const [outputText, setOutputText] = useState(\"Press The Button\");\n   // function to change the state when button is pressed\n   function pressHandler() {\n   setOutputText(\"Hello World!\";\n   }\n   // display the screen\n   \u003cText\u003e{outputText}\u003c/Text\u003e  // this is re-rendered when the state of outputText changes\n   \u003cButton title=\"Display Text\" onPress={pressHandler} /\u003e\n\nWith this coding, the screen would appear with the initial state of the output text variable (on the left) and render again with the changed output text after the button is pressed (on the right):\n\n![ButtonStart.PNG](https://github.com/bell-kevin/technologyQuote/blob/main/readMePictures/ButtonStart.PNG)     \n\n![ButtonEnd.PNG](https://github.com/bell-kevin/technologyQuote/blob/main/readMePictures/ButtonEnd.PNG)\n\n## Your Project\n\nWhen the project launches, It should display \"Press Button for Technology Quote\", and when the button is pressed, display the quote provided above. Set the style for the overall screen to use a different background color than white. Add another style for the quote, which adds padding between the text and the button, adds style to the text, and use a width of 80% so the text appears more centered above the button. \n\nIn this example, the background color for the app is \"tan\".  The font size was set to 24 and the font weight to \"bold\". There is padding on the bottom of the text of 18, to put some space between the text and the button. The width of the text is 80%, so the text doesn't touch the left and right edges. The text is center-aligned. Remember that the text is styled using JavaScript -- use the new-line characters of \"\\n\" to make sure the phrases \"Technology Quote\" and \"-- ChatGPT\" start on new lines.\n\nYour choices: background color (cannot be white), font size, font weight, amount of space between text and button (minimum value is 18), width of the quoted text (maximum value is 80%).\n\nTake 2 screenshots as shown above.\n\nSubmission: Zip together the root folder and the 2 screenshots, and submit the single zipped folder.\n\n![p](https://github.com/bell-kevin/technologyQuote/blob/main/screenShots/Capture.PNG)\n\n![p](https://github.com/bell-kevin/technologyQuote/blob/main/screenShots/2.PNG)\n\nOur understanding of the world around us is limited by our knowledge and experience, and that as technology advances, we may need to adjust our understanding of what is possible and what is not.\n\nhttps://reactnative.dev/docs/environment-setup\n\n### Reading: \n\nStoring 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.\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%2Ftechnologyquote","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbell-kevin%2Ftechnologyquote","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbell-kevin%2Ftechnologyquote/lists"}