React-native scroll to top with pull to refresh iOS - react-native

Question

I have a react-native app, that I want to scroll to top when the FlatList is refreshing in iOS. I can scroll to the top of the FlaList by using:
this.componentRef.FlatList.scrollToOffset({x: 0, y: 0, animated: true});
Now, the list has Pull-to-refresh on, so I would like to scroll above the refreshing indicator in iOS.
I tried:
this.componentRef.FlatList.scrollToOffset({x: 0, y: -20, animated: true});
and declaring the RefreshControl with a ref as refreshcontrol (using callback ref declaration):
this.componentRef.FlatList.refreshcontrol.scrollToOffset({x: 0, y: 0, animated: true});
and
this.componentRef.refreshcontrol.scrollToOffset({x: 0, y: 0, animated: true});
But none work. Is anyone aware of a way I can scroll above the refreshing indicator, if its on? This only happens in iOS as Android's refreshing indicator works differently.
UPDATE:
As scrollToOffset is not available for the RefrehControl component, it won;t work. Which brings me back to how can I scroll above a RefreshControl in a FlatList. My last attempt:
this.FlatList.scrollToOffset({x: 0, y: 0, animated: true});
Still scrolls to the beginning of the list, yet the "RefreshControl" is visually hidden.
I also tried adding an empty ScrollView above and scrolling to it, because it is empty, it did not work. Any ideas?
UPDATE 2
To clarify, this is how everything is called (simplified):
_scrollAndRefresh method in Main.js:
_scrollAndRefresh = () => {
this.setState({
loading: true
}, () => {
this.CustomFlatList._scrollToTop();
});
}
Rendering the component in Main.js:
<CustomFlatList ref={(ref) => {
this.CustomFlatList = ref}}
onRefresh={this._handleRefresh} loading={this.state.loading}/>
_handleRefresh method in Main.js:
_handleRefresh = () => {
this.setState({
loading: true
}, () => {
// REFRESH ACTION
})
};
_scrollToTop method CustomFlatList.js:
_scrollToTop = () => {
if (Platform.OS === 'ios' && this.props.loading) {
this.FlatList.scrollToOffset({x: 0, y: 0, animated: true});
}
else {
this.FlatList.scrollToOffset({x: 0, y: 0, animated: true});
}
}
And FlatList CustomFlatList.js:
<FlatList
ref={(ref) => { this.FlatList = ref; }}
refreshControl={<RefreshControl
refreshing={this.props.loading}
onRefresh={this.props.onRefresh}
/>}
/>

Answer 1

Since <RefreshControl /> detect refresh behavior from gesture, <FlatList /> scroll method has no effect on it; And you are just attempt to hack it.
Suggest to do it this way. You still scroll to top and shows refresh, and more directly:
constructor(props) {
super(props);
this.state = {
refreshing: false,
}
}
/// scroll to top, and show refresh at the same time
scrollToTopAndRefresh() {
this.componentRef.FlatList.scrollToOffset({x: 0, y: 0, animated: true});
this.setState({
refreshing: true,
}, () => {
this.refresh();
});
}
refresh() {
/// put your refresh logic here
}
componentRef = {};
render() {
return (
<FlatList ref={ (ref) => this.componentRef.FlatList = ref }
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={() => this.refresh()}
/>
}
/>
);
}
Update 2:
I made a simple workable code for your needs.
import React, { Component } from 'react';
import {
Image,
View,
FlatList,
Text,
StyleSheet,
Button,
RefreshControl,
} from 'react-native';
export class App extends Component {
constructor(props) {
super(props);
this.scrollToTopAndRefresh = this.scrollToTopAndRefresh.bind(this);
this.doRefresh = this.doRefresh.bind(this);
this.state = {
refreshing: false,
}
}
scrollToTopAndRefresh() {
this.flatlistref.scrollToOffset({y: 0, animated: true});
this.setState({refreshing: true}, this.doRefresh);
}
doRefresh() {
/// do refresh work here /////
//////////////////////////////
setTimeout( () => this.setState({refreshing: false}), 1000);
}
flatlistref = null;
render() {
return (
<View style={{flex: 1}}>
<FlatList
ref={(ref) => this.flatlistref = ref}
data={Array(30).fill(1)}
renderItem={() => <Text style={styles.line}>This is one line.</Text>}
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.doRefresh}
/>
}
/>
<Button title='Scroll To Top' onPress={this.scrollToTopAndRefresh} />
</View>
)
}
}
const styles = StyleSheet.create({
line: {
height: 50,
paddingTop: 17,
textAlign: 'center',
backgroundColor: 'orange',
borderWidth: 1,
borderColor: 'purple',
}
});
Result:

Answer 2

I have something like this in my app:
<FlatList
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={() => this._onRefresh()}
/>}
data=...
/>
Maybe something like this would work:
this.componentRef.FlatList.scrollToOffset({x: 0, y: 0, animated: true});
this.setState({refreshing: true});
this._onRefresh();
this.setState({refreshing: false});