Some ReactProp names are incorrectly considered ReactPropGroup

[tiagoalves]

Is this a bug report?

Yes.

Have you read the Contributing Guidelines?

Yes.

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.5.0
Yarn: 1.2.0
npm: 5.4.2
Watchman: 4.9.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.51.0-rc.2 => 0.51.0-rc.2

Steps to Reproduce

In RN 0.51.0-rc.2 there appears to be a problem with the properties passed from JS to the native layer. This issue doesn't exist in RN 0.50.0.

When declaring a property with @ReactProp(name=...), certain property names appear to be considered @ReactPropGroup(name=...). I came to this conclusion by following the stacktrace included below.

My error message in particular is: TypeError: expected dynamic type 'double', but had type 'array'

This only happens with certain words like "start", "end", "position", etc.

It looks like these properties are inherited from some other object in the native module's hierarchy where they might have been declared with @ReactPropGroup.

A code example follows (note my inline comments):

@ReactProp(name="start") // <--- This doesn't work
public void setStartPosition(SampleModuleView gradientView, ReadableArray startPos) {
    gradientView.setStartPosition(startPos);
}

@ReactProp(name="startsomething") // <--- This works
public void setStartFooBarPosition(SampleModuleView gradientView, ReadableArray startPos) {
    gradientView.setStartPosition(startPos);
}

Expected Behavior

Property names such as "start" and "end" should be considered the type of property they were declared as (@ReactProp, in this case).

Actual Behavior

The app crashed with the following stack trace:

Error while updating prop start
java.lang.reflect.InvocationTargetException
	at java.lang.reflect.Method.invoke(Native Method)
	at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:107)
	at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty(ViewManagerPropertyUpdater.java:154)
	at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:58)
	at com.facebook.react.uimanager.ReactShadowNodeImpl.updateProperties(ReactShadowNodeImpl.java:298)
	at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:289)
	at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:373)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:374)
	at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:162)
	at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
	at android.os.Handler.handleCallback(Handler.java:751)
	at android.os.Handler.dispatchMessage(Handler.java:95)
	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
	at android.os.Looper.loop(Looper.java:154)
	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:194)
	at java.lang.Thread.run(Thread.java:761)
Caused by: com.facebook.react.bridge.UnexpectedNativeTypeException: TypeError: expected dynamic type `double', but had type `array'
	at com.facebook.react.bridge.ReadableNativeMap.getDouble(Native Method)
	at com.facebook.react.bridge.DynamicFromMap.asDouble(DynamicFromMap.java:66)
	at com.facebook.react.uimanager.LayoutShadowNode$MutableYogaValue.setFromDynamic(LayoutShadowNode.java:57)
	at com.facebook.react.uimanager.LayoutShadowNode.setPositionValues(LayoutShadowNode.java:668)
	... 17 more
Exception in native call
com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'start' in shadow node of type: SampleModule
	at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:113)
	at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty(ViewManagerPropertyUpdater.java:154)
	at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:58)
	at com.facebook.react.uimanager.ReactShadowNodeImpl.updateProperties(ReactShadowNodeImpl.java:298)
	at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:289)
	at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:373)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:374)
	at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:162)
	at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
	at android.os.Handler.handleCallback(Handler.java:751)
	at android.os.Handler.dispatchMessage(Handler.java:95)
	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
	at android.os.Looper.loop(Looper.java:154)
	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:194)
	at java.lang.Thread.run(Thread.java:761)
Caused by: java.lang.reflect.InvocationTargetException
	at java.lang.reflect.Method.invoke(Native Method)
	at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:107)
	... 15 more
Caused by: com.facebook.react.bridge.UnexpectedNativeTypeException: TypeError: expected dynamic type `double', but had type `array'
	at com.facebook.react.bridge.ReadableNativeMap.getDouble(Native Method)
	at com.facebook.react.bridge.DynamicFromMap.asDouble(DynamicFromMap.java:66)
	at com.facebook.react.uimanager.LayoutShadowNode$MutableYogaValue.setFromDynamic(LayoutShadowNode.java:57)
	at com.facebook.react.uimanager.LayoutShadowNode.setPositionValues(LayoutShadowNode.java:668)
	... 17 more

Reproducible Demo

1. git clone git@github.com:tiagoalves/rn-reactprops-issue-sample.git
2. cd rn-reactprops-issue-sample
3. yarn
4. yarn run android
5. See the app crash.
6. Have a look at App.js and change the <SampleModule as indicated in the code comments and it should not crash anymore (there's no visible indication of success).

I detected this issue when updating to the latest RC of RN in module react-native-linear-gradient. My example code is based on that module.

[tiagoalves]

Just tried v0.51.0 (final) and this issue persists.

[wellyshen]

I have the same issue.

[techrah]

Same here. It's impacting my ability to use react-native-linear-gradient and I'm wondering what other side effects this issue may have. If anyone comes up with a workaround, please share.

[terribleben]

This may be related: 38b5506

(iOS is seeing a different symptom than the Android stack trace given in the issue, but it looks like the same bug)

[dluksza]

Same issue here #17122

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.