{"id":15606247,"url":"https://github.com/tb/rn-intro-workshops","last_synced_at":"2025-08-10T12:08:10.144Z","repository":{"id":137884064,"uuid":"128835530","full_name":"tb/rn-intro-workshops","owner":"tb","description":null,"archived":false,"fork":false,"pushed_at":"2018-04-10T14:10:50.000Z","size":776,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T05:44:52.764Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"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/tb.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":"2018-04-09T21:23:50.000Z","updated_at":"2018-04-10T14:10:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"7dcb38d6-5f69-4991-85ec-edcfde8f942c","html_url":"https://github.com/tb/rn-intro-workshops","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tb/rn-intro-workshops","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tb%2Frn-intro-workshops","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tb%2Frn-intro-workshops/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tb%2Frn-intro-workshops/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tb%2Frn-intro-workshops/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tb","download_url":"https://codeload.github.com/tb/rn-intro-workshops/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tb%2Frn-intro-workshops/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269720441,"owners_count":24464286,"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","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-10-03T04:21:42.615Z","updated_at":"2025-08-10T12:08:10.118Z","avatar_url":"https://github.com/tb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Introduction\n\n## Setup\n\n* Clone repository\n* `yarn install`\n* Link `react-native-vector-icons` package with `react-native link react-native-vector-icons` command.\n\nFor easier styling and development of some basic features App is using\n[react-native-paper](https://callstack.github.io/react-native-paper/).\n\n## Step I - Components\n\nIn React-Native we can't use any `html` tag. Use native components instead:\n\n```js\nimport { Text, View } from 'react-native'\n\n\u003cspan /\u003e \u003cp /\u003e ~~ \u003cText\u003e\n\u003cdiv /\u003e ~~ \u003cView\u003e\n```\n\nTODO:\n\n* Run project by typing `react-native run-ios` in console\n* Write your first component using components from `react-native-paper` and use it in `App.js`\n\n## Step II - Lists\n\nWe usually can do some listing in our app. ReactNative supports some listings.\nWe can use `FlatList` and `SectionList` directly from RN package\n\nFlatList is basic `ScrollView` which renders data provided from props.\nSectionList in addition can split them with separator\n\n```js\nimport { FlatList, SectionList } from 'react-native'\n```\n\nDocs:\n\n* [FlatList](https://facebook.github.io/react-native/docs/flatlist.html)\n* [SectionList](https://facebook.github.io/react-native/docs/sectionlist.html)\n\nTODO:\n\n* Create component for `FlatList`, import `flatListData` from `./assets`\n* Use properly `FlatList` component, use it in `App.js`, and Style It! :)\n* Repeat with `SectionList`\n\n## Step - III Navigation\n\nFor navigating through app scenes we can use a packages,\nwhich provides us configured and working solutions for our app:\n\n* `react-navigation`\n* `react-native-navigation`\n\nWe will use [react-navigation](https://reactnavigation.org/docs/getting-started.html),\nas it is much simpler and the implementation in app is in pure JS.\nIt contains three different navigators with which we can build entire application:\n\n* StackNavigator for basic navigating from scene to scene\n* TabNavigator for navigation with TabBars which mostly is sticked to the bottom of our device\n* DrawerNavigator is mostly used as menu because you can \"open\" it by swiping from frame (left/right)\n\nFor our case we will use `StackNavigator` with some basic configuration.\n\n### TODO:\n\n* `yarn add react-navigation`\n* Create some views with buttons, after clicking will redirect into another view\n* Create Navigator file (StackNavigator)\n* Add possibility to navigate by clicking\n\n## Step IV - Manual linking\n\nIn React Native sometimes we have to use native code like Java or Objective-C\nwith proper bindings to our application so we are linking them to include in application build (.apk, .ipa).\nThere are 2 approaches to do that:\n\n* `react-native link \u003cpackageName\u003e` - This links package to project automatically.\n* Sometimes we have to do this manually because `react-native link` do not work properly with every package. So we have to follow [Instructions](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking)\n\n### TODO:\n\n* `yarn add react-native-notifications`\n* Link `react-native-notifications` by manual linking\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftb%2Frn-intro-workshops","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftb%2Frn-intro-workshops","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftb%2Frn-intro-workshops/lists"}