diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js index 24f91a311aa52c..2b935d58e4761d 100644 --- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js +++ b/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: ' 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 ; }, }, + { + name: 'pressableStickyHeaders', + title: ' 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 ( + + + + ); + }, + }, { name: 'keyboardShouldPersistTaps', title: ' 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>}, + > { state = { items: [...Array(itemCount)].map((_, ii) => ( diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewPressableStickyHeaderExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewPressableStickyHeaderExample.js new file mode 100644 index 00000000000000..98b706007a2c40 --- /dev/null +++ b/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 ( + + { + setBackgroundColor(backgroundColor === 'blue' ? 'yellow' : 'blue'); + }} + testID="pressable_header"> + Press to change color + + + ); +} + +function renderComponent1(i) { + return ( + + ); +} + +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 ( + + + + {components} + + +