Skip to content

Commit

Permalink
Add scroll buttons to invertStickyHeaders ScrollView test
Browse files Browse the repository at this point in the history
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
  • Loading branch information
kacieb authored and facebook-github-bot committed Mar 3, 2021
1 parent 921c9ff commit fb0a7ed
Showing 1 changed file with 19 additions and 1 deletion.
20 changes: 19 additions & 1 deletion packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
Expand Down Expand Up @@ -904,20 +905,37 @@ 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>
<Button
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>
);
};
Expand Down

0 comments on commit fb0a7ed

Please sign in to comment.