# rn-30-days-of-react-native **Repository Path**: yurigit.net/rn-30-days-of-react-native ## Basic Information - **Project Name**: rn-30-days-of-react-native - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2017-03-24 - **Last Updated**: 2020-12-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: Code ## 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 & compatible with Xcode 8 Branch development is under development for upgrading RN to v0.34 & supporting Xcode 8. ## Installation Require node.js (v5.x), npm install -g react-native-cli , xcode & cocoapods \#1 `$ npm install` IOS \#2 run ios/ThirtyDaysOfReactNative.xcworkspace Android (Since most of the plugins/libraries I used are compatible with IOS only. Majority of the days are not supported yet. PR welcomed. https://github.com/fangwei716/30-days-of-react-native/tree/android-v0.0.1) \#2 `$ react-native run-android` If error occurs during npm install, you can also download the node_modules folder directly from branch with_node_modules. ##ToDO \#1 Add Android Support. \#2 ~~iPhone Compatibility~~. \#3 Add OSX Support. (https://github.com/ptmt/react-native-desktop) \#4 Add UWP Support when it is released. (https://blogs.windows.com/buildingapps/2016/04/13/react-native-on-the-universal-windows-platform/) ##Compatibility Compatible with iPhone 4/4s, 5/5s, 6/6s, 6+/6s+. ##Running on Device https://facebook.github.io/react-native/docs/running-on-device-ios.html#content ##Known Bugs \#1 A warning occurs from package react-native-swiper Solution here: https://github.com/leecade/react-native-swiper/pull/113/commits/e681a8e5f347efbf10b445647321b1f0865e31a4 ##A Complete Example You can also check out a complete React Native Example of mine. https://github.com/fangwei716/gene-task-runner ## 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 Using CocoaPods with React Native. An example with JTSImageViewController. Reference: https://shift.infinite.red/beginner-s-guide-to-using-cocoapods-with-react-native-46cb4d372995#.z6ooi3o0t ![day4](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day4.gif) ## Day 5 MapView and find Geo location. ![day5](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day5.gif) ## Day 6 Spotify welcome screen/ ![day6](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day6.gif) ## 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 Charts with React native Reference: https://github.com/tomauty/react-native-chart ![day12](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day12.gif) ## 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 A time picker ![day15](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day15.gif) ## 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 Custome in-app browser Reference: https://github.com/d-a-n/react-native-webbrowser ![day25](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day25.gif) ## Day 26 Swipe and Switch ![day26](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day26.gif) ## 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 Quick action with 3D Touch. Quick action on launching days. ![day29](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day29.gif) ## Day 30 Push Notification. ![day30](https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/screenshots/screenshot/day30.gif) ## License ThirtyDaysOfReactNative is under the MIT license.