{"id":13475973,"url":"https://github.com/jondot/ReactNativeKatas","last_synced_at":"2025-03-27T01:30:46.253Z","repository":{"id":66314358,"uuid":"61232006","full_name":"jondot/ReactNativeKatas","owner":"jondot","description":"This is a project that lets you participate in a fully-immersive, hands-on, and fun learning experience for React Native.","archived":false,"fork":false,"pushed_at":"2018-09-20T20:59:08.000Z","size":3003,"stargazers_count":948,"open_issues_count":8,"forks_count":107,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-03-20T09:48:28.201Z","etag":null,"topics":["development","exercise","kata","koans","react-native","training"],"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/jondot.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}},"created_at":"2016-06-15T18:42:48.000Z","updated_at":"2025-02-19T09:51:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"bdbe9cb7-8ddb-413e-a506-6a0d8916bc49","html_url":"https://github.com/jondot/ReactNativeKatas","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/jondot%2FReactNativeKatas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondot%2FReactNativeKatas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondot%2FReactNativeKatas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondot%2FReactNativeKatas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jondot","download_url":"https://codeload.github.com/jondot/ReactNativeKatas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245764603,"owners_count":20668447,"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":["development","exercise","kata","koans","react-native","training"],"created_at":"2024-07-31T16:01:25.268Z","updated_at":"2025-03-27T01:30:42.690Z","avatar_url":"https://github.com/jondot.png","language":"JavaScript","readme":"\u003ch3 align=\"center\"\u003e\n  \u003cimg src=\"media/rinja.png\" alt=\"Rinja: the React Native Ninja\" width=\"215px\"/\u003e\n  \u003cbr/\u003e\n  \u003cbr/\u003e\n  \u003cimg src=\"media/ReactNativeKatas.png\" alt=\"Rinja: the React Native Ninja\" width=\"280px\"/\u003e\n\u003c/h3\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n# React Native Katas\n\nThis is a project that lets you participate in a fully-immersive,\nhands-on, and fun learning experience for React Native.\n\nWe will focus solely about _design and styling_ for React Native,\nmaking this a perfect learning aid for both programmers and designers\nthat previously handled Sass or CSS.\n\n![](media/FillAllFlow.gif)\n\n## What's a Kata\n\nThis is a [Kata](https://en.wikipedia.org/wiki/Kata). For programming, this means\na way to practice something, which is simple enough. However, traditionally\nprogramming katas or programming [Koans](https://en.wikipedia.org/wiki/K%C5%8Dan) are\nmade to \"learn the hard way\".\n\nLearning \"the hard way\" primes your brain to receive information and accelerates\nthe learning process considerably on the expense of frustration.\n\nThis process, like many other Kata or Koan based projects, aims to give you\nthe best experience possible so that you can fail with a nice safety net and\nlearn from your failures quickly.\n\nFor this, we use:\n\n* A fancy framework that sets up, runs, and validates your Katas\n* A smart layout of learning material so that one builds on the other, yet lets you discover things on your own\n* Some times [things are repeated](https://en.wikipedia.org/wiki/Spaced_repetition)\n* React Native's live-reload for rapid iteration\n* Simulator friendly set up, so that you will get full-immersion, working on the same physical space as your desktop\n* Tips and guides along the way, so that you will always know what to do\n\n## Quick Start\n\nI assume you already have a [working react-native setup](https://facebook.github.io/react-native/docs/getting-started.html).\n\n* Clone this project\n* `npm i` and then run the project via Xcode or `react-native`\n* After running the project, turn on Live Reload (Ctrl+Cmd+Z for developer menu on iOS Simulator)\n\n\nYou will then be faced with the first Kata.\n\n* Press on a Kata (anywhere) to show the reference Kata - which is what you\n  should arrive at\n* Press again to go back to your answer Kata\n* Find your [src/katas](src/katas) folder\n* Get familiar with the [list of katas available](src/katas/bundle.js)\n* Per subject (flex, styling, composing), look for the `.test` version of your Kata and edit away. The reference\nKata is the one without the `.test` suffix.\n* Example: `FillAll` under the `flex` subject, will be at [src/katas/flex/FillAll.test.js](src/katas/flex/FillAll.test.js), and\nthe reference Kata will be at [src/katas/flex/FillAll.js](src/katas/flex/FillAll.js)\n* Modify, view, until both Katas match.\n* Once Katas match, you will be automatically moved to a new Kata to solve\n\n\n\n### Checking Results\n\nAt any point in time, you can click on your view to show the reference view, and click\nagain to go back.\n\nIf you've successfully solved the current view, you'll be *automatically* progressed\nto the next Kata.\n\n\n\n### Learning\n\nLearn by making mistakes (\"The Hard Way\"). By making mistakes, you're priming\nyour brain to receive and retain data in a much better way than reading a book\nor watching a video.\n\n\nUse the tips in the `.test` versions of the components. Sometimes there will be\ntips, sometimes there won't be. Some times the tips will be somewhat opaque,\nsometimes very revealing.\n\n1. Use the tips\n2. Think, experiment, think, and experiment again\n3. Use Google\n4. Go to (2)\n5. Eventually, take a look at the reference component (read: answers)\n\n\nThe reference components won't have a `test` suffix. You'll be able to find\nsolutions there and if a concept is first introduced or demands a special\nexplanation - it will be explained inline for your convenience, look for\nthe `Did you know?` sections, `Hints` sections, and `TODO` notes.\n\n## Building Katas\n\nYou're more than welcome to submit new katas. Please see the [kata building doc](docs/kata_builders.md) for details.\n\n## Under the Hood\n\nThere's a reference Kata, and a test Kata (the one you fiddle with). They're\nwrapped with a special snapshotting component that exists within the\n[runner](src/runner) infrastructure.\n\nWith that, a reference Kata is mounted, rendered, snapshotted (visually), and\nthen your test Kata goes through the same process. We then diff the two\nsnapshots to see if the designs match for your Kata to be marked as solved.\n\nSo, this is not the regular testing framework you'd expect.\n\nThat was done because design needs creative freedom. This means there's more\nthan one way to solve a Kata, as long as you get the same visuals!\n\nThis also means that you're welcome to make forks with better solutions, and offer\nthese as the de-facto reference Katas for next generations to come!\n\n\n\n## Katas\n\n\u003c!-- KATAS_START --\u003e\n\n\n### UsingText\n\n\u003cimg src=\"media/UsingText.ref.png\" width=\"300px\"/\u003e\n\n\n\n### UsingStyles\n\n\u003cimg src=\"media/UsingStyles.ref.png\" width=\"300px\"/\u003e\n\n\n\n### Clipping\n\n\u003cimg src=\"media/Clipping.ref.png\" width=\"300px\"/\u003e\n\n\n\n### BorderRadius\n\n\u003cimg src=\"media/BorderRadius.ref.png\" width=\"300px\"/\u003e\n\n\n\n### LoadingCard\n\n\u003cimg src=\"media/LoadingCard.ref.png\" width=\"300px\"/\u003e\n\n\n\n### Gridding\n\n\u003cimg src=\"media/Gridding.ref.png\" width=\"300px\"/\u003e\n\n\n\n### FlexSize\n\n\u003cimg src=\"media/FlexSize.ref.png\" width=\"300px\"/\u003e\n\n\n\n### FillAll\n\n\u003cimg src=\"media/FillAll.ref.png\" width=\"300px\"/\u003e\n\n\n\n### Direction\n\n\u003cimg src=\"media/Direction.ref.png\" width=\"300px\"/\u003e\n\n\n\n### AlignmentAxis\n\n\u003cimg src=\"media/AlignmentAxis.ref.png\" width=\"300px\"/\u003e\n\n\n\n### Alignment\n\n\u003cimg src=\"media/Alignment.ref.png\" width=\"300px\"/\u003e\n\n\n\n### SimpleChart\n\n\u003cimg src=\"media/SimpleChart.ref.png\" width=\"300px\"/\u003e\n\n\n\n### ProfileScreen\n\n\u003cimg src=\"media/ProfileScreen.ref.png\" width=\"300px\"/\u003e\n\n\n\n### ContactCard\n\n\u003cimg src=\"media/ContactCard.ref.png\" width=\"300px\"/\u003e\n\n\n\n### CalendarMonth\n\n\u003cimg src=\"media/CalendarMonth.ref.png\" width=\"300px\"/\u003e\n\n\n\u003c!-- KATAS_END --\u003e\n","funding_links":[],"categories":["JavaScript","Tutorials"],"sub_categories":["Other Platforms"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjondot%2FReactNativeKatas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjondot%2FReactNativeKatas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjondot%2FReactNativeKatas/lists"}