fangwei716 / 30-days-of-react-native

30 days of React Native demos

30 Days of React Native

30 days of React Native examples/demos.

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.

Day 2

An IOS-system-like weather app.

The animation is partially done.

Day 3

The Twitter app entrance animation.

Day 4

TO BE UPDATED

Day 5

MapView and find Geo location.

Day 6

TO BE UPDATED

Day 7

Pan gesture basic. Move a baseball around.

Day 8

Google map style swipe menu

Day 9

Layout of Twitter user page

Day 10

Tumblr menu animation

Day 11

Using OpenGL with React native

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

Day 12

TO BE UPDATED

Day 13

A tweet UI

Day 14

A tinder swipe

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

Day 15

TO BE UPDATED

Day 16

Unlock with gesture

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

Day 17

Native search bar and Fuzzy search

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

Day 18

Sortable. drag and reorder the blocks.

Day 19

Unlock app with touchID

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

Day 20

Sigle page Reminder

Day 21

Multi page Reminder

Day 22

Google Now

Day 23

Local WebView An example using D3.js

Day 24

Youtube scrollable tab

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

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

Day 28

iMessage Image Picker.

Day 29

TO BE UPDATED

Day 30

Push Notification.

License

ThirtyDaysOfReactNative is under the MIT license.

30-days-of-react-native's Issues

运行回报这些错误

day6 not working

day6 not working，only tarBar

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.

iOS 10.3 系统，图片显示不出来，好多警告！

iOS运行就报错,完全跑不起来

如题, 试了各种办法, 都不行, 初学RN,求职作者能不能更新下,谢谢!

"2 mouths ago" why no using 60 days

day1 里面计算秒数的地方有个错误

1min = 60s = 60 * 1000 ms;
所以下面的
second = Math.floor((countingTime - 6000 * minute) / 1000) 应该写成
Math.floor((countingTime - 60000 * minute) / 1000)

secsecond = Math.floor((seccountingTime - 6000 * secminute) / 1000); 应该写成
secsecond = Math.floor((seccountingTime - 60000 * secminute) / 1000);

运行不了啊，怎么破

day1中的代码，Interval计时器在Android环境下会卡顿，卡死整个界面

Cannot read property 'on' of undefined

When I run react-native start, it shows the info "Cannot read property 'on' of undefined".
I am confused about this issue. Does anyone has any ideas?

Unrecognized font family 'Ionicons'

run in Xcode, report error: Unrecognized font family 'Ionicons'.
I run npm install react-native-vector-icons, the error is still on

demo集合的演示app能下载？

iOS 下载项目 npm install之后，提示编译不过。

iOS Simulator System： 10.3
Xcode： 8.3.2
node：v6.2.2
react-native-cli: 2.0.1
react-native: 0.40.0

package.json 配置没有改过，模拟器报错内容如下：

undefined is not an object (evaluating ViewPropTypes.style)

DefaultTabBar.js:20

loadModuleImplementation
require.js.171

day3.js：11

loadModuleImplementation
require.js.171

index.ios.js:15

loadModuleImplementation
require.js.171

guardeLoadModule
require.js.116

global code
require-0.js:1

unrecognized font family ionicons

When i run the .xcodeproj ,simulator show red warning unrecognized font family ionicons 。

Error: more than one library with package name 'com.projectseptember.RNGL'

“react-native run-android” 第一次 执行这个 就报错了 ，一直打不起包

作者，您好，我是react native初学者，有个问题，麻烦您点拨一下

运行系统是ios10.0。npm install 后 react-native run-ios 出现如下错误，这种情况在master 和 development 和 with_node_modules 中都会出现，麻烦您，指教下，谢谢。

Unable to resolve module ./lib/React from /
Users/lizx/something/30-days-of-reactnative/node_modules/react/react.js:
Unable
to find this module in its module map or any
of the node_modules directories under /
Users/lizx/something/30-days-of-reactnative/node_modules/react/lib/React
and its
parent directories
This might be related to https://github.com/
facebook/react-native/issues/4968
To resolve try the following:

1. Clear watchman watches: 'watchman
   watch-del-all'.
2. Delete the 'node_modules' folder: 'rm -rf
   node_modules && npm install'.
3. Reset packager cache: 'rm -fr $TMPDIR/
   react-*' or 'npm start---------reset-cache'.

运行报错.

