How do I create a slide animation in React Native?

How do I create a slide animation in React Native?

You can create a slide animation in React Native using the Animated API. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

import React, { useRef } from 'react';
import { View, Animated, Button } from 'react-native';

const SlideAnimation = () => {
  const slideAnim = useRef(new Animated.Value(-100)).current; // Initial position

  const slideIn = () => {
    Animated.timing(slideAnim, {
      toValue: 0,
      duration: 500,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View>
      <Animated.View style={{ transform: [{ translateY: slideAnim }] }}>
        <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
      </Animated.View>
      <Button title="Slide In" onPress={slideIn} />
    </View>
  );
};

This will slide a blue box into view when you press the button.

What if I want to slide it out as well?

You can create a slide-out function similarly. Just adjust the toValue in the Animated.timing method to slide it out. Would you like to see that code?