React-native-swipe-list-view: scrollTo method not present?

[anthonnyc2]

Hey guys, I've been trying to scroll to top manually after click a button but unfortunately I haven't had success.

According to my research the key is reference in a right way the SwipeListView. Here is what I got.

let listRef = React.createRef();
<SwipeListView
        ref={(ref) => listRef = ref}
</SwipeListView>

When I do it this way I got this in listRef

{

"_listView": {},
"openCellKey": null,
    "props": {
        "ListFooterComponent": [Function ListFooterComponent],
        "ListHeaderComponent": [Function renderOptionsBar],
        "closeOnRowBeginSwipe": false,
        "closeOnRowOpen": true,
        "closeOnRowPress": true,
        "closeOnScroll": true,
        "data": [],
        "directionalDistanceChangeThreshold": 2,
        "disableHiddenLayoutCalculation": false,
        "disableLeftSwipe": false,
        "disableRightSwipe": true,
        "keyExtractor": [Function keyExtractor],
        "leftOpenValue": 0,
        "onScroll": [Function anonymous],
        "previewFirstRow": false,
        "previewRepeat": false,
        "previewRepeatDelay": 1000,
        "recalculateHiddenLayout": false,
        "renderHiddenItem": [Function renderSwipeOptions],
        "renderItem": [Function renderItem],
        "rightOpenValue": -150,
        "stickyHeaderIndices": [0],
        "swipeToClosePercent": 50,
        "swipeToOpenPercent": 50,
        "swipeToOpenVelocityContribution": 0,
        "useNativeDriver": true
    },
}

and when I use

let listRef = React.createRef();
getReference = (ref) => {
    listRef = ref;
  }

<SwipeListView
     listViewRef={getReference}
</SwipeListView>

the value that I got on listRef is

{"current": null}

So, I'm not completely sure if scrollTo methods like scrollToEnd are available here.

I hope you can help me with this.

[jemise111]

Hey @anthonnyc2 please use listViewRef as the prop instead of ref and this should work just fine.

See here: https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/SwipeListView.md -> "listViewRef"

Thanks!

[osvald0]

Hi, I'm having the same issue right now and listViewRef not solve the problem. HAve you an idea how I can scroll to top? Thanks!

[anthonnyc2]

Hi @osvald0, here it is what I did.

<SwipeListView
        listViewRef={ref => this._swipeListViewRef = ref}
/>

this._swipeListViewRef.scrollToOffset({
    animated: true,
    offset: 0,
});

[osvald0]

Hi! Thank for you fast response. How you define _swipeListViewRef?

[anthonnyc2]

Well, I didn't defined anywhere. I just wrote this line
listViewRef={ref => this._swipeListViewRef = ref}
And I was able to use this reference in an OnPress method.

[osvald0]

I have the issue: scrollToOffset is not a function :(

[osvald0]

Here my example code:

    let swipeListViewRef: SwipeListView<Accounts>;

    useEffect(() => {
        if (swipeListViewRef) {
            swipeListViewRef.scrollToOffset({
                animated: true,
                offset: 0,
            });
        }
    }, []);

 <SwipeListView
                        listViewRef={(ref) => swipeListViewRef = ref}
                        data={policies}
                        renderItem={renderItem}
                        renderHiddenItem={renderHiddenItem}
                        disableRightSwipe={true}
                        disableLeftSwipe={!isSwipeEnable}
                        leftOpenValue={150}
                        rightOpenValue={-150}
                        style={styles.swipe}
                        onRowDidOpen={setCurrentRow}
                    />

[anthonnyc2]

Ok, this is what I'd do.

1. Do not define swipeListViewRef.
2.

 useEffect(() => {
        if (this.swipeListViewRef) {
            this.swipeListViewRef.scrollToOffset({
                animated: true,
                offset: 0,
            });
        }
    }, []);

3.

 <SwipeListView
                        listViewRef={(ref) => this.swipeListViewRef = ref}
                       ...
                    />

[osvald0]

Weird how It works for you because in my case this is undefined on useEffect.
And then I can't set swipeListViewRef of undefined.

Thanks for your help.

[osvald0]

Are there any method to scroll to top when the lista data is updated?

[ivangr1]

I am having the same issue.
I can access the SwipeList with ref but this.swipeList.props returns only this:

{
  "data": {
    // data
  },
  "disableRightSwipe": true,
  "closeOnRowBeginSwipe": true,
  "rightOpenValue": -128,
  "leftOpenValue": 0,
  "closeOnScroll": true,
  "closeOnRowPress": true,
  "closeOnRowOpen": true,
  "disableLeftSwipe": false,
  "recalculateHiddenLayout": false,
  "disableHiddenLayoutCalculation": false,
  "previewFirstRow": false,
  "directionalDistanceChangeThreshold": 2,
  "swipeToOpenPercent": 50,
  "swipeToOpenVelocityContribution": 0,
  "swipeToClosePercent": 50,
  "useNativeDriver": true,
  "previewRepeat": false,
  "previewRepeatDelay": 1000
}

I don't see any scrollTo() methods on this list, and every scrollTo method I tried accessing returns undefined. I would like to use this:

this.swipeList.scrollToIndex({
            animated: true,
            index: count,
            viewPosition: 0.5,
          });

// returns TypeError: undefined is not a function (near '..._this.swipeList.scrollToIndex...')

[jemise111]

Hey @osvald0 @ivangr1 it looks like there was an issue with the 2.4.0 release that caused problems with refs.

I just released v2.5.0, please use that and let me know if this fixes your issue, thanks!

[ivangr1]

This was fast :)

