Some ReactProp names are incorrectly considered ReactPropGroup #17030
Description
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
git clone git@github.com:tiagoalves/rn-reactprops-issue-sample.gitcd rn-reactprops-issue-sampleyarnyarn run android- See the app crash.
- Have a look at
App.jsand change the<SampleModuleas 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.