ParallelWithHook.js

import React from 'react';
import { Animated } from 'react-native';
import {
  useAnimate,
  useAnimateParallel,
} from '@rootstrap/react-native-use-animate';
// Other style and dimension imports

const ParallelAnimatedBox = () => {
  // Be aware: animate should be false for nested animations
  const config = { bounce: true, duration: 1000, animate: false };
  
  const left = useAnimate({ fromValue: 0, toValue: WIDTH - BOX_SIZE, ...config });
  
  const top = useAnimate({ fromValue: 0, toValue: HEIGHT - BOX_SIZE, ...config });
  
  const animatedRotation = useAnimate(config);
  
  useAnimateParallel({
    animations: [left, top, animatedRotation],
    iterations: -1,
  });
  
  return (
    <Animated.View
      style={[
        styles.box,
        {
          left: left.animatedValue,
          top: top.animatedValue,
          transform: [
            {
              rotate: animatedRotation.interpolate({
                outputRange: ['0deg', '360deg'],
              }),
            },
          ],
        },
      ]}
    />
  );
};