Transform rotation at degrees 0.1-0.4 is invisible

Is this a bug report?

Yes.

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: Windows 10 Node: 8.4.0 Yarn: 0.19.1 npm: 5.4.2 Watchman: Not Found Xcode: N/A Android Studio: Version 2.3.0.0 AI-162.3764568

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

Steps to Reproduce

We figured this bug out on Stackoverflow - https://stackoverflow.com/q/47817314/1828637

I see this behavior on both iOS and Android.Content within the card flashes (hides then reappears instantly) after the transform animation starts and animation ends when is in between degrees of 0.1-0.4.

This only happens if I do rotate, rotateY, or rotateX (untested rotateZ). I have no idea why.

Here is screencast:

High quality webm - https://gfycat.com/SplendidCompetentEnglishpointer

Low quality gif:

My render code is this:

        <View style={style}>
            <Animated.View style={[styleCommon, styleFace]}><Text>front</Text></Animated.View>
            <Animated.View style={[styleCommon, styleBack]}><Text>front</Text></Animated.View>
        </View>

And my styles are:

const styleCommon = {
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
        elevation: 2,
        shadowRadius: 2,
        shadowOpacity: 0.4,
        shadowOffset: { height:1 },
        overflow: 'hidden',
        width: '100%',
        height: '100%',
        position: 'absolute',
        backgroundColor: '#FFFFFF'
}

    const styleFace = {
        opacity: anim.interpolate({ inputRange:[0,.5,.5,1], outputRange:[1,1,0,0] }),
        transform: [
            { rotateY:anim.interpolate({ inputRange:[0,1], outputRange:['0deg', '180deg'] }) }
        ]
    };
    const styleBack = {
        opacity: anim.interpolate({ inputRange:[0,.5,.5,1], outputRange:[0,0,1,1] }),
        transform: [
            { rotateY:anim.interpolate({ inputRange:[0,1], outputRange:['-180deg', '0deg'] }) }
        ]
    };

Expected Behavior

Should not be invisible

Actual Behavior

Is invisible at these degrees

Reproducible Demo

No proejct but stackoverflow topic - https://stackoverflow.com/q/47817314/1828637

Here was a work around:

found it should be a bug of transform in react-native, showing view from 0.1 deg to 0.4 deg, and from -0.1 deg to -0.4 deg. Everything disappears within these degree.

That can be easily proven, by set start degree to 0.1 ~ 0.4.

transform: [
    { rotateY:anim.interpolate({ inputRange:[0,1], outputRange:['0.1deg', '180deg'] }) }
]

A quick workaround for this could be bypassing those Bermuda Degree:

const styleFace = {
  transform: [
    { rotateY:this.anim.interpolate({ inputRange:[0,0.01,0.01,1], outputRange:['0deg', '0deg', '0.4deg', '180deg'] }) }
  ]
};
const styleBack = {
  transform: [
    { rotateY:this.anim.interpolate({ inputRange:[0,0.99,0.99,1], outputRange:['-180deg', '-0.4deg', '0deg', '0deg'] }) }
  ]
};

facebook / react-native