React-native scroll to top with pull to refresh iOS

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});