DEV Community

Cover image for Library AnimatedContentScroll
Uriel Cisneros
Uriel Cisneros

Posted on • Edited on

Library AnimatedContentScroll

🚀 New React Native component: AnimatedContentScroll.

🎞️ Animate content smoothly from any direction — left, right, top, or bottom — with simple props and great performance.

🧩 Built using Animated.timing with useNativeDriver for smooth 60fps transitions.

📦 Lightweight, zero dependencies, and compatible with React Native CLI projects.

🧠 Fully written in TypeScript with clean and reusable code.
🔧 Perfect for list items, cards, or any UI block that needs a nice entry animation.

📦 Install via npm:

📂 GitHub repo + demo:
🔗 https://lnkd.in/gpxEU-TC

🚀 Usage

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

🔽 Check out the video below to see it in action!

Animate content scroll with differents animations

Top comments (0)