Add useScrollToTop offset Snack

Author: kacperkapusciak

static/examples/6.x/use-scroll-to-top-offset.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { View, ScrollView, Image } from 'react-native';
+import { NavigationContainer, useScrollToTop } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+function Albums() {
+  const ref = React.useRef(null);
+
+  useScrollToTop(
+    React.useRef({
+      scrollToTop: () => ref.current?.scrollTo({ y: 100 }),
+    })
+  );
+
+  return (
+    <ScrollView ref={ref}>
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="1"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="2"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="3"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="4"
+      />
+    </ScrollView>
+  );
+}
+
+function HomeScreen() {
+  return <View />;
+}
+
+const Tab = createBottomTabNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen name="Home" component={HomeScreen} />
+        <Tab.Screen name="Albums" component={Albums} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+}

static/examples/7.x/use-scroll-to-top-offset.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { View, ScrollView, Image } from 'react-native';
+import { NavigationContainer, useScrollToTop } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+function Albums() {
+  const ref = React.useRef(null);
+
+  useScrollToTop(
+    React.useRef({
+      scrollToTop: () => ref.current?.scrollTo({ y: 100 }),
+    })
+  );
+
+  return (
+    <ScrollView ref={ref}>
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="1"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="2"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="3"
+      />
+      <Image
+        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
+        style={{ width: 400, height: 400 }}
+        key="4"
+      />
+    </ScrollView>
+  );
+}
+
+function HomeScreen() {
+  return <View />;
+}
+
+const Tab = createBottomTabNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen name="Home" component={HomeScreen} />
+        <Tab.Screen name="Albums" component={Albums} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+}

versioned_docs/version-6.x/use-scroll-to-top.md

@@ -51,6 +51,8 @@ export default function (props) {
 
 If you require offset to scroll position you can wrap and decorate passed reference:
 
+<samp id="use-scroll-to-top-offset" />
+
 ```js
 import * as React from 'react';
 import { ScrollView } from 'react-native';

versioned_docs/version-7.x/use-scroll-to-top.md

@@ -51,6 +51,8 @@ export default function (props) {
 
 If you require offset to scroll position you can wrap and decorate passed reference:
 
+<samp id="use-scroll-to-top-offset" />
+
 ```js
 import * as React from 'react';
 import { ScrollView } from 'react-native';