How to: animate a value

You want to animate a style prop (fade, slide, scale, a collapsing header) without reaching for a third-party animation library.

Every adapter — the same Animated namespace

import { Animated } from '@symbiote-native/react'; // or '@symbiote-native/vue' / '@symbiote-native/angular' / '@symbiote-native/svelte' / '@symbiote-native/solid'

const opacity = new Animated.Value(0);

Animated.timing(opacity, {
  toValue: 1,
  duration: 300,
  useNativeDriver: true,
}).start();

Wire it into a primitive’s style

An AnimatedNode written into any style prop of any host tag resolves directly in the engine — the value publishes, subscribes, and gets pushed through a targeted native commit every frame, no wrapper required:

<view style={{ opacity }} />

React

Animated.View/Animated.Text/Animated.Image still exist, as thin convenience aliases over the tags — the dotted form works as written:

<Animated.View style={{ opacity }}>
  <Animated.Text>faded</Animated.Text>
</Animated.View>

There is no Animated.ScrollView any more — style <scroll-view> directly, the same as any other tag: <scroll-view style={{ opacity }} onScroll={Animated.event(...)} />.

Vue

Same as React: Animated.View/Animated.Text/Animated.Image are still RN-compatible aliases over the tags, and the dotted form works as written:

<Animated.View :style="{ opacity }">
  <Animated.Text>faded</Animated.Text>
</Animated.View>

Animated.ScrollView is gone the same way — put the animated value straight on <scroll-view>.

Angular

Angular’s AOT compiler can’t trace a component class through property access, so there’s no dotted <Animated.View> here — import the name directly:

import { AnimatedView, AnimatedText } from '@symbiote-native/angular';
// template: `<AnimatedView [style]="{ opacity }"><AnimatedText>faded</AnimatedText></AnimatedView>`

AnimatedScrollView, AnimatedFlatList, and AnimatedSectionList are also named imports, for the same reason.

Svelte

There is no Animated.View/Animated.Text/Animated.Image/Animated.ScrollView at all — put the animated value straight on the tag:

<view style={{ opacity }}><text>faded</text></view>

Solid

Same as Svelte for View/Text/Image — no wrapper, style the tag directly:

<view style={{ opacity: opacity() }}>
  <text>faded</text>
</view>

Animated.ScrollView is still a real component (the list family stays components), and Solid’s JSX takes the dotted form as written.

See the Animations guide for the rest of the surface (ValueXY, tracking, diffClamp, Animated.event).

Choose a driver

• useNativeDriver: true — for opacity/transform only. Runs entirely on the native side once started; the JS thread can stay busy without stalling the animation.
• useNativeDriver: false (default) — for any other style property. Runs in JS, committing a new value through the engine every frame.

Choose a curve

• Animated.timing(value, { toValue, duration, easing }) — a fixed-duration curve.
• Animated.spring(value, { toValue, ...physics }) — physics-based, and toValue can itself be another Animated.Value to chase a moving target.
• Animated.decay(value, { velocity, deceleration }) — momentum-style deceleration.

Compose several with Animated.parallel([...]), Animated.sequence([...]), Animated.stagger(ms, [...]), or Animated.loop(animation).

For the full working reference — JS driver vs native driver side by side, a PanResponder-driven drag box, a tracking spring, and a diffClamp collapsing header — see AnimatedDemo/AnimatedParityDemo in examples/react/App.tsx.