30 days of React Native demos

Overview

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 [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

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.

Comments
  • lJTSImageViewController library not found & Naming collision detected

    lJTSImageViewController library not found & Naming collision detected

    Hi,

    Looks like nice work with this.

    I've followed your instructions, but I've run into an issue (seems like it was mentioned before- but I'm using the latest repo & having the issue). I've done theses steps.

    1. git clone https://github.com/fangwei716/30-days-of-react-native.git 30DAYS
    2. cd 30DAYS
    3. npm install
    4. cd ios
    5. pod install (if I skip this step, I get the 'RCTBridge.h not found")

    Open: the '.xcodeproj' file gives me this error:

    ld: warning: directory not found for option '-L/Users/mac1/Dev/React/React30/ios/build/Debug-iphoneos' ld: library not found for -lJTSImageViewController

    Opening the '.xcworkspace' file gives me this error:

    Failed to build DependencyGraph: Naming collision detected: /Users/mac1/Dev/React/React30/node_modules/react/node_modules/fbjs/lib/warning.js collides with /Users/mac1/Dev/React/React30/node_modules/react-native/node_modules/fbjs/lib/warning.js Error: Naming collision detected: /Users/mac1/Dev/React/React30/node_modules/react/node_modules/fbjs/lib/warning.js collides with /Users/mac1/Dev/React/React30/node_modules/react-native/node_modules/fbjs/lib/warning.js at HasteMap._updateHasteMap (HasteMap.js:132:13) at HasteMap.js:103:28 at tryCallOne (/Users/mac1/Dev/React/React30/node_modules/react-native/node_modules/promise/lib/core.js:37:12) at /Users/mac1/Dev/React/React30/node_modules/react-native/node_modules/promise/lib/core.js:123:15 at flush (/Users/mac1/Dev/React/React30/node_modules/react-native/node_modules/promise/node_modules/asap/raw.js:50:29) at nextTickCallbackWith0Args (node.js:420:9) at process._tickCallback (node.js:349:13)

    Running 'react run-ios' gives me this error:

          throw err;
          ^
    
    Error: Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/ThirtyDaysOfReactNative.app/Info.plist
    Print: Entry, ":CFBundleIdentifier", Does Not Exist
    
        at checkExecSyncError (child_process.js:464:13)
        at Object.execFileSync (child_process.js:484:13)
        at _runIOS (runIOS.js:77:34)
        at runIOS.js:24:5
        at tryCallTwo (/Users/mac1/Dev/React/React30/node_modules/react-native/node_modules/promise/lib/core.js:45:5)
        at doResolve (/Users/mac1/Dev/React/React30/node_modules/react-native/node_modules/promise/lib/core.js:200:13)
        at new Promise (/Users/mac1/Dev/React/React30/node_modules/react-native/node_modules/promise/lib/core.js:66:3)
        at Array.runIOS (runIOS.js:23:10)
        at Object.run (/Users/mac1/Dev/React/React30/node_modules/react-native/local-cli/cli.js:86:13)
        at Object.<anonymous> (/usr/local/lib/node_modules/react-native-cli/index.js:88:7)```
    
    opened by yarnball 9
  • react-native ios-run has some error. help me please

    react-native ios-run has some error. help me please

    Hi, react-native ios-run has problem. help me please. i copy the error infomation as the below: /Users/daiweixiong/Documents/workplace/RN/30-days-of-react-native/node_modules/react-native/Libraries/WebSocket/RCTSRWebSocket.m:482:3: error: ignoring return value of function declared with warn_unused_result attribute [-Werror,-Wunused-result] SecRandomCopyBytes(kSecRandomDefault, keyBytes.length, keyBytes.mutableBytes); ^~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ /Users/daiweixiong/Documents/workplace/RN/30-days-of-react-native/node_modules/react-native/Libraries/WebSocket/RCTSRWebSocket.m:1324:5: error: ignoring return value of function declared with warn_unused_result attribute [-Werror,-Wunused-result] SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key); ^~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 2 errors generated.

    The following build commands failed: CompileC /Users/daiweixiong/Documents/workplace/RN/30-days-of-react-native/ios/build/Build/Intermediates/RCTWebSocket.build/Debug-iphonesimulator/RCTWebSocket.build/Objects-normal/x86_64/RCTSRWebSocket.o RCTSRWebSocket.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler (1 failure) Installing build/Build/Products/Debug-iphonesimulator/ThirtyDaysOfReactNative.app An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2): Failed to install the requested application An application bundle was not found at the provided path. Provide a valid path to the desired application bundle. Print: Entry, ":CFBundleIdentifier", Does Not Exist /Users/daiweixiong/Documents/workplace/RN/30-days-of-react-native/node_modules/promise/lib/done.js:10 throw err; ^

    Error: Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/ThirtyDaysOfReactNative.app/Info.plist Print: Entry, ":CFBundleIdentifier", Does Not Exist

    opened by daiweixiong 6
  • Day18 在Android上运行拖拽时出错。

    Day18 在Android上运行拖拽时出错。

    image

    this.animations = { duration: 200, create: { type: LayoutAnimation.Types.linear, }, update: { type: LayoutAnimation.Types.linear, springDamping: 0.7, }, }; day18.js在android上运行时能正确显示里面的图标,但是在拖动图标的时候出错,将linear改为别的也会出错。

    opened by guanjian520 5
  • Property 'request' not found on object of type 'RCTImageSource *'

    Property 'request' not found on object of type 'RCTImageSource *'

    30-days-of-react-native/node_modules/gl-react-native/ios/GLImage.m:83:68: Property 'request' not found on object of type 'RCTImageSource *'

    Line #83: _loading = [_bridge.imageLoader loadImageWithURLRequest:source.request ErrorInfo: Property 'request' not found on object of type 'RCTImageSource *'

    opened by haiqingMa 5
  • library not found for -lJTSImageViewController

    library not found for -lJTSImageViewController

    Hello Wei Fang, Thanks for this.

    I am having issue running it:

    ld: library not found for -lJTSImageViewController clang: error: linker command failed with exit code 1 (use -v to see invocation)

    opened by mak2014 3
  • Failed to build DependencyGraph: Naming collision detected:

    Failed to build DependencyGraph: Naming collision detected:

    我运行的时候报这个错是什么情况? [21:00:00] find dependencies Failed to build DependencyGraph: Naming collision detected: /Users/weiliang/Documents/work/react/react-native/30days/node_modules/react/lib/update.js collides with /Users/weiliang/Documents/work/react/react-native/30days/node_modules/react-native/node_modules/react/lib/update.js Error: Naming collision detected: /Users/weiliang/Documents/work/react/react-native/30days/node_modules/react/lib/update.js collides with /Users/weiliang/Documents/work/react/react-native/30days/node_modules/react-native/node_modules/react/lib/update.js at HasteMap._updateHasteMap (HasteMap.js:132:13) at HasteMap.js:103:28 at tryCallOne (/Users/weiliang/Documents/work/react/react-native/30days/node_modules/react-native/node_modules/promise/lib/core.js:37:12) at /Users/weiliang/Documents/work/react/react-native/30days/node_modules/react-native/node_modules/promise/lib/core.js:123:15 at flush (/Users/weiliang/Documents/work/react/react-native/30days/node_modules/react-native/node_modules/promise/node_modules/asap/raw.js:50:29) at doNTCallback0 (node.js:417:9) at process._tickCallback (node.js:346:13) ~ Process terminated. Press to close the window

    opened by liangz168 2
  • One bug about setState in Day1

    One bug about setState in Day1

    On line 50 of day1.js, when we use the watchOn, find the it can not be change on line 47. Because function setState is a asynchronous function. Can look at https://facebook.github.io/react/docs/component-api.html

    opened by arthurzoubin 1
  • The button can't response

    The button can't response

    I try to achieve day1 on the android platform, when the cycle is set to 10 ms(setInterval) button can't response, modified to 1000 ms after can response, so I don't know how to complete the stopwatch function.

    opened by zhoujunhua 1
  • Hey guys, I use expo-cli to refactor this project

    Hey guys, I use expo-cli to refactor this project

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

    Over the years, the dependent environment has changed so fast that the original project can no longer to run. So I use expo-cli to refactor the project, and use a lot of new features of React (Like hooks)

    opened by AlpacaBi 0
  • ld: library not found for -lRCTAnimation

    ld: library not found for -lRCTAnimation

    After react native version increased to 0-62.2, I encountered many problems. This is one of them in the following question:

    -- I took this page for reference and edited it [https://react-native-community.github.io/upgrade-helper/?from=0.59.3&to=0.62.0](React native community) -- Podfile updated

    -- react-native-cli: 2.0.1 react-native: 0.62.2

    clang: error: linker command failed with exit code 1 (use -v to see invocation)

    ld: library not found for -lRCTAnimation
    warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 6.0, but the range of supported deployment target versions is 8.0 to 13.4.99. (in target 'OpenSSL-Universal' from project 'Pods')
    
    ** BUILD FAILED **
    
    
    The following build commands failed:
            Ld /Users/ibrahimyolbir/Library/Developer/Xcode/DerivedData/DGFonder-fxqthwkcalsxjgaeqbdxsodcnrou/Build/Products/Debug-iphonesimulator/DGFonder.app/DGFonder normal x86_64
    (1 failure)
    
    opened by ibrahimyolbir 0
  • ios error

    ios error

    ld: library not found for -lRCTAnimation clang: error: linker command failed with exit code 1 (use -v to see invocation)

    what should i do to start this project?

    opened by weips 3
Owner
Wei Fang
Wei Fang
A weather app developed in React Native. It is the React Native version of SwiftWeather.

ReactNativeWeather A weather app developed in React Native. It is the React Native version of SwiftWeather How to run the app Install react-native If

Jake Lin 22 Jun 7, 2022
Vahesaroyan-react-native-bubble-select - React native bubble picker

@vahesaroyan/react-native-bubble-select React native bubble picker Installation

Vahe Saroyan 0 Jan 30, 2022
100-Days-of-SwiftUI - Studying through Paul Hudson's 100 Days of SwiftUI

Hacking with SwiftUI 100 Days of SwiftUI Studying through Paul Hudson's "100 Day

Dean Thompson 3 Aug 29, 2022
100-days-swift-project-8 - The eighth project from 100 days of Swift course

7 Swifty Words This is the eighth project from Hacking With Swift 100 days of Sw

Bruno Guirra 0 Jan 24, 2022
React Native FlyBuy module. Supports Core, Pickup, Notify, and Presence Native SDK APIs.

The FlyBuy cloud service and mobile SDK enables developers to add FlyBuy functionality directly into their react native apps for a full white label im

BILDIT, LLC. 8 Sep 16, 2022
React Native library that implements PayPal Checkout flow using purely native code (swift).

react-native-paypal-swift React Native library that implements PayPal Checkout flow using purely native code (swift). Installation npm install react-n

Tibb 6 Nov 28, 2022
React-native-photo-editor - Photo editor using native modules for iOS and Android

?? Image editor using native modules for iOS and Android. Inherit from 2 available libraries, ZLImageEditor (iOS) and PhotoEditor (Android)

Baron Ha. 244 Jan 5, 2023
The easiest way to show off your iOS taps and gestures for demos and videos.

It's ShowTime ?? Installation Swift Package Manager Cocoapods Manual Usage How it works Useful info Author License ShowTime is the simplest and best w

Kane Cheshire 459 Dec 27, 2022
ClassicPhotos is a TableView App demos how to optimize image download and filter with operation queue.

ClassicPhotos ClassicPhotos is a TableView App demos how to optimize image download and filter with operation queue. With Operation and Operation Queu

Kushal Shingote 2 Dec 18, 2021
An app that will help UI/UX designers and iOS developpers to easily work together, using demos and examples about iOS capabilities, limitations, ecosystem, ...

Demoapp Work in progress... ?? What's about? It's an app built in SwiftUI that will help UI/UX designers and iOS developpers to work together smoothly

Kaww 2 Nov 2, 2022
TrendingMovies demos some UIKit (& Combine) concepts

TrendingMovies demos some UIKit (& Combine) concepts. The goal is to make a application using some good software engineering concepts from my point of view, and show how I like to code. It'll be updated with new features and tests as soon as possible.

Raphael Oliveira 8 Dec 22, 2022
SwiftUI animation tutorials, all of demos are consisted of youtube videos at website of kavsoft

SwiftUI animation tutorials, all of demos are consisted of youtube videos at website of kavsoft

Yonggang Liu 194 Dec 29, 2022
A react native interface for integrating payments using Braintree

A react native interface for integrating payments using Braintree

eKreative 17 Dec 30, 2022
React Native 实现无侵入自定义下拉刷新组件

react-native-ly-refresh-control 下拉刷新 iOS 基于MJRefresh 通过RCTCustomRefreshContolProtocol实现RefreshControl组件封装 JS端可以无侵入自定义下拉刷新只需要替换对应的refreshControl Androi

少言 12 Jul 2, 2022
React Native version of the Podverse Mobile App

Podverse Podverse is an open source podcast manager for iOS, Android, and web. Check us out at podverse.fm! Free features: Subscribe to podcasts Auto-

Podverse 80 Dec 30, 2022
🎈 Curated collection of advanced animations that I have developed using (Swift UI for iOS) and (React Native for iOS/Android). Source code is intended to be reused by myself for future projects.

?? Curated collection of advanced animations that I have developed using (Swift UI for iOS) and (React Native for iOS/Android). Source code is intended to be reused by myself for future projects.

Artem Moshnin 5 Apr 3, 2022
Mobile app for Chatwoot - React Native

Mobile app for chatwoot platform. Built with React Native Chatwoot is an opensource alternative to Intercom, Zendesk, Drift, Crisp etc. Supported Chat

Chatwoot 388 Dec 28, 2022
Next generation iOS and Android apps for Mattermost in React Native

Mattermost Mobile Minimum Server versions: Current ESR version (5.37.0) Supported iOS versions: 11+ Supported Android versions: 7.0+ Mattermost is an

Mattermost 1.7k Jan 1, 2023
iOS 15 share play API in react-native

react-native-shareplay iOS 15 share play API in react-native Installation yarn add react-native-shareplay And go to Xcode Capabilities and enable "Gro

Popshop Live 27 Oct 16, 2022
Cache library for videos for React Native

@lowkey/react-native-cache Cache everything Installation npm install @lowkey/react-native-cache Usage import ReactNativeCache from "@lowkey/react-nati

Max Prokopenko 1 Oct 1, 2021