https://github.com/ethantran/react-native-examples
UI examples from pttrns.com converted to React Native. Examples of SVG Animation with react-native-svg, flubber, d3
https://github.com/ethantran/react-native-examples
react-native
Last synced: 11 months ago
JSON representation
UI examples from pttrns.com converted to React Native. Examples of SVG Animation with react-native-svg, flubber, d3
- Host: GitHub
- URL: https://github.com/ethantran/react-native-examples
- Owner: ethantran
- Created: 2017-06-17T05:49:22.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T09:16:01.000Z (about 3 years ago)
- Last Synced: 2024-04-14T23:59:31.842Z (almost 2 years ago)
- Topics: react-native
- Language: JavaScript
- Homepage:
- Size: 34.1 MB
- Stars: 324
- Watchers: 14
- Forks: 61
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-examples
UI examples from [pttrns](pttrns.com), [mobile-patterns](www.mobile-patterns.com) converted to React Native
Examples of SVG Animation with [react-native-svg](https://github.com/react-native-community/react-native-svg)
Examples 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)
D3 Examples from Mike Bostock's [Blocks](https://bl.ocks.org/mbostock) converted to React Native
SVG Metaball Animation from [Varun](http://varun.ca/metaballs/)
ARKit with [Poly](https://developers.google.com/poly/) and geolocation
[Quartz](https://itunes.apple.com/us/app/quartz/id1076683233?mt=8)-like chat animations
## Screenshots
## Gifs
[Path Drawing](https://gfycat.com/NeighboringAggressiveAmericancrayfish)
[Point Along Path Interpolation](https://gfycat.com/WiltedAggressiveChick)
[Pie Animation](https://gfycat.com/VacantChiefEuropeanpolecat)
[Anchor Walkthrough](https://gfycat.com/MadeupHandyHound)
[Voronoi](https://gfycat.com/AlienatedVillainousKagu)
[D3 Annotation](https://gfycat.com/EverlastingWindyAmericanbobtail)
[Staggered D3 Line Animation](https://gfycat.com/FickleExcitableGermanshepherd)
[Staggered Circle Animation with D3 GeoPath](https://gfycat.com/BruisedRemorsefulHarvestmouse)
## Expo
https://exp.host/@ethantran2/react-native-examples
## Articles
https://medium.com/@ethantran/animating-svg-in-react-native-cf1907831608
This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app).
Below 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).