react-native/packages/rn-tester/js/examples/Animated/RotatingImagesExample.js

/**
 * 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.
 *
 * @format
 * @flow strict-local
 */

import * as React from 'react';
import RNTesterButton from '../../components/RNTesterButton';
import {Animated, View, StyleSheet} from 'react-native';
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
import ToggleNativeDriver from './utils/ToggleNativeDriver';

const styles = StyleSheet.create({
  rotatingImage: {
    width: 70,
    height: 70,
  },
});

function RotatingImagesView({useNativeDriver}: {useNativeDriver: boolean}) {
  const anim = new Animated.Value(0);
  const rotatingAnimation = Animated.spring(anim, {
    // Returns to the start
    toValue: 0,

    // Velocity makes it move
    velocity: 3,

    // Slow
    tension: -10,

    // Oscillate a lot
    friction: 1,
    useNativeDriver,
  });

  return (
    <>
      <RNTesterButton
        onPress={() => {
          rotatingAnimation.start();
        }}>
        Press to Spin it!
      </RNTesterButton>
      <Animated.Image
        source={require('../../assets/bunny.png')}
        style={[
          styles.rotatingImage,
          {
            transform: [
              {
                scale: anim.interpolate({
                  inputRange: [0, 1],
                  outputRange: ([1, 10]: $ReadOnlyArray<number>),
                }),
              },
              {
                translateX: anim.interpolate({
                  inputRange: [0, 1],
                  outputRange: ([0, 100]: $ReadOnlyArray<number>),
                }),
              },
              {
                rotate: anim.interpolate({
                  inputRange: [0, 1],
                  outputRange: ([
                    '0deg',
                    '360deg', // 'deg' or 'rad'
                  ]: $ReadOnlyArray<string>),
                }),
              },
            ],
          },
        ]}
      />
    </>
  );
}

function RotatingImagesExample(): React.Node {
  const [useNativeDriver, setUseNativeDriver] = React.useState(false);

  return (
    <View>
      <RNTConfigurationBlock>
        <ToggleNativeDriver
          value={useNativeDriver}
          onValueChange={setUseNativeDriver}
        />
      </RNTConfigurationBlock>
      <RotatingImagesView
        key={`rotating-images-view-${useNativeDriver ? 'native' : 'js'}-driver`}
        useNativeDriver={useNativeDriver}
      />
    </View>
  );
}

export default ({
  title: 'Rotating Images',
  name: 'rotatingImages',
  description: 'Simple Animated.Image rotation.',
  expect:
    'Transform animation on image in scale, rotation, and translation. JS driver will ignore any calls to `start` on running animation. Native driver will re-start the animation.',
  render: RotatingImagesExample,
}: RNTesterModuleExample);