feat: handle more methods in useScrollToTop

packages/example/src/Shared/Albums.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Image, Dimensions, ScrollView, StyleSheet } from 'react-native';
+import { useScrollToTop } from '@react-navigation/native';
 
 const COVERS = [
   require('../../assets/album-art-1.jpg'),
@@ -12,19 +13,22 @@ const COVERS = [
   require('../../assets/album-art-8.jpg'),
 ];
 
-export default class Albums extends React.Component {
-  render() {
-    return (
-      <ScrollView
-        style={styles.container}
-        contentContainerStyle={styles.content}
-      >
-        {COVERS.map((source, i) => (
-          <Image key={i} source={source} style={styles.cover} />
-        ))}
-      </ScrollView>
-    );
-  }
+export default function Albums() {
+  const ref = React.useRef<ScrollView>(null);
+
+  useScrollToTop(ref);
+
+  return (
+    <ScrollView
+      ref={ref}
+      style={styles.container}
+      contentContainerStyle={styles.content}
+    >
+      {COVERS.map((source, i) => (
+        <Image key={i} source={source} style={styles.cover} />
+      ))}
+    </ScrollView>
+  );
 }
 
 const styles = StyleSheet.create({

packages/example/src/Shared/Article.tsx

@@ -1,63 +1,63 @@
 import * as React from 'react';
 import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';
+import { useScrollToTop } from '@react-navigation/native';
 
 type Props = {
-  date: string;
-  author: {
+  date?: string;
+  author?: {
     name: string;
   };
 };
 
-export default class Article extends React.Component<Props> {
-  static defaultProps = {
-    date: '1st Jan 2025',
-    author: {
-      name: 'Knowledge Bot',
-    },
-  };
+export default function Article({
+  date = '1st Jan 2025',
+  author = {
+    name: 'Knowledge Bot',
+  },
+}: Props) {
+  const ref = React.useRef<ScrollView>(null);
 
-  render() {
-    const { date, author } = this.props;
+  useScrollToTop(ref);
 
-    return (
-      <ScrollView
-        style={styles.container}
-        contentContainerStyle={styles.content}
-      >
-        <View style={styles.author}>
-          <Image
-            style={styles.avatar}
-            source={require('../../assets/avatar-1.png')}
-          />
-          <View style={styles.meta}>
-            <Text style={styles.name}>{author.name}</Text>
-            <Text style={styles.timestamp}>{date}</Text>
-          </View>
+  return (
+    <ScrollView
+      ref={ref}
+      style={styles.container}
+      contentContainerStyle={styles.content}
+    >
+      <View style={styles.author}>
+        <Image
+          style={styles.avatar}
+          source={require('../../assets/avatar-1.png')}
+        />
+        <View style={styles.meta}>
+          <Text style={styles.name}>{author.name}</Text>
+          <Text style={styles.timestamp}>{date}</Text>
         </View>
-        <Text style={styles.title}>Lorem Ipsum</Text>
-        <Text style={styles.paragraph}>
-          Contrary to popular belief, Lorem Ipsum is not simply random text. It
-          has roots in a piece of classical Latin literature from 45 BC, making
-          it over 2000 years old.
-        </Text>
-        <Image style={styles.image} source={require('../../assets/book.jpg')} />
-        <Text style={styles.paragraph}>
-          Richard McClintock, a Latin professor at Hampden-Sydney College in
-          Virginia, looked up one of the more obscure Latin words, consectetur,
-          from a Lorem Ipsum passage, and going through the cites of the word in
-          classical literature, discovered the undoubtable source.
-        </Text>
-        <Text style={styles.paragraph}>
-          Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de
-          Finibus Bonorum et Malorum&quot; (The Extremes of Good and Evil) by
-          Cicero, written in 45 BC. This book is a treatise on the theory of
-          ethics, very popular during the Renaissance. The first line of Lorem
-          Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
-          section 1.10.32.
-        </Text>
-      </ScrollView>
-    );
-  }
+      </View>
+      <Text style={styles.title}>Lorem Ipsum</Text>
+      <Text style={styles.paragraph}>
+        Contrary to popular belief, Lorem Ipsum is not simply random text. It
+        has roots in a piece of classical Latin literature from 45 BC, making it
+        over 2000 years old.
+      </Text>
+      <Image style={styles.image} source={require('../../assets/book.jpg')} />
+      <Text style={styles.paragraph}>
+        Richard McClintock, a Latin professor at Hampden-Sydney College in
+        Virginia, looked up one of the more obscure Latin words, consectetur,
+        from a Lorem Ipsum passage, and going through the cites of the word in
+        classical literature, discovered the undoubtable source.
+      </Text>
+      <Text style={styles.paragraph}>
+        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus
+        Bonorum et Malorum&quot; (The Extremes of Good and Evil) by Cicero,
+        written in 45 BC. This book is a treatise on the theory of ethics, very
+        popular during the Renaissance. The first line of Lorem Ipsum,
+        &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in section
+        1.10.32.
+      </Text>
+    </ScrollView>
+  );
 }
 
 const styles = StyleSheet.create({

packages/example/src/Shared/Chat.tsx

@@ -7,6 +7,7 @@ import {
   ScrollView,
   StyleSheet,
 } from 'react-native';
+import { useScrollToTop } from '@react-navigation/native';
 
 const MESSAGES = [
   'okay',
@@ -15,49 +16,51 @@ const MESSAGES = [
   'make me a sandwich',
 ];
 
-export default class Chat extends React.Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <ScrollView
-          style={styles.inverted}
-          contentContainerStyle={styles.content}
-        >
-          {MESSAGES.map((text, i) => {
-            const odd = i % 2;
+export default function Chat() {
+  const ref = React.useRef<ScrollView>(null);
 
-            return (
+  useScrollToTop(ref);
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        style={styles.inverted}
+        contentContainerStyle={styles.content}
+      >
+        {MESSAGES.map((text, i) => {
+          const odd = i % 2;
+
+          return (
+            <View
+              key={i}
+              style={[odd ? styles.odd : styles.even, styles.inverted]}
+            >
+              <Image
+                style={styles.avatar}
+                source={
+                  odd
+                    ? require('../../assets/avatar-2.png')
+                    : require('../../assets/avatar-1.png')
+                }
+              />
               <View
-                key={i}
-                style={[odd ? styles.odd : styles.even, styles.inverted]}
+                style={[styles.bubble, odd ? styles.received : styles.sent]}
               >
-                <Image
-                  style={styles.avatar}
-                  source={
-                    odd
-                      ? require('../../assets/avatar-2.png')
-                      : require('../../assets/avatar-1.png')
-                  }
-                />
-                <View
-                  style={[styles.bubble, odd ? styles.received : styles.sent]}
-                >
-                  <Text style={odd ? styles.receivedText : styles.sentText}>
-                    {text}
-                  </Text>
-                </View>
+                <Text style={odd ? styles.receivedText : styles.sentText}>
+                  {text}
+                </Text>
               </View>
-            );
-          })}
-        </ScrollView>
-        <TextInput
-          style={styles.input}
-          placeholder="Write a message"
-          underlineColorAndroid="transparent"
-        />
-      </View>
-    );
-  }
+            </View>
+          );
+        })}
+      </ScrollView>
+      <TextInput
+        style={styles.input}
+        placeholder="Write a message"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

packages/example/src/Shared/Contacts.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { FlatList } from 'react-native-gesture-handler';
+import { View, Text, FlatList, StyleSheet } from 'react-native';
+import { useScrollToTop } from '@react-navigation/native';
 
 type Item = { name: string; number: number };
 
@@ -79,23 +79,24 @@ class ContactItem extends React.PureComponent<{
   }
 }
 
-export default class Contacts extends React.Component {
-  private renderItem = ({ item }: { item: Item }) => (
-    <ContactItem item={item} />
+export default function Contacts() {
+  const ref = React.useRef<FlatList<Item>>(null);
+
+  useScrollToTop(ref);
+
+  const renderItem = ({ item }: { item: Item }) => <ContactItem item={item} />;
+
+  const ItemSeparator = () => <View style={styles.separator} />;
+
+  return (
+    <FlatList
+      ref={ref}
+      data={CONTACTS}
+      keyExtractor={(_, i) => String(i)}
+      renderItem={renderItem}
+      ItemSeparatorComponent={ItemSeparator}
+    />
   );
-
-  private ItemSeparator = () => <View style={styles.separator} />;
-
-  render() {
-    return (
-      <FlatList
-        data={CONTACTS}
-        keyExtractor={(_, i) => String(i)}
-        renderItem={this.renderItem}
-        ItemSeparatorComponent={this.ItemSeparator}
-      />
-    );
-  }
 }
 
 const styles = StyleSheet.create({