Move Pressable Sticky Header Example to RNTester

Summary:
Add a test case showing off a pressable sticky header to RNTester.

Note that this test case does not follow the styling of the other ScrollView Examples. I chose not to make it follow the styling because the existing examples need to be refactored later to not use custom buttons.

Changelog:
[General][Added] Add Pressable Sticky Header example to ScrollViewExamples in RNTester

Reviewed By: lunaleaps

Differential Revision: D29437827

fbshipit-source-id: 3ccee5df99bc6f00a04e1ecbd47fbe86b1eda4dc

packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js

@@ -4,13 +4,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
-const React = require('react');
+import * as React from 'react';
 
-const {
+import {
   Platform,
   ScrollView,
   StyleSheet,
@@ -19,13 +19,14 @@ const {
   View,
   TextInput,
   RefreshControl,
-} = require('react-native');
+} from 'react-native';
 
-const nullthrows = require('nullthrows');
+import nullthrows from 'nullthrows';
 
 import {useState, useCallback} from 'react';
 import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
 import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import ScrollViewPressableStickyHeaderExample from './ScrollViewPressableStickyHeaderExample';
 
 exports.displayName = 'ScrollViewExample';
 exports.title = 'ScrollView';
@@ -111,7 +112,10 @@ exports.examples = ([
     title: '<ScrollView> enable & disable\n',
     description: 'ScrollView scrolling behaviour can be disabled and enabled',
     render: function(): React.Node {
-      class EnableDisableList extends React.Component<{...}, *> {
+      class EnableDisableList extends React.Component<
+        {},
+        {scrollEnabled: boolean},
+      > {
         state = {
           scrollEnabled: true,
         };
@@ -187,6 +191,19 @@ exports.examples = ([
       return <MultipleStickyHeaders />;
     },
   },
+  {
+    name: 'pressableStickyHeaders',
+    title: '<ScrollView> Pressable Sticky Header\n',
+    description:
+      'Press the blue box to toggle it between blue and yellow. The box should remain Pressable after scrolling.',
+    render: function(): React.Node {
+      return (
+        <View style={{height: 400}}>
+          <ScrollViewPressableStickyHeaderExample />
+        </View>
+      );
+    },
+  },
   {
     name: 'keyboardShouldPersistTaps',
     title: '<ScrollView> Keyboard Options\n',
@@ -259,7 +276,10 @@ if (Platform.OS === 'ios') {
       'without causing the visible content to jump. Re-ordering is not supported.',
     render: function() {
       let itemCount = 6;
-      class AppendingList extends React.Component<{...}, *> {
+      class AppendingList extends React.Component<
+        {},
+        {items: Array<React.Element<typeof Item>>},
+      > {
         state = {
           items: [...Array(itemCount)].map((_, ii) => (
             <Item msg={`Item ${ii}`} />

packages/rn-tester/js/examples/ScrollView/ScrollViewPressableStickyHeaderExample.js

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import {
+  StyleSheet,
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  Button,
+} from 'react-native';
+import * as React from 'react';
+
+function StickyHeader() {
+  const [backgroundColor, setBackgroundColor] = React.useState('blue');
+  return (
+    <View
+      key={0}
+      style={{
+        backgroundColor: backgroundColor,
+        margin: 10,
+        width: 500,
+        height: 100,
+      }}>
+      <Pressable
+        style={{flex: 1}}
+        onPress={() => {
+          setBackgroundColor(backgroundColor === 'blue' ? 'yellow' : 'blue');
+        }}
+        testID="pressable_header">
+        <Text>Press to change color</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+function renderComponent1(i) {
+  return (
+    <View
+      key={i}
+      style={{backgroundColor: 'red', margin: 10, width: 500, height: 100}}
+    />
+  );
+}
+
+export default function ScrollViewPressableStickyHeaderExample(): React.Node {
+  const scrollRef = React.useRef(null);
+  const components = [];
+  for (var i = 1; i < 10; i++) {
+    components.push(renderComponent1(i));
+  }
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        nestedScrollEnabled={true}
+        ref={scrollRef}
+        style={{flex: 1}}
+        stickyHeaderIndices={[0]}
+        showsVerticalScrollIndicator={false}
+        testID="scroll_pressable_sticky_header">
+        <StickyHeader />
+        {components}
+      </ScrollView>
+      <View>
+        <Button
+          title="scroll to top"
+          onPress={() => {
+            scrollRef.current?.scrollTo({y: 0});
+          }}
+          testID="scroll_to_top_button"
+        />
+        <Button
+          title="scroll to bottom"
+          onPress={() => {
+            scrollRef.current?.scrollToEnd();
+          }}
+          testID="scroll_to_bottom_button"
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+    paddingTop: 30,
+    flex: 1,
+  },
+});