React-native-swipe-list-view: Will it start using FlatList instead of ListView ?

[jigarvyas]

Available in RN 0.43

Especially since, there are apparent plans are to deprecate ListView, more...

[npomfret]

Do you think its possible to use SwipeRow on its own within a FlatList?

[SamMatthewsIsACommonName]

Maybe the actual ListView component can just be directly swapped for a FlatList? I can't quite get my head around the SwipeListView component but aren't any ListView specific props such as datasource etc just being passed directly into the ListView component? So it would just be a matter of passing in props in the way FlatView wants, regardless of the props specific to this component?

[npomfret]

I got it working using a FlatList with a SwipeRow. It took a bit of hackery, but seems to work for now. It'd be nice to get a proper implementation at some point. That way beyond my skills though

[SamMatthewsIsACommonName]

Ok I'll give it a go thanks

[theohdv]

@npomfret can you share the changes you made to use FlatList instead of ListView ?

[npomfret]

import {SwipeListView, SwipeRow} from "react-native-swipe-list-view";

...

  _renderItem({index, item}) {
    const previewRow = !this._hasDonePreview && index === 0 && (Math.round(Math.random() * 5)) === 0;

    this._hasDonePreview = true;

    const chatViewModel = item;

    const ref = "row_" + chatViewModel.id();
    return <SwipeRow
      key={ref}
      disableRightSwipe={false}
      disableLeftSwipe={true}
      leftOpenValue={75}
      rightOpenValue={-75}
      ref={(swipeRow) => {
        this[ref] = swipeRow;
        if(swipeRow && previewRow) {
          swipeRow.manuallySwipeRow(75);
          setTimeout(() => {
            swipeRow.manuallySwipeRow(0);
          }, 800)
        }
      }}
    >
      <View style={styles.rowBack}>
        <View style={{flexDirection: 'row'}}>
          <TouchableOpacity style={{marginRight: CS.scale(8)}} onPress={() => {
            this._editGroupSettings(chatViewModel.chatGroup().id());
            this[ref].closeRow();
          }}>
            <View style={{alignItems: 'center'}}>
              <Icon name="gears" size={CS.scale(18)} color={CS.colors().chatsView().swipeActionIconColor}/>
              <Text style={CS.colors().chatsView().swipeActionText}>{this.props.trans("settings")}</Text>
            </View>
          </TouchableOpacity>
        </View>
        <View/>
      </View>
      <ChatsViewRow
        {...this.props}
        chatViewModel={chatViewModel}
        rowID={index}
        groupSelected={() => {
          this._groupSelected(chatViewModel.chatGroup().id());
          this[ref].closeRow();
        }}
      />
    </SwipeRow>
  }

[theohdv]

@npomfret sorry but can you just explain this part of the code please

 if(swipeRow && previewRow) {
          swipeRow.manuallySwipeRow(75);
          setTimeout(() => {
            swipeRow.manuallySwipeRow(0);
          }, 800)
 }

PS: I updated my code and it works well thanks ! But do you think that it is possible to block the vertical scroll when you're swiping right or left an item of the list ?

[npomfret]

It shows the user that the row can be swiped. But just once.

[abellee]

@npomfret is it just wrap the component that I used for FlatList into SwipeRow?

[npomfret]

Not quite. Swipe row doesn't have exactly the same behaviour. The instructions in the read me for getting SwipeRow working are correct - you can follow those.

[abellee]

@npomfret I wanna just use the SwipeRow in FlatList, but I did not found any content about how to use the SwipeRow standalone in read me.

[npomfret]

<SwipeRow
            disableRightSwipe={parseInt(rowId) % 2 !== 0}
            disableLeftSwipe={parseInt(rowId) % 2 === 0}
            leftOpenValue={20 + parseInt(rowId) * 5}
            rightOpenValue={-150}
        >
            <View style={styles.rowBack}>
                <Text>Left Hidden</Text>
                <Text>Right Hidden</Text>
            </View>
            <View style={styles.rowFront}>
                <Text>Row front | {data}</Text>
            </View>
        </SwipeRow>

[SamMatthewsIsACommonName]

@npomfret have you found any way to disable the scrolling of the flatlist while swiping? Im having an issue with it feeling quite buggy, I think because two animations are happening simultaneously

[npomfret]

@SamMatthewsIsACommonName i've not found that problem yet

[theohdv]

@SamMatthewsIsACommonName @npomfret I worked a little bit on that but I do not find any information on how disable the scrolling of a flatlist. Because it was possible with the ListView and it is used to fix the problem when implementing swipe with a ListView.

[SamMatthewsIsACommonName]

@theohdv hmm maybe we should raise an issue on react-native asking for such a functionality, considering the deprecation of ListView is essentially forcing FlatList on people

[SamMatthewsIsACommonName]

Have raised the issue here https://github.com/facebook/react-native/issues/14240

[theohdv]

Thanks man, hope it will be implemented soon !

[SamMatthewsIsACommonName]

• fingers crossed emoji * haha

[theohdv]

guys, just found this component (react-native-swipeable). I tried it and till now it works well (tested on Android only). And it fixes the scroll issue we had with SwipeRow (I don't really know how).

[SamMatthewsIsACommonName]

@theohdv it does seem nice but unfortunately it doesn't stop the scrolling on ios (for some reason I never had the issue on android anyway). I'm going to use it though it seems nice and concise for what we need )i.e not whole list component)

[jemise111]

FlatList support is out with v1.0.0!