Motion

Reactnatively's motion system is built on react-native-reanimated. It ships pre-configured spring presets, interaction-aware press animations, entrance animation hooks, and transition components — all coordinated by the global InteractionProvider.

Building blocks

Spring presets

SPRING_SNAPPY, SPRING_LIQUID, SPRING_REVEAL, SPRING_BOUNCE, SPRING_PRECISE — ready to pass to withSpring()

usePressAnimation

Scale + opacity animation tied to press/release events. Reads intensity from InteractionProvider.

useEntranceAnimation

Entrance variants: fade, scale, slideUp, slideDown. Reduced motion safe.

InteractionProvider

Global intensity policy, press scale, default spring, and haptic config.

Transition components

Fade, Scale, Slide, BlurTransition — declarative enter/exit wrappers.

MagneticPressable

Pressable with magnetic pull-back motion on touch.

Reduced motion

All motion hooks read the OS reduced-motion accessibility setting via Reanimated's useReducedMotion. When reduced motion is enabled, animations snap to their end state without interpolation. No extra configuration needed.

typescript

import { useReducedMotion } from 'reactnatively';

function MyAnimatedComponent() {
  const isReduced = useReducedMotion();
  // isReduced === true when system setting is on
  // All built-in motion hooks handle this automatically
}

Quick start — press animation

PressableCard.tsx

1import { usePressAnimation } from 'reactnatively';2import Animated from 'react-native-reanimated';3import { Pressable, Text } from 'react-native';45export function PressableCard() {6  const { animatedStyle, handlers } = usePressAnimation({7    pressedScale:   0.96,  // scale down 4% on press8    pressedOpacity: 0.88,  // reduce opacity on press9  });1011  return (12    <Animated.View style={animatedStyle}>13      <Pressable14        onPressIn={handlers.onPressIn}15        onPressOut={handlers.onPressOut}16        style={{ padding: 20, borderRadius: 16, backgroundColor: 'rgba(255,255,255,0.06)' }}17      >18        <Text style={{ color: '#fff' }}>Press me</Text>19      </Pressable>20    </Animated.View>21  );22}

Quick start — entrance animation

AnimatedCard.tsx

1import { useEntranceAnimation } from 'reactnatively';2import Animated from 'react-native-reanimated';3import { View, Text } from 'react-native';45export function AnimatedCard({ visible }: { visible: boolean }) {6  const style = useEntranceAnimation({7    variant:  'slideUp',   // 'fade' | 'scale' | 'slideUp' | 'slideDown'8    visible,9    delay:    80,          // ms delay before animation starts10  });1112  return (13    <Animated.View style={style}>14      <View style={{ padding: 20 }}>15        <Text style={{ color: '#fff' }}>Animated content</Text>16      </View>17    </Animated.View>18  );19}

Spring presets InteractionProvider