mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Tim Yung
7c6993d9f9
Summary: Creates a new `Animated.loop` example in RNTester that uses the native driver. This example shows the precise problem fixed by facebook/react-native#29585 (D28383538 (https://github.com/facebook/react-native/commit/129180c77b0b99a3acedbeb04ce6ec4667f74cac)). Changelog: [Internal] Reviewed By: kacieb Differential Revision: D28406914 fbshipit-source-id: 63ea7799d4b8bef8b0c1caaa3daf514ca04b7ab1
73 lines
1.8 KiB
JavaScript
73 lines
1.8 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
import RNTesterButton from '../../components/RNTesterButton';
|
|
import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
|
|
import {Animated, StyleSheet, Text, View} from 'react-native';
|
|
import * as React from 'react';
|
|
import {useEffect, useState} from 'react';
|
|
|
|
export default ({
|
|
title: 'Looping Example',
|
|
name: 'loopingView',
|
|
description: 'Native looping animation that shrinks and fades out a view.',
|
|
render: () => <LoopingExample />,
|
|
}: RNTesterExampleModuleItem);
|
|
|
|
function LoopingExample(props: {}): React.Node {
|
|
const [running, setRunning] = useState(false);
|
|
const [opacity] = useState(() => new Animated.Value(1));
|
|
const [scale] = useState(() => new Animated.Value(1));
|
|
|
|
useEffect(() => {
|
|
if (!running) {
|
|
return;
|
|
}
|
|
const options = {
|
|
duration: 1000,
|
|
toValue: 0,
|
|
useNativeDriver: true,
|
|
};
|
|
const animation = Animated.loop(
|
|
Animated.parallel([
|
|
Animated.timing(opacity, options),
|
|
Animated.timing(scale, options),
|
|
]),
|
|
);
|
|
animation.start();
|
|
return () => {
|
|
animation.reset();
|
|
};
|
|
}, [opacity, running, scale]);
|
|
|
|
return (
|
|
<View>
|
|
<RNTesterButton onPress={() => setRunning(!running)}>
|
|
Press to {running ? 'Reset' : 'Start'}
|
|
</RNTesterButton>
|
|
<Animated.View style={[styles.view, {opacity, transform: [{scale}]}]}>
|
|
<Text>Looping!</Text>
|
|
</Animated.View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
view: {
|
|
backgroundColor: 'deepskyblue',
|
|
borderWidth: 1,
|
|
borderColor: 'dodgerblue',
|
|
borderRadius: 10,
|
|
padding: 20,
|
|
alignItems: 'center',
|
|
margin: 20,
|
|
},
|
|
});
|