* Copyright (c) 2024 Huawei Technologies Co., Ltd.
*
* This source code is licensed under the MIT license found in the
* LICENSE-MIT file in the root directory of this source tree.
*/
import {
FlatList,
Platform,
RefreshControl,
ScrollView,
StyleSheet,
Text,
View,
} from 'react-native';
import { TestCase, TestSuite } from '@rnoh/testerino';
import { useEffect, useState } from 'react';
export const RefreshControlTest = () => {
const [refreshKey, setRefreshKey] = useState(0);
useEffect(() => {
setInterval(() => setRefreshKey(prev => prev + 1), 1000);
}, []);
return (
<TestSuite name="RefreshControl">
<TestCase itShould="display refresh control every second">
<ScrollView
style={{ height: 128, backgroundColor: 'white' }}
refreshControl={
<RefreshControl
refreshing={refreshKey % 2 === 0}
onRefresh={() => { }}
/>
}
/>
</TestCase>
<TestCase itShould="display refresh control with tintColor">
<ScrollView
style={{ height: 128, backgroundColor: 'white' }}
refreshControl={
<RefreshControl
refreshing={refreshKey % 2 === 0}
tintColor={'#FFC0CB'}
onRefresh={() => { }}
/>
}
/>
</TestCase>
<TestCase
modal
itShould="be refreshing for one second after pull to refresh">
<PullToRefreshExample />
</TestCase>
<TestCase
modal
itShould="immediately stop refreshing after pulling to refresh">
<PullToRefreshExample doNothingOnRefresh />
</TestCase>
<TestCase
modal
itShould="refresh with progressViewOffset = undefined"
skip // there is a restriction on how tall the progress view can be - should be removed in API 11 https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/624
>
<PullToRefreshProgressViewOffset />
</TestCase>
<TestCase
modal
itShould="refresh with progressViewOffset = 50"
skip // there is a restriction on how tall the progress view can be - should be removed in API 11 https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/624
>
<PullToRefreshProgressViewOffset progressViewOffset={50} />
</TestCase>
<TestCase
modal
itShould="refresh with progressViewOffset = 100"
skip // there is a restriction on how tall the progress view can be - should be removed in API 11 https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/624
>
<PullToRefreshProgressViewOffset progressViewOffset={100} />
</TestCase>
<TestCase
itShould="display double refresh control for 2 seconds in nested scroll view"
modal
skip={Platform.select({ harmony: true, android: false })} // https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/770
>
<PullToRefreshInNestedScrollViews />
</TestCase>
<TestCase
itShould="display one refresh control - for 3 seconds in nested scroll view"
modal>
<PullToRefreshInNestedScrollViewsDifferentSource />
</TestCase>
</TestSuite>
);
};
function PullToRefreshExample({
doNothingOnRefresh,
}: {
doNothingOnRefresh?: boolean;
}) {
const [isRefreshing, setIsRefreshing] = useState(false);
return (
<FlatList
style={{ height: 256 }}
refreshing={isRefreshing}
onRefresh={() => {
if (!doNothingOnRefresh) {
setIsRefreshing(true);
setTimeout(() => setIsRefreshing(false), 1000);
}
}}
data={[1, 2, 3, 4, 5]}
renderItem={({ item }) => (
<Text style={{ height: 96, borderBottomWidth: 1 }}>{item}</Text>
)}
/>
);
}
function PullToRefreshProgressViewOffset({
progressViewOffset,
}: {
progressViewOffset?: number;
}) {
const [refreshing, setIsRefreshing] = useState(false);
return (
<ScrollView
style={{ height: '90%', backgroundColor: 'lightgray' }}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={() => {
setIsRefreshing(true);
setTimeout(() => setIsRefreshing(false), 3000);
}}
progressViewOffset={progressViewOffset}
/>
}>
<View style={{ height: 50, backgroundColor: 'lightblue' }}>
<Text>First Content Component</Text>
</View>
<View style={{ height: 50, backgroundColor: 'lightgreen' }}>
<Text>Second Content Component</Text>
</View>
<View style={{ height: 50, backgroundColor: 'lightblue' }}>
<Text>Third Content Component</Text>
</View>
</ScrollView>
);
}
const wait = (timeout: number) => {
return new Promise(resolve => {
setTimeout(resolve, timeout);
});
};
const PullToRefreshInNestedScrollViews = () => {
const [refreshing, setRefrehing] = useState(false);
const onRefresh = () => {
setRefrehing(true);
wait(2000).then(() => {
setRefrehing(false);
});
};
return (
<ScrollView
contentContainerStyle={styles.scrollView}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}>
<Text>outer-scrollView</Text>
<Text>outer-scrollView</Text>
<Text>outer-scrollView</Text>
<Text>outer-scrollView</Text>
<Text>outer-scrollView</Text>
<Text>outer-scrollView</Text>
<ScrollView
contentContainerStyle={{
...styles.scrollView,
backgroundColor: 'white',
}}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}>
<Text style={styles.text}>
inner-scrollView Press and hold down the area to refresh. The refresh
label does not bounce back
</Text>
<Text style={styles.text}>
inner-scrollView Press and hold down the area to refresh. The refresh
label does not bounce back
</Text>
<Text style={styles.text}>
inner-scrollView Press and hold down the area to refresh. The refresh
label does not bounce back
</Text>
<Text style={styles.text}>
inner-scrollView 按住该区域下拉刷新，刷新标识不回弹回
</Text>
<Text style={styles.text}>
inner-scrollView 按住该区域下拉刷新，刷新标识不回弹回
</Text>
<Text style={styles.text}>
inner-scrollView 按住该区域下拉刷新，刷新标识不回弹回
</Text>
<Text style={styles.text}>
inner-scrollView 按住该区域下拉刷新，刷新标识不回弹回
</Text>
<Text style={styles.text}>
inner-scrollView 按住该区域下拉刷新，刷新标识不回弹回
</Text>
<Text style={styles.text}>
inner-scrollView 按住该区域下拉刷新，刷新标识不回弹回
</Text>
<Text style={styles.text}>
inner-scrollView Press and hold down the area to refresh. The refresh
label does not bounce back
</Text>
</ScrollView>
</ScrollView>
);
};
const PullToRefreshInNestedScrollViewsDifferentSource = () => {
const [firstRefreshing, setFirstRefrehing] = useState(false);
const [secondRefreshing, setSecondRefrehing] = useState(false);
const onFirstsRefresh = () => {
setFirstRefrehing(true);
wait(3000).then(() => {
setFirstRefrehing(false);
});
};
const onSecondRefresh = () => {
setSecondRefrehing(true);
wait(4000).then(() => {
setSecondRefrehing(false);
});
};
return (
<ScrollView
contentContainerStyle={styles.scrollView}
refreshControl={
<RefreshControl
refreshing={firstRefreshing}
onRefresh={onFirstsRefresh}
/>
}>
<Text>outer-scrollView</Text>
<Text>outer-scrollView</Text>
<Text>outer-scrollView</Text>
<Text>outer-scrollView</Text>
<Text>outer-scrollView</Text>
<Text>outer-scrollView</Text>
<ScrollView
contentContainerStyle={{
...styles.scrollView,
backgroundColor: 'white',
}}
refreshControl={
<RefreshControl
refreshing={secondRefreshing}
onRefresh={onSecondRefresh}
/>
}>
<Text style={styles.text}>
inner-scrollView Press and hold down the area to refresh. The refresh
label does not bounce back
</Text>
<Text style={styles.text}>
inner-scrollView Press and hold down the area to refresh. The refresh
label does not bounce back
</Text>
<Text style={styles.text}>
inner-scrollView Press and hold down the area to refresh. The refresh
label does not bounce back
</Text>
<Text style={styles.text}>
inner-scrollView 按住该区域下拉刷新，刷新标识不回弹回
</Text>
<Text style={styles.text}>
inner-scrollView 按住该区域下拉刷新，刷新标识不回弹回
</Text>
<Text style={styles.text}>
inner-scrollView 按住该区域下拉刷新，刷新标识不回弹回
</Text>
<Text style={styles.text}>
inner-scrollView 按住该区域下拉刷新，刷新标识不回弹回
</Text>
<Text style={styles.text}>
inner-scrollView 按住该区域下拉刷新，刷新标识不回弹回
</Text>
<Text style={styles.text}>
inner-scrollView 按住该区域下拉刷新，刷新标识不回弹回
</Text>
<Text style={styles.text}>
inner-scrollView Press and hold down the area to refresh. The refresh
label does not bounce back
</Text>
</ScrollView>
</ScrollView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
scrollView: {
flex: 1,
backgroundColor: 'pink',
alignItems: 'center',
justifyContent: 'center',
},
text: {
backgroundColor: 'green',
},
});