Works great now, thank you!

[danmolitor]

Hi there, currently having the issue of scrollTo being undefined while using useRef in a functional component. Is this not designed to be used in this way? I'm using version 2.5.0. Here is my code:

let listRef = useRef(null);
...
<SwipeListView
    listViewRef={ref => listRef = ref}
/>

scrollTo doesn't appear anywhere when logging out listRef, and when logging scrollTo out explicitly it comes back as undefined.

Thanks!

[tperich]

Same problem as @danmolitor and others before the update. Any news?

[tylercote]

Same here. I think the problem may have resurfaced.

[sadikyalcin]

Have this issue on 3.0.1. Should be re-opened as the problem is still around IMO.

[jemise111]

@danmolitor @tperich @tylercote @sadikyalcin Hi guys - the issue with trying to make this work with useRef and React.createRef is different than the original issue. I've just pushed a fix and it should be working now in version v3.1.2

Since you are not trying to get a ref to the SwipeListView but rather the underlying ListView I'm not really sure the best practice for that situation. I just sort of faked when happens when you use useRef on any other component.

If any of you has any ideas other than what I did here: https://github.com/jemise111/react-native-swipe-list-view/pull/480/files#diff-3bf820ef5d6d51d21c551b86f7d237c8R153 please let me know.

In any case this should be working now. You can use it like so:

const listRef = useRef(null);

useEffect(() => {
  setTimeout(() => {
    listRef.current.scrollToOffset({ animated: true, offset: 100 });
  }, 1000);
}, []);

...
<SwipeListView
    listViewRef={listRef}
/>

[tylercote]

Hey thanks for implementing a fix so quickly. Something to note for anyone else who might be running into the same problem as me, the only method present on a SectionList is scrollToLocation (not the other scrollToX functions).

[sadikyalcin]

Hi @jemise111, thanks for your effort. Unfortunately, it still doesn't work for me. I have a class approach - not using hooks;

constructor() {
    super();
    this.flatListRef = React.createRef();
}

someFunc = () => {
    //console.log('@ref: ', this.flatListRef.current);
    // none of the scroll methods are there
};

...
<SwipeListView  ref={this.flatListRef}>..</SwipeListView>

[jemise111]

@sadikyalcin

Your render function should look like

<SwipeListView  listViewRef={this.flatListRef}>..</SwipeListView>

instead of

<SwipeListView  ref={this.flatListRef}>..</SwipeListView>

The ref will give a ref to the SwipeListView. The listViewRef will give. ref to the underlying listview

[sadikyalcin]

@sadikyalcin

Your render function should look like

<SwipeListView  listViewRef={this.flatListRef}>..</SwipeListView>

instead of

<SwipeListView  ref={this.flatListRef}>..</SwipeListView>

The ref will give a ref to the SwipeListView. The listViewRef will give. ref to the underlying listview

Funny enough but I was using listViewRef. At what point I changed it to ref I don't remember. Any who, it's perfect now. Working. Thank you.

[khurram-wasim]

I had multiple text inputs in my list

Lets say you have 10 text inputs
On focus of each item I saved focused current Index, like:

   onFocus={ () => setFocusFieldIndex(index) }

In effect hook you can scrollToIndex using that saved index:

   scrollViewRef.current.scrollToIndex({animated: true, index: focusFieldIndex});

On keyboard hide, you can reset focusFieldIndex to -1, like:

    setFocusFieldIndex(-1)

You can customize this for other UI elements , by saving their indexes as per you requirement