/30-days-of-react-native

30 days of React Native demos

Primary LanguageJavaScript

30 Days of React Native

30 days of React Native examples/demos.

main

This project is inspired by

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

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

Upgrade to RN@0.34

This is a branch under development to upgrade RN to v0.34 & 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

Day 2

An IOS-system-like weather app.

The animation is partially done.

day2

Day 3

The Twitter app entrance animation.

day3

Day 4

TO BE UPDATED

Day 5

MapView and find Geo location.

day5

Day 6

TO BE UPDATED

Day 7

Pan gesture basic. Move a baseball around.

day7

Day 8

Google map style swipe menu

day8

Day 9

Layout of Twitter user page

day9

Day 10

Tumblr menu animation

day10

Day 11

Using OpenGL with React native

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

day11

Day 12

TO BE UPDATED

Day 13

A tweet UI

day13

Day 14

A tinder swipe

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

day14

Day 15

TO BE UPDATED

Day 16

Unlock with gesture

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

day16

Day 17

Native search bar and Fuzzy search

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

day17

Day 18

Sortable. drag and reorder the blocks.

day18

Day 19

Unlock app with touchID

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

day19

Day 20

Sigle page Reminder

day20

Day 21

Multi page Reminder

day21

Day 22

Google Now

day22

Day 23

Local WebView An example using D3.js

day23

Day 24

Youtube scrollable tab

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

day24

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

Day 28

iMessage Image Picker.

day28

Day 29

TO BE UPDATED

Day 30

Push Notification.

day30

License

ThirtyDaysOfReactNative is under the MIT license.