import { AnimatedContentScroll } from 'react-native-animated-content-scroll';

export default function MyScreen() {
  return (
    <View style={{ padding: 20 }}>
      {[...Array(5)].map((_, index) => (
        <AnimatedContentScroll key={index} index={index}>
          <Text style={{ fontSize: 18, marginBottom: 10 }}>Item {index + 1}</Text>
        </AnimatedContentScroll>
      ))}
    </View>
  );
}

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { AnimatedListContainer } from 'react-native-animated-content-scroll';

export default function BasicAnimatedList() {
  const [items, setItems] = useState([
    { id: 1, label: "Item One" },
    { id: 2, label: "Item Two" },
    { id: 3, label: "Item Three" },
    { id: 4, label: "Item Four" },
    { id: 5, label: "Item Five" },
    { id: 6, label: "Item Six" },
  ]);

  const removeLastItem = () => {
    setItems((prev) => prev.slice(0, -1));
  };

  return (
    <View style={{ padding: 20, flex: 1, justifyContent: "center" }}>
      <Button title="Remove Last Item" onPress={removeLastItem} />
      <AnimatedListContainer
        items={items}
        direction="right"
        renderItem={(item) => (
          <View
            style={{
              backgroundColor: "#f2f2f2",
              padding: 12,
              marginVertical: 6,
              borderRadius: 8,
              alignItems: "center",
            }}
          >
            <Text>{item.label}</Text>
          </View>
        )}
      />
    </View>
  );
}