Skip to content

Non zero borderRadius brakes transform on Android #17400

@rlz

Description

@rlz

Is this a bug report?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 8.1.4
Yarn: Not Found
npm: 5.6.0
Watchman: Not Found
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.2.0 => 16.2.0
react-native: ^0.51.0 => 0.51.0

Steps to Reproduce

Draw simple component:

function Test() {
    return <Animated.View style={[
        {
            backgroundColor: "red",
            marginTop: 30
        },
        {
            transform: [
                {perspective: 850},
                {rotateY: '45deg'}
            ]
        }
    ]}>
        <Text>Bla-bla-bla</Text>
        <View style={{
            borderWidth: 1,
            margin: 10,
            padding: 10,
            borderRadius: 10,
        }}>
            <Text>Test Button</Text>
        </View>
    </Animated.View>
}

On iOS it works as expected:

On Android it is not (I tried both the emulator and my phone):

Actually, if I animate this rotation it looks very weird on Android.

If I comment out "borderRadius" style property everything works as expected on both Android and iOS:

Metadata

Metadata

Assignees

No one assigned

    Labels

    Ran CommandsOne of our bots successfully processed a command.Resolution: LockedThis issue was locked by the bot.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions