Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fangwei716/30-days-of-react-native

30 days of React Native demos
https://github.com/fangwei716/30-days-of-react-native

ios react-native

Last synced: 3 days ago
JSON representation

30 days of React Native demos

Awesome Lists containing this project

README 

        
# 30 Days of React Native

30 days of React Native examples/demos.



![main](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/main.gif)



This project is inspired by 



100 Days of Swift (http://samvlu.com/) &



30DaysofSwift (https://github.com/allenwong/30DaysofSwift)



## Upgrade to [email protected]



This is a branch under development to upgrade RN to v0.40 & compatible with Xcode 8. 



## Change



1. Remove cocoapodes & libraries that do not support Andriod

2. Use Navigator instead of NavigatorIOS



## Installation

Require node.js, npm install -g react-native-cli , xcode



\#1  `$ npm install`



IOS



\#2  run ios/ThirtyDaysOfReactNative.xcodeproj



Android



\# TODO



## Compatibility



Not tested yet. 



## Running on Device



https://facebook.github.io/react-native/docs/running-on-device-ios.html#content



## Known Bugs



## Day 1

An IOS-system-like stop watch.



Fully functioned as the system app.



![day1](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day1.gif)



## Day 2

An IOS-system-like weather app.



The animation is partially done. 



![day2](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day2.gif)



## Day 3

The Twitter app entrance animation.



![day3](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day3.gif)



## Day 4

TO BE UPDATED



## Day 5

MapView and find Geo location.



![day5](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day5.gif)



## Day 6

TO BE UPDATED



## Day 7

Pan gesture basic. Move a baseball around.



![day7](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day7.gif)



## Day 8

Google map style swipe menu



![day8](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day8.gif)



## Day 9

Layout of Twitter user page



![day9](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day9.gif)



## Day 10

Tumblr menu animation



![day10](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day10.gif)



## Day 11

Using OpenGL with React native 



Reference: https://github.com/ProjectSeptemberInc/gl-react-native



![day11](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day11.gif)



## Day 12

TO BE UPDATED



## Day 13

A tweet UI



![day13](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day13.gif)



## Day 14

A tinder swipe 



Reference:https://github.com/meteor-factory/react-native-tinder-swipe-cards



![day14](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day14.gif)



## Day 15

TO BE UPDATED



## Day 16

Unlock with gesture



Reference:https://github.com/spikef/react-native-gesture-password



![day16](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day16.gif)



## Day 17

Native search bar and Fuzzy search 



Reference:https://github.com/umhan35/react-native-search-bar



![day17](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day17.gif)



## Day 18

Sortable. drag and reorder the blocks.



![day18](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day18.gif)



## Day 19

Unlock app with touchID



Reference:https://github.com/naoufal/react-native-touch-id



![day19](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day19.gif)



## Day 20

Sigle page Reminder 



![day20](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day20.gif)



## Day 21

Multi page Reminder 



![day21](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day21.gif)



## Day 22

Google Now



![day22](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day22.gif)



## Day 23

Local WebView

An example using D3.js



![day23](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day23.gif)



## Day 24

Youtube scrollable tab



Reference: https://github.com/brentvatne/react-native-scrollable-tab-view



![day24](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day24.gif)



## Day 25

TO BE UPDATED



## Day 26

TO BE UPDATED



## Day 27

iMessage Gradient. The chat bubble changes its gradient color with its pageY.



Reference: https://github.com/brentvatne/react-native-linear-gradient



![day27](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day27.gif)



## Day 28

iMessage Image Picker.



![day28](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day28.gif)



## Day 29

TO BE UPDATED



## Day 30

Push Notification.



![day30](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day30.gif)



## License



ThirtyDaysOfReactNative is under the MIT license.