Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add scrollToEnd ability to viewability tests

Browse Source 
Summary:
Changelog:
[Internal] - RNTester FlatList and SectionList examples to add prop for scrolling to end of list.

Reviewed By: kacieb

Differential Revision: D27816830

fbshipit-source-id: 6b4bd4cb9a651f4a4e9045d600cc219a6ba2e39b
This commit is contained in:
Luna Wei
2021-04-21 15:09:33 -07:00
committed by Facebook GitHub Bot
parent 73844712b6
commit ca8a75536e
2 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/rn-tester/js/examples/FlatList/FlatListExamples.js
+14 -3
View File
@@ -188,8 +188,9 @@ export function FlatList_onViewableItemsChanged(props: {
viewabilityConfig: ViewabilityConfig,
offScreen?: ?boolean,
horizontal?: ?boolean,
useScrollRefScroll?: ?boolean,
}): React.Node {
const {viewabilityConfig, offScreen, horizontal} = props;
const {viewabilityConfig, offScreen, horizontal, useScrollRefScroll} = props;
const [output, setOutput] = React.useState('');
const onViewableItemsChanged = React.useCallback(
info =>
@@ -207,9 +208,19 @@ export function FlatList_onViewableItemsChanged(props: {
horizontal,
};
const ref = React.useRef(null);
const onTest =
useScrollRefScroll === true
? () => {
ref?.current?.getScrollResponder()?.scrollToEnd();
}
: null;
return (
<FlatListExampleWithForwardedRef
ref={ref}
exampleProps={exampleProps}
onTest={onTest}
testOutput={output}>
{offScreen === true ? <View style={styles.offScreen} /> : null}
</FlatListExampleWithForwardedRef>
@@ -230,7 +241,7 @@ const FlatListExampleWithForwardedRef = React.forwardRef(
<View style={styles.container}>
{props.testOutput != null ? (
<View testID="test_container" style={styles.testContainer}>
<Text numberOfLines={1} testID="output">
<Text style={styles.output} numberOfLines={1} testID="output">
{props.testOutput}
</Text>
{props.onTest != null ? (
@@ -290,11 +301,11 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#f2f2f7ff',
padding: 4,
height: 40,
},
output: {
fontSize: 12,
width: '80%',
},
separator: {
height: 12,
packages/rn-tester/js/examples/SectionList/SectionListExamples.js
+13 -3
View File
@@ -226,8 +226,9 @@ export function SectionList_onViewableItemsChanged(props: {
viewabilityConfig: ViewabilityConfig,
offScreen?: ?boolean,
horizontal?: ?boolean,
useScrollRefScroll?: ?boolean,
}): React.Node {
const {viewabilityConfig, offScreen, horizontal} = props;
const {viewabilityConfig, offScreen, horizontal, useScrollRefScroll} = props;
const [output, setOutput] = React.useState('');
const exampleProps = {
onViewableItemsChanged: info =>
@@ -240,10 +241,19 @@ export function SectionList_onViewableItemsChanged(props: {
viewabilityConfig,
horizontal,
};
const ref = React.useRef(null);
const onTest =
useScrollRefScroll === true
? () => {
ref?.current?.getScrollResponder()?.scrollToEnd();
}
: null;
return (
<SectionListExampleWithForwardedRef
ref={ref}
exampleProps={exampleProps}
onTest={onTest}
testOutput={output}>
{offScreen === true ? <View style={styles.offScreen} /> : null}
</SectionListExampleWithForwardedRef>
@@ -264,7 +274,7 @@ const SectionListExampleWithForwardedRef = React.forwardRef(
<View style={styles.container}>
{props.testOutput != null ? (
<View testID="test_container" style={styles.testContainer}>
<Text numberOfLines={1} testID="output">
<Text style={styles.output} numberOfLines={1} testID="output">
{props.testOutput}
</Text>
{props.onTest != null ? (
@@ -327,10 +337,10 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#f2f2f7ff',
padding: 4,
height: 40,
},
output: {
width: '80%',
fontSize: 12,
},
separator: {