React-native: Rotated TouchableOpacity crashes on Android when selected.

[skicson]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Run react-native info in your terminal and paste its contents here.
Environment:
OS: macOS Sierra 10.12.6
Node: 6.11.1
Yarn: Not Found
npm: 3.10.10
Watchman: Not Found
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4

Description

Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know.

Applying a rotation transform to a TouchableOpacity component will crash when selected on Android.

Stack trace:

06-27 11:02:26.227 725-725/com.extracker E/unknown:ReactNative: Exception in native call
                                                                java.lang.ClassCastException: java.lang.String cannot be cast to java.lang.Double
                                                                    at com.facebook.react.bridge.ReadableNativeMap.getDouble(ReadableNativeMap.java:147)
                                                                    at com.facebook.react.animated.TransformAnimatedNode.<init>(TransformAnimatedNode.java:53)
                                                                    at com.facebook.react.animated.NativeAnimatedNodesManager.createAnimatedNode(NativeAnimatedNodesManager.java:105)
                                                                    at com.facebook.react.animated.NativeAnimatedModule$4.execute(NativeAnimatedModule.java:202)
                                                                    at com.facebook.react.animated.NativeAnimatedModule$3.execute(NativeAnimatedModule.java:150)
                                                                    at com.facebook.react.uimanager.UIViewOperationQueue$UIBlockOperation.execute(UIViewOperationQueue.java:512)
                                                                    at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:821)
                                                                    at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:928)
                                                                    at com.facebook.react.uimanager.UIViewOperationQueue.access$2100(UIViewOperationQueue.java:46)
                                                                    at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:988)
                                                                    at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
                                                                    at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:134)
                                                                    at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:105)
                                                                    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:856)
                                                                    at android.view.Choreographer.doCallbacks(Choreographer.java:670)
                                                                    at android.view.Choreographer.doFrame(Choreographer.java:603)
                                                                    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:844)
                                                                    at android.os.Handler.handleCallback(Handler.java:739)
                                                                    at android.os.Handler.dispatchMessage(Handler.java:95)
                                                                    at android.os.Looper.loop(Looper.java:148)
                                                                    at android.app.ActivityThread.main(ActivityThread.java:5417)
                                                                    at java.lang.reflect.Method.invoke(Native Method)
                                                                    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
                                                                    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, share a project, or share an app that reproduces the issue using https://snack.expo.io/. Please follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve

https://snack.expo.io/HkD7dm-G7

[skicson]

FYI, TouchableHighlight does not crash.

[VitorLuizC]

I can confirm this issue. It also crashes with rotateX and rotateY transform props.

[Bigood]

I confirm this issue on RN 0.55. I may add that a rotated TouchableOpacity loses its touchable behavior when this crash.

Workaround

Conditionally use radians, they get converted to double without error.

    transform: [
      {rotate: (Platform.OS === 'ios') ? '45deg' : (3.14159/4)+'rad'}
    ]

Plus, use a child view to apply your rotation on :

<TouchableOpacity onPress={…}>
      <View style={styles.rotate45}>
         ...
      </View>
</TouchableOpacity>

Question & answer on SO for better indexation of this issue.

[embashgit]

component generates error on react native any suggestion pls

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[kelset]

Hello there 👋

By using the code in the repro, we can't actually see the reported bug on RN 0.59 so we'll close this issue.

[HarshaKoshila]

Magic Answer
You can rotate View instead TouchableOpacity. Change same width and height separately

<TouchableOpacity  style={{  height: 100, width: 20 }} >
                <View style={{  height: 20, width: 100, transform: [{ rotate: '90deg' }] }}>
                       <Text>PRESS</Text>
                </View>
</TouchableOpacity>