{"id":17043036,"url":"https://github.com/hectahertz/intro-to-react-native","last_synced_at":"2025-09-06T04:41:47.126Z","repository":{"id":82492309,"uuid":"111077523","full_name":"hectahertz/intro-to-react-native","owner":"hectahertz","description":"Materials for my Introduction to React Native Workshop 👨🏻‍💻","archived":false,"fork":false,"pushed_at":"2018-04-06T07:31:14.000Z","size":1640,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-26T09:44:52.933Z","etag":null,"topics":["demo-app","expo","firebase","firebase-auth","firebase-realtime-database","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hectahertz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-17T08:23:36.000Z","updated_at":"2025-02-20T23:01:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"5151e8cd-3fce-4926-ad8c-0dd5d94d207f","html_url":"https://github.com/hectahertz/intro-to-react-native","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hectahertz%2Fintro-to-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hectahertz%2Fintro-to-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hectahertz%2Fintro-to-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hectahertz%2Fintro-to-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hectahertz","download_url":"https://codeload.github.com/hectahertz/intro-to-react-native/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586231,"owners_count":21128997,"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":["demo-app","expo","firebase","firebase-auth","firebase-realtime-database","react-native"],"created_at":"2024-10-14T09:27:32.606Z","updated_at":"2025-04-12T15:10:40.836Z","avatar_url":"https://github.com/hectahertz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Materials for my Introduction to React Native Workshop\n\n## Environment setup\n\n### Basic requirements\nIf you just want to run apps through Expo on your physical device, these will be enough:\n\n* [Node via NVM](https://github.com/creationix/nvm#installation)\n* [Brew](https://yarnpkg.com/lang/en/docs/install/)\n* [Yarn](https://yarnpkg.com/lang/en/docs/install/)\n* [Watchman](https://facebook.github.io/watchman/docs/install.html) (recommended method: `brew install watchman`)\n* [create-react-native-app](https://facebook.github.io/react-native/docs/getting-started.html) (recommended method: `npm install -g create-react-native-app`)\n\n### To run apps in an emulator\nIf you also want to run apps through Expo in an emulator, you'll need to set it up\n\n* iOS Emulator: Install Xcode [via the Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12)\n* Android Emulator: Follow the [Android development environment instructions for React Native](https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment)\n\n## Demo App\n\nThe Demo App included in the repository is meant to be used as a reference in a 2h workshop to illustrate basic React Native \u0026 Firebase concepts.\n\n* [Login screen](screenshots/Login.png)\n* [Tweets screen](screenshots/Tweets.png)\n* [Script](script.md)\n\n### Reference links\n* [React Native docs](https://facebook.github.io/react-native/docs/getting-started.html)\n* [Expo docs](https://docs.expo.io/versions/latest/index.html)\n* [Expo Vector-icons catalog](https://expo.github.io/vector-icons/)\n* [Color palette for the app](https://coolors.co/1dcaff-0084b4-00aced-c0deed-ffffff)\n* [KeyboardAvoidingView](https://facebook.github.io/react-native/docs/keyboardavoidingview.html)\n* [React Navigation](https://reactnavigation.org)\n* [Hello world navigation](https://reactnavigation.org/docs/intro/basic-app)\n* [Expo Firebase instructions](https://docs.expo.io/versions/latest/guides/using-firebase.html)\n* [Firebase web sign in](https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInWithEmailAndPassword)\n* [Navigation props](https://reactnavigation.org/docs/navigators/navigation-prop)\n* [Firebase web read/write](https://firebase.google.com/docs/database/web/read-and-write)\n\n### Some other awesome libraries!\n\n* react-native-dropdownalert\n* react-native-firebase\n* react-native-gifted-chat\n* react-native-image-crop-picker\n* react-native-swiper\n* react-native-vector-icons\n\n### Firebase setup for the demo project\n\n* Create a new app\n* Get your credentials and add them in the adapter\n* Enable email/password login\n* Register some users\n\n```\nuser1@demo.com // password\n...\nuser5@demo.com // password\n```\n\n* Starting DB Shape\n\n\n```javascript\n{\n  \"tweets\": {\n    \"-KzIr3nG4akj5U5NvCob\": {\n      \"text\": \"Tweet!\",\n      \"uid\": \"lD29Ihlo59TKjZZVmU7pfODAcvG2\"\n    }\n  },\n  \"users\": {\n    \"lD29Ihlo59TKjZZVmU7pfODAcvG2\": {\n      \"avatar\": \"https://randomuser.me/api/portraits/men/81.jpg\",\n      \"name\": \"Ricky Neal\",\n      \"username\": \"rickyneal\"\n    }\n  }\n}\n```\n\n* Security rules\n\n```javascript\n{\n  \"rules\": {\n    \".read\": \"auth != null\",\n    \".write\": \"auth != null\",\n    \"tweets\": {\n      \"$tweet\": {\n        // new messages must have a string text and a string uid\n        \".validate\": \"newData.hasChildren(['text', 'uid']) \u0026\u0026 newData.child('text').isString() \u0026\u0026 newData.child('uid').isString()\",\n        // the uid must match the authenticated user\n        \"uid\": {\n           \".validate\": \"newData.val() === auth.uid\"\n        },\n      }\n    }\n  }\n}\n```\n\n## License\n\n[![Creative Commons License](https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png)](http://creativecommons.org/licenses/by-nc-sa/4.0/)\n\nThis work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhectahertz%2Fintro-to-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhectahertz%2Fintro-to-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhectahertz%2Fintro-to-react-native/lists"}