Advanced Scrolling

🎢 Advanced Scrolling in React Native

The Magic Scroll Story

Imagine you’re at an all-you-can-eat buffet. The food keeps coming! But here’s the thing—you don’t see ALL the food at once. The chef brings out more dishes as you finish what’s on your plate.

That’s exactly how advanced scrolling works in React Native! Your phone shows a little bit of content, and as you scroll, more appears—like magic!

🌊 Pull to Refresh

What Is It?

You know when you pull down on Instagram or Twitter and see that little spinning circle? That’s Pull to Refresh!

It’s like shaking a snow globe 🌨️—you shake it, and new snow (data) falls down!

How It Works

<FlatList
  data={posts}
  renderItem={renderPost}
  refreshing={isRefreshing}
  onRefresh={handleRefresh}
/>

The Key Parts

Simple Example

const [refreshing, setRefreshing] =
  useState(false);

const onRefresh = async () => {
  setRefreshing(true);
  await fetchNewData();
  setRefreshing(false);
};

Think of it like:

• Pull down = “Hey, got anything new?”
• Spinner = “Let me check…”
• New content = “Here you go!”

♾️ Infinite Scroll

What Is It?

Remember that buffet? Infinite Scroll is like having a waiter who watches you eat. When you’re almost done, they bring MORE food—automatically!

You never hit “the end.” Content just keeps loading!

The Magic Behind It

<FlatList
  data={items}
  renderItem={renderItem}
  onEndReached={loadMore}
  onEndReachedThreshold={0.5}
/>

Understanding the Threshold

onEndReachedThreshold={0.5}

This means: “When user is 50% away from the bottom, start loading!”

graph TD
    A["User Scrolls Down"] --> B{Near Bottom?}
    B -->|Yes| C["onEndReached fires"]
    C --> D["Load More Data"]
    D --> E["Add to List"]
    B -->|No| F["Keep Scrolling"]

Example Code

const [data, setData] = useState([]);
const [page, setPage] = useState(1);

const loadMore = () => {
  fetch(`/api/items?page=${page + 1}`)
    .then(res => res.json())
    .then(newItems => {
      setData([...data, ...newItems]);
      setPage(page + 1);
    });
};

📄 Pagination

What Is It?

Instead of infinite scroll (endless buffet), Pagination is like a book 📚. You read page 1, then flip to page 2, then page 3…

Each page shows a fixed number of items!

Two Types

1. Button-Based Pagination

<View>
  <FlatList data={currentPageData} />
  <Button
    title="Next Page"
    onPress={() => setPage(page + 1)}
  />
</View>

2. Load More Button

<FlatList
  data={allLoadedData}
  ListFooterComponent={
    <Button
      title="Load More"
      onPress={loadNextPage}
    />
  }
/>

When to Use What?

📍 Scroll Position

What Is It?

Ever scrolled way down a long list, then wanted to know exactly where you are? That’s Scroll Position!

It’s like having a GPS 🗺️ for your scrolling!

Tracking Position

<FlatList
  onScroll={(event) => {
    const position = event
      .nativeEvent
      .contentOffset.y;
    console.log('Position:', position);
  }}
/>

What the Numbers Mean

contentOffset.y = 0    → Top of list
contentOffset.y = 100  → Scrolled 100px down
contentOffset.y = 500  → Scrolled 500px down

Real-World Uses

1. “Back to Top” Button

const [showButton, setShowButton] =
  useState(false);

const handleScroll = (e) => {
  const y = e.nativeEvent.contentOffset.y;
  setShowButton(y > 300);
};

2. Progress Indicator

const scrollProgress =
  scrollY / totalContentHeight;
// 0.5 = halfway through!

🎮 Programmatic Scrolling

What Is It?

Sometimes YOU want to control the scroll—not the user! It’s like having a remote control for your list! 🎯

The Magic Tool: useRef

const listRef = useRef(null);

<FlatList
  ref={listRef}
  data={items}
  renderItem={renderItem}
/>

Three Super Powers

1. scrollToIndex - Jump to specific item

listRef.current.scrollToIndex({
  index: 5,
  animated: true
});
// Jumps to 6th item!

2. scrollToOffset - Jump to exact position

listRef.current.scrollToOffset({
  offset: 200,
  animated: true
});
// Jumps to 200px mark!

3. scrollToEnd - Jump to bottom

listRef.current.scrollToEnd({
  animated: true
});
// Zooms to the end!

Common Uses

graph TD
    A["Programmatic Scroll"] --> B["Chat Apps"]
    A --> C["Jump to Unread"]
    A --> D["Back to Top"]
    A --> E["Auto-scroll New Messages"]

🪆 Nested Scrolling

What Is It?

Imagine a scroll inside a scroll! Like a drawer inside a closet inside a room! 🏠

This happens when you have:

• A scrollable page
• With a scrollable list inside

The Challenge

When both can scroll, React Native asks: “Wait, which one should move?!”

The Solution

Use nestedScrollEnabled (Android)

<ScrollView>
  <Text>Header Content</Text>

  <FlatList
    nestedScrollEnabled={true}
    data={items}
    renderItem={renderItem}
    style={{ height: 300 }}
  />

  <Text>Footer Content</Text>
</ScrollView>

Better Pattern: Sections

Instead of nesting, use SectionList!

<SectionList
  sections={[
    { title: 'Today', data: todayItems },
    { title: 'Yesterday', data: yesterdayItems }
  ]}
  renderItem={({ item }) => (
    <Text>{item.name}</Text>
  )}
  renderSectionHeader={({ section }) => (
    <Text>{section.title}</Text>
  )}
/>

Best Practices

🎯 Quick Summary

🚀 You Did It!

You now understand the six superpowers of advanced scrolling:

1. Pull to Refresh - Shake for new content
2. Infinite Scroll - Endless content loading
3. Pagination - Book-style page flipping
4. Scroll Position - GPS for your scroll
5. Programmatic Scrolling - Remote control mode
6. Nested Scrolling - Scroll-ception! 🌀

With these tools, you can build smooth, professional scrolling experiences that feel amazing on mobile!

Remember: Great scrolling = Happy users! 🎉