Rotated TouchableOpacity crashes on Android when selected.

Review the documentation: https://facebook.github.io/react-native
Search for existing issues: https://github.com/facebook/react-native/issues
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

FYI, TouchableHighlight does not crash.

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

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.

component generates error on react native any suggestion pls

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.

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.

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>

Navigation Menu

Repository navigation

Rotated TouchableOpacity crashes on Android when selected. #19931

Environment

Description

Reproducible Demo

Workaround

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Rotated TouchableOpacity crashes on Android when selected. #19931

Description

Environment

Description

Reproducible Demo

Activity

skicson commented on Jun 27, 2018

VitorLuizC commented on Jul 24, 2018

Bigood commented on Oct 11, 2018

Workaround

embashgit commented on Oct 16, 2018

stale commented on Jan 16, 2019

kelset commented on Mar 19, 2019

HarshaKoshila commented on May 10, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions