mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Add scroll buttons to invertStickyHeaders ScrollView test
Summary: This diff adds buttons to scroll to top and scroll to end to the invertStickyHeaders ScrollView test. This will allow programmatic scrolling to test sticky header behavior in end-to-end tests. NOTE: This prop doesn't seem to work at all to invert the sticky header. NOTE: There is also a bug where on first render, the sticky header does not "stick" correctly. My diff has not changed this and it seems to be a JS issue - I will investigate in another diff. Changelog: [General][Added] Added scroll buttons to invertStickyHeaders ScrollView test Reviewed By: nadiia Differential Revision: D26735461 fbshipit-source-id: 66db39ab9c9dbc9c62f50c5ff56db67a829f6db8
This commit is contained in:
committed by
Facebook GitHub Bot
parent
921c9ff165
commit
fb0a7edd6c
@@ -197,6 +197,7 @@ exports.examples = ([
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'invertStickyHeaders',
|
||||
title: '<ScrollView> Invert Sticky Headers\n',
|
||||
description:
|
||||
'If sticky headers should stick at the bottom instead of the top of the ScrollView. This is usually used with inverted ScrollViews.',
|
||||
@@ -904,13 +905,16 @@ const KeyboardExample = () => {
|
||||
|
||||
const InvertStickyHeaders = () => {
|
||||
const [invertStickyHeaders, setInvertStickyHeaders] = useState(false);
|
||||
const _scrollView = React.useRef<?React.ElementRef<typeof ScrollView>>(null);
|
||||
return (
|
||||
<View>
|
||||
<ScrollView
|
||||
ref={_scrollView}
|
||||
style={[styles.scrollView, {height: 200}]}
|
||||
stickyHeaderIndices={[0]}
|
||||
invertStickyHeaders={invertStickyHeaders}
|
||||
nestedScrollEnabled>
|
||||
nestedScrollEnabled
|
||||
testID="scroll_sticky_header">
|
||||
{<Text>STICKY HEADER</Text>}
|
||||
{ITEMS.map(createItemRow)}
|
||||
</ScrollView>
|
||||
@@ -918,6 +922,20 @@ const InvertStickyHeaders = () => {
|
||||
onPress={() => setInvertStickyHeaders(!invertStickyHeaders)}
|
||||
label={'invertStickyHeaders: ' + invertStickyHeaders.toString()}
|
||||
/>
|
||||
<Button
|
||||
label="Scroll to top"
|
||||
onPress={() => {
|
||||
nullthrows(_scrollView.current).scrollTo({y: 0});
|
||||
}}
|
||||
testID="scroll_to_top_button"
|
||||
/>
|
||||
<Button
|
||||
label="Scroll to bottom"
|
||||
onPress={() => {
|
||||
nullthrows(_scrollView.current).scrollToEnd({animated: true});
|
||||
}}
|
||||
testID="scroll_to_bottom_button"
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user