{"id":25421776,"url":"https://github.com/rodrigoelp/reactnative-typescript-exercise-4","last_synced_at":"2026-04-16T08:36:55.471Z","repository":{"id":137673971,"uuid":"112838920","full_name":"rodrigoelp/reactnative-typescript-exercise-4","owner":"rodrigoelp","description":"Exploration of navigation between screens, passing arguments back and forth between each.","archived":false,"fork":false,"pushed_at":"2017-12-05T03:00:46.000Z","size":138,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-13T19:22:25.890Z","etag":null,"topics":["android","ios","learning","learning-by-doing","react-native","react-navigation","stacknavigator","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/rodrigoelp.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,"zenodo":null}},"created_at":"2017-12-02T12:05:05.000Z","updated_at":"2019-07-11T06:40:35.000Z","dependencies_parsed_at":"2024-03-26T07:00:18.280Z","dependency_job_id":null,"html_url":"https://github.com/rodrigoelp/reactnative-typescript-exercise-4","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rodrigoelp/reactnative-typescript-exercise-4","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigoelp%2Freactnative-typescript-exercise-4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigoelp%2Freactnative-typescript-exercise-4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigoelp%2Freactnative-typescript-exercise-4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigoelp%2Freactnative-typescript-exercise-4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rodrigoelp","download_url":"https://codeload.github.com/rodrigoelp/reactnative-typescript-exercise-4/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigoelp%2Freactnative-typescript-exercise-4/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31878268,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T07:36:03.521Z","status":"ssl_error","status_checked_at":"2026-04-16T07:35:53.576Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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","learning","learning-by-doing","react-native","react-navigation","stacknavigator","typescript"],"created_at":"2025-02-16T20:50:09.536Z","updated_at":"2026-04-16T08:36:55.467Z","avatar_url":"https://github.com/rodrigoelp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Learning about Navigation\n\nThe previous exercise was a failure to me... End up with more questions than answers.\n\nBack to square one, let's not take too many things for granted and read the [documentation](https://facebook.github.io/react-native/docs/navigation.html)\n\nIt seems there is a `Navigator` already provided with `react-native`... so, why isn't the documentation highlighting it?\n\nI am going to split this exercise into two parts:\n\n*Part 1* Write the app just using the navigator bundled with `react-native`. Check its benefits and write them down.\n\n*Part 2* Rewire the app with `react-navigation` and check what I had wrong from the previous exercise as I could not get to work the update of list of todos. Check its benefits and write them down.\n\n## Part 1: Using the `Navigator` of `react-native`\n\nCheck git history to check for the implementation.\n\nThe short story is: once the code is written and compiled, when you run the code you get a nice red screen telling you the `Navigator` is depricated and you should be using `react-navigation` or `react-native-navigation`...\n\n... Sigh.\n\n### Benefits\n\n- Given it has been depricated. None.\n\n## Part 2: Using [`react-navigation`](https://reactnavigation.org/docs/intro/)\n\nGetting started with this library was not difficult. The documentation is superb and all you need to do is to check your types as you declare some of the components used on the samples.\n\nOnce you have installed the npm module `react-navigation` as illustrated below, you will need to create a `StackNavigator` (or a `TabNavigator`) and provide the route and initial state for it to load the first component. In my case, it is going to be a `StackNavigator` to start with.\n\n```sh\n$\u003e npm install --save react-navigation @types/react-navigation\n```\n\nCheck the [`app.tsx`](./src/app.tsx) file containing this wired up (_I've described everything there_).\n\nThankfully, the author of the type definition for `react-navigation` was kind enough to provide [tests](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-navigation/react-navigation-tests.tsx) that were a great guide for me to understand what type I needed to provide and how to get it to work (the reset part I mean).\n\n### Notes: Going back\n\nNot complaining about `navigator.goBack()`, but I do think reset to root or navigate to root should be a method exposed by the api.\n\nHopefully I will not forget these learning when applying it to my personal projects.\n\n## Trying out [`react-native-navigation`](https://wix.github.io/react-native-navigation/#/)\n\nI had a little play (did not push this code up) with `react-native-navigation`, which has a pretty good documentation as far as I could see. Had to write the sample app in javascript as right at this moment does have a type definition file that I can easily import (maybe it does not follow the `@types/react-native-navigation` convension).\n\nNow, configuring this library with your project is not as easy as `react-navigation`. You will need to do some change in **xcode** and **android studio** for it to work.\n\nA comprehensive description is found here: [iOS installation](https://wix.github.io/react-native-navigation/#/installation-ios) and here [Android installation](https://wix.github.io/react-native-navigation/#/installation-android)\n\n**This made me consider that I need to spend some time understanding how to create these type definition files and how easy it will be to write it myself.**\n\n## I want to play with this code\n\nHere is a script you could use to set you up (written for terminal/osx).\n\n```sh\n# Cloning the repo to 'todos'\ngit clone git@github.com:rodrigoelp/reactnative-typescript-exercise-4.git navscreen\n# Changing directory\ncd navscreen/\n# Installing dependencies\nyarn # if you have not installed yarn, then change it to: npm install\n# Compiling the typescript code\n./node_modules/.bin/tsc\n# Launching the react-native development server\nopen -a Terminal \"`react-native start`\"\n# Compiling the code for ios and deploying it to the simulator\nreact-native run-ios # optionally, type: react-native run-android\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigoelp%2Freactnative-typescript-exercise-4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodrigoelp%2Freactnative-typescript-exercise-4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigoelp%2Freactnative-typescript-exercise-4/lists"}