Animated.View

Animated.View is a View whose opacity and transform animate to each new value. The runtime runs the animation: React renders the start and the end, never the frames in between.

import { Animated, Pressable, Text, View } from '@soundor/react';
import { useState } from 'react';

// Animated.View animates its opacity and transform to each new style: the
// runtime runs the animation, and React renders only the endpoints.
export default function FadeIn() {
  const [visible, setVisible] = useState(true);

  return (
    <View style={{ alignItems: 'center', gap: 16 }}>
      <Pressable
        onPress={() => setVisible((shown) => !shown)}
        style={({ pressed }) => ({
          paddingVertical: 8,
          paddingHorizontal: 14,
          borderRadius: 6,
          backgroundColor: pressed ? '#2a5fd0' : '#3a7bfd',
        })}
      >
        <Text style={{ color: 'white' }}>{visible ? 'Hide' : 'Show'}</Text>
      </Pressable>
      <Animated.View
        style={{
          opacity: visible ? 1 : 0,
          transform: [
            { translateY: visible ? 0 : 12 },
            { scale: visible ? 1 : 0.95 },
          ],
          padding: 16,
          borderRadius: 10,
          backgroundColor: '#24262c',
        }}
        transition={{ duration: 250, easing: 'ease-out' }}
      >
        <Text style={{ color: '#e6e7ea' }}>Preset loaded</Text>
      </Animated.View>
    </View>
  );
}

animated.tsxSource

Transitions: when opacity or transform changes, it animates from what shows now (even mid-animation) to the new value, with transition: 300 ms linear by default, or duration, delay and easing of your own. Other style properties change at once. Its first style applies at once too.
Unchanged targets do not restart anything, and unmounting cancels its animations, its children's included.
Layout stays: a transform moves how the view is drawn and hit, not where it is laid out.
Reduced motion follows soundor:ui's preference: the browser's media query on the web; natively, the host or your code sets it (setReducedMotion()).

Springs and paint

transition={{ type: 'spring', stiffness, damping, mass }} makes a change spring to its target. animation runs keyframes on their own, here a paint animation that loops:

import { Animated, Pressable, Text, View } from '@soundor/react';
import { useState } from 'react';

// A spring follows the press; a looping paint animation runs on its own.
export default function Spring() {
  const [pressed, setPressed] = useState(false);

  return (
    <View style={{ alignItems: 'center', gap: 20 }}>
      <Pressable
        onPressIn={() => setPressed(true)}
        onPressOut={() => setPressed(false)}
      >
        <Animated.View
          style={{
            transform: [{ scale: pressed ? 0.9 : 1 }],
            paddingVertical: 14,
            paddingHorizontal: 24,
            borderRadius: 12,
            backgroundColor: '#3a7bfd',
          }}
          transition={{ type: 'spring', stiffness: 300, damping: 12, mass: 1 }}
        >
          <Text style={{ color: 'white', fontSize: 16 }}>Press and hold</Text>
        </Animated.View>
      </Pressable>
      <Animated.View
        style={{ width: 160, height: 12, borderRadius: 6 }}
        animation={[
          { backgroundColor: '#204080', offset: 0 },
          { backgroundColor: '#c08040', offset: 1 },
        ]}
        transition={{
          duration: 1000,
          iterations: Infinity,
          direction: 'alternate',
          fill: 'both',
        }}
      />
    </View>
  );
}

spring.tsxSource

Springs animate numbers: opacity and transforms. Paint (background and border colors) needs a timing transition.
animation takes keyframes or a composed description (sequences, parallel groups, staggers, delays: see soundor:ui), and transition gives its playback (iterations, direction, fill). It starts on mount, and again only when its contents or options change: a new array with the same keyframes does not restart it.
Explicit animations win over the style's transitions while they run.
The ref is the view's UiNode, whose animate() composes and controls animations directly.

The animation contract has the details: timing, cancellation, spring physics, and how the browser approximates them.

Props

Prop

Type

Animated.View also takes a View's props, the event props and the accessibility props.

Springs and paintCopy Anchor Link

PropsCopy Anchor Link

On this page

Springs and paint

Props