{"id":25629380,"url":"https://github.com/ethantran/react-native-examples","last_synced_at":"2026-06-10T11:30:12.870Z","repository":{"id":21978646,"uuid":"94603643","full_name":"ethantran/react-native-examples","owner":"ethantran","description":"UI examples from pttrns.com converted to React Native.  Examples of SVG Animation with react-native-svg, flubber, d3","archived":false,"fork":false,"pushed_at":"2022-12-07T09:16:01.000Z","size":35746,"stargazers_count":324,"open_issues_count":28,"forks_count":61,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-04-14T23:59:31.842Z","etag":null,"topics":["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/ethantran.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}},"created_at":"2017-06-17T05:49:22.000Z","updated_at":"2024-03-20T13:52:07.000Z","dependencies_parsed_at":"2023-01-12T01:45:36.142Z","dependency_job_id":null,"html_url":"https://github.com/ethantran/react-native-examples","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/ethantran%2Freact-native-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethantran%2Freact-native-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethantran%2Freact-native-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethantran%2Freact-native-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ethantran","download_url":"https://codeload.github.com/ethantran/react-native-examples/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240222472,"owners_count":19767461,"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":["react-native"],"created_at":"2025-02-22T19:17:18.554Z","updated_at":"2026-06-10T11:30:12.815Z","avatar_url":"https://github.com/ethantran.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-native-examples\nUI examples from [pttrns](pttrns.com), [mobile-patterns](www.mobile-patterns.com) converted to React Native \n\nExamples of SVG Animation with [react-native-svg](https://github.com/react-native-community/react-native-svg)\n\nExamples with [d3-annotation](https://github.com/susielu/d3-annotation), [d3-chord](https://github.com/d3/d3-chord), [d3-contour](https://github.com/d3/d3-contour), [d3-interpolate-path](https://github.com/d3/d3-interpolate-path), [d3-path](https://github.com/d3/d3-path), [d3-hexbin](https://github.com/d3/d3-hexbin), [d3-hierarchy](https://github.com/d3/d3-hierarchy), [d3-sankey](https://github.com/d3/d3-sankey), [d3-shape](https://github.com/d3/d3-shape), [d3-voronoi](https://github.com/d3/d3-voronoi), [flubber](https://github.com/veltman/flubber), [svg-path-properties](https://github.com/rveciana/svg-path-properties)\n\nD3 Examples from Mike Bostock's [Blocks](https://bl.ocks.org/mbostock) converted to React Native\n\nSVG Metaball Animation from [Varun](http://varun.ca/metaballs/)\n\nARKit with [Poly](https://developers.google.com/poly/) and geolocation\n\n[Quartz](https://itunes.apple.com/us/app/quartz/id1076683233?mt=8)-like chat animations\n\n## Screenshots\n\n\u003cimg src=\"https://user-images.githubusercontent.com/3276358/27260564-16fb9d14-53f5-11e7-9743-23e857faa1a3.jpg\" width=\"200px\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/3276358/27260565-170b399a-53f5-11e7-9e10-cf777869ffbb.jpg\" width=\"200px\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/3276358/27514756-7cea7852-5959-11e7-9ae5-3fdd871a9c95.jpg\" width=\"200px\"\u003e\n\n## Gifs\n\n[Path Drawing](https://gfycat.com/NeighboringAggressiveAmericancrayfish)\n\n[Point Along Path Interpolation](https://gfycat.com/WiltedAggressiveChick)\n\n[Pie Animation](https://gfycat.com/VacantChiefEuropeanpolecat)\n\n[Anchor Walkthrough](https://gfycat.com/MadeupHandyHound)\n\n[Voronoi](https://gfycat.com/AlienatedVillainousKagu)\n\n[D3 Annotation](https://gfycat.com/EverlastingWindyAmericanbobtail)\n\n[Staggered D3 Line Animation](https://gfycat.com/FickleExcitableGermanshepherd)\n\n[Staggered Circle Animation with D3 GeoPath](https://gfycat.com/BruisedRemorsefulHarvestmouse)\n\n## Expo\n\nhttps://exp.host/@ethantran2/react-native-examples\n\n## Articles\n\nhttps://medium.com/@ethantran/animating-svg-in-react-native-cf1907831608\n\nThis project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app).\n\nBelow you'll find information about performing common tasks. The most recent version of this guide is available [here](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fethantran%2Freact-native-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fethantran%2Freact-native-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fethantran%2Freact-native-examples/lists"}