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: 11 days ago
JSON representation

30 days of React Native demos

• Host: GitHub
• URL: https://github.com/fangwei716/30-days-of-react-native
• Owner: fangwei716
• Created: 2016-03-04T23:33:03.000Z (about 9 years ago)
• Default Branch: development
• Last Pushed: 2018-09-07T13:12:27.000Z (over 6 years ago)
• Last Synced: 2025-04-04T09:04:43.436Z (18 days ago)
• Topics: ios, react-native
• Language: JavaScript
• Homepage:
• Size: 89.7 MB
• Stars: 6,860
• Watchers: 255
• Forks: 1,454
• Open Issues: 50
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• my-awesome - 30-days-of-react-native - 30 days of React Native demos (JavaScript)
• awesome-github-star - 30-days-of-react-native
• awesome-react-native - 30 Days of React Native - 包含 30 个 React Native 示例，适合学习参考。 (开源应用示例)
• awesome-react-native - 30 Days of React Native - 包含 30 个 React Native 示例，适合学习参考。 (开源应用示例)
• fucking-open-source-ios-apps - 30 days of React Native demos

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 RN@0.34

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.