npm 启动到99%时,报错:

请问这是何故?

项目运行 react-native run-android 运行报错

报错内容如下：

* What went wrong:
Execution failed for task ':app:processDebugResources'.
> Error: more than one library with package name 'com.projectseptember.RNGL'
  You can temporarily disable this error with android.enforceUniquePackageName=false
  However, this is temporary and will be enforced in 1.0

相当的沮丧，看 android/settings.gradle 和 android/app/build.gradle 之后，发现 @fangwei716 重复引入了gl-react-native

android/settings.gradle 多引入了 :gl-react-native， 删掉如下行

include ':gl-react-native'
project(':gl-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/gl-react-native/android')

android/app/build.gradle 删掉如下行：

    compile project(':gl-react-native')

然后，就可以 happy 的运行起来了。

error, help!

我执行了 npm install 然后 react-native run-ios 。然后报了这个错误

是否持续更新android版本的？

android版本的还有很多没有完善，作者还在更新中吗?
另外地图google map 在国内用不了怎么办？还有其它选择？

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

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

View was rendered with explicitly set width/height but with a 0 flexBasis. (This might be fixed by changing flex: to flexGrow:) View: <RCTShadowView: 0x6000001a7c40; viewName: RCTView; reactTag: 15; frame: {{0, 0}, {nan, nan}}>

你好，打扰了我是个新手，创建完成后运行时报的这个错，google了也没有得到解决方案

如何进入项目？

redefine proptype

redefine proptype "alignItems" in file view/day6.js row 121 and 127

day15 dataPickerIos not working

day15进入模态后datepickerIOS无法展示

when I npm install show the warning:

when i npm install show the warning :
[email protected] requires a peer of react@~15.3.1 but none was installed. how to fixed it? thanks!

the example of day1 doen't work in android

It doesn't work in day1. I can start the app,but when i press the stop key,it doesn't work !
the problem is the function of setInterval;

Android is unavailable

Android is unavailable

day1 componentWillUnmount 时未关闭定时器

定时器未有效销毁

xcode降级到7.3.1运行还是会报错

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 *'

编译报错

使用Xcode编译时，GLLmage.m 83行 Property 'request' not found on object of type 'RCTImageSource *'
初学者不懂

PR: Add support for `eslint-plugin-flowtype-errors`

This plugin allows flow to be run as an eslint plugin 🎉 Would a PR for this be welcome?

react native v0.26支持

你好，很喜欢你的这个项目，但是运行不起来。
希望能早日提供react native v0.26的支持，加油。
我会持续关注你的更新，祝好！

Day1的秒计算部分有问题，超过59会溢出

second = Math.floor((countingTime-60000*minute)/1000);
secsecond = Math.floor((seccountingTime-6000*secminute)/1000);

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

Not compatible with RN 0.42

Shows unrecognized font family 'lonicons' after npm install.

ios运行后出错

undefined is not an object (evaluating 'ViewPropTypes.style')

<unknown>
    DefaultTabBar.js:20
loadModuleImplementation
    require.js:171
<unknown>
    index.js:20
loadModuleImplementation
    require.js:171
<unknown>
    day3.js:11
loadModuleImplementation
    require.js:171
<unknown>
    index.ios.js:15
loadModuleImplementation
    require.js:171
guardedLoadModule
    require.js:116
global code
    require-0.js:1

作者您好程序运行就报错能不能看下

不知道是什么原因导致?

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)```

I run it ,but error : Unrecognized font family ‘Ionicons’, How to solve ？

Compile error

/xxx/xxx/GitHub/30-days-of-react-native/node_modules/gl-react-native/ios/GLImage.m:83:37: No visible @interface for 'RCTImageLoader' declares the selector 'loadImageWithURLRequest:size:scale:clipped:resizeMode:progressBlock:partialLoadBlock:completionBlock:'

xcode's version is Version 8.1 (8B62)

RN's version is 0.33.1

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)

缺少RCTBundleURLProvider.h

bundle里面没有RCTBundleURLProvider.h文件

你好，帮忙给看看这是什么原因，找了好几个办法好像都不行

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

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

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

node v6.9.1 Cannot read property 'on' of undefined

already npm install . Have something wrong at node_modules/.1.9.0@fb-watchman/index.js:184:14)

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

Build in xode 8.0

RCTBundleURLProvider.h file not found in AppDelegate.m , What should i do??