Continuously animated view throttles CPU on android emulator

[carljoachim]

• [✅] 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

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Memory: 444.11 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
Build Tools: 23.0.1, 24.0.2, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.3, 28.0.2
API Levels: 23, 24, 25, 26, 27, 28
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.1/10B61 - /usr/bin/xcodebuild

Description

I've created an icon that are supposed to pulsate continuously in my app. Sometimes there will also be multiple "live" icons on the same screen, indicating that something is live.

The problem is that when the icon is animating, this results in a CPU rise to over 500% for the Android Emulator (qemu-system-x86_64) and it is not getting any lower as long as the icon is animating.

For iOS it seems like it working out quite nice.

Reproducible Demo

class AnimatedRealtimeIcon extends React.Component<Props> {
    animationPulse: new Animated.Value(0)

    componentDidMount() {
        Animated.loop(Animated.timing(this.animationPulse, {
            toValue: 1,
            duration: 2500,
            useNativeDriver: true,
            isInteraction: false,
        })).start()
    }

    interpolateTo = outputRange => this.animationPulse.interpolate({
        inputRange: [0, 1],
        outputRange,
    })

    render() {
        return (<View style={ styles.dotContainer }>
            <View style={ 
                [styles.dot, 
                  {
                    position: 'absolute',
                  }
                ]}
            />
            <Animated.View style={ 
                [styles.dot, {
                  transform: [ {
                      scale: this.interpolateTo([0.5, 3]),
                    }],
                    position: 'absolute',
                    opacity: this.interpolateTo([1, 0]),            
                }]}
            />
        </View>)
    }
}
const styles = StyleSheet.create({
    dotContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        marginHorizontal: 4,
    },
    dot: {
        backgroundColor: '#9BA4D2',
        alignItems: 'center',
        justifyContent: 'center',
        height: 6,
        width: 6,
        borderRadius: 4
    },
})

[cpojer]

cc @janicduplessis

[janicduplessis]

Maybe it's a drawing perf issue, you could try setting renderToHardwareTextureAndroid on your Animated.View.

[stale]

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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.