React-native-swipe-list-view: Is there a way to open/close all rows?

[damian-balas]

Toggle row open state

Hello :)
Is there a way to open all rows and then close them? I want to create something like a toggle button.

I've found: closeAllOpenRows(), but I didn't see anything related to opening all rows.

[jemise111]

Hey @damian-balas this is an interesting one.. opening all rows is a little trickier. Much of the appeal of this lib is that it handles all of the closing of rows while other ones are being opened, the list is being scrolled, etc. Opening all rows sort of breaks this behavior. I've gone ahead and added another instance function called manuallyOpenAllRows to SwipeListView that accepts a translateX value and will allow you to achieve this. But I warn you this may break some other behaviors..

Here it is in practice, and don't forgot to disable the closeOnRowOpen feature using the closeOnRowOpen prop (you may also want to disable closeOnScroll and closeOnRowPress as well)

Let me know if you have any questions

export default function Basic() {
    const swipeListRef = useRef(null);
    const [listData, setListData] = useState(
        Array(20)
            .fill('')
            .map((_, i) => ({ key: `${i}`, text: `item #${i}` }))
    );

    useEffect(() => {
        setTimeout(() => {
            swipeListRef.current.manuallyOpenAllRows(-150);
        }, 2000);
    }, []);

    const renderItem = data => (
        ...
    );

    const renderHiddenItem = (data, rowMap) => (
        ...
    );

    return (
        <View style={styles.container}>
            <SwipeListView
                ref={swipeListRef}
                data={listData}
                renderItem={renderItem}
                renderHiddenItem={renderHiddenItem}
                leftOpenValue={75}
                rightOpenValue={-150}
                closeOnRowOpen={false} // <==== DON'T FORGET THIS
            />
        </View>
    );
}

[GwFreak01]

Hey @jemise111 , thanks for implementing this specific feature!! 🙏

In the SwipeListView nodule module, I see the method implemented, but I'm having issues getting manuallyOpenAllRows be recognized as a method even though I'm passing in the swipeListRef variable.

Not sure if you have any ideas on what I should check.

[jemise111]

@GwFreak01 can you post the code you're using?

[GwFreak01]

function CasesList({handleSelectedSurgicalCaseIds}) {
  const swipeListRef = useRef(null);

  useFocusEffect(
    React.useCallback(() => {
      async function handleSurgicalCasesRetrieval() {
        ...
        dispatch({
          type: 'LOAD_SURGICAL_CASES',
          surgicalCases: surgicalCases,
        });
      }
      handleSurgicalCasesRetrieval();
    }, []),
  );

  useEffect(() => {
     setTimeout(() => {
       swipeListRef.current.manuallyOpenAllRows(75);
     }, 2000);
  }, []);

  const [state, dispatch] = React.useReducer(
    (prevState, action) => {
      switch (action.type) {
        case 'LOAD_SURGICAL_CASES':
          return {
            ...prevState,
            surgicalCases: action.surgicalCases,
          };
      }
    },
    {
      surgicalCases: [],
      selectedCaseIds: [],
    },
  );
  const selectedCaseIds = [];

  const renderItem = item => {
    return <CaseLogItem item={item} />;
  };

  const renderHiddenItem = (data, rowMap) => (
    ...
  );



  return (
    <View style={styles.container}>
      <SwipeListView
        ref={swipeListRef}
        useFlatList={true}
        data={state.surgicalCases}
        keyExtractor={(data, index) => {
          return data.surgery_id;
        }}
        renderItem={renderItem}
        renderHiddenItem={renderHiddenItem}
        leftOpenValue={75}
        rightOpenValue={-150}
        previewRowKey={'0'}
        previewOpenValue={-40}
        previewOpenDelay={3000}
        closeOnRowOpen={false}
      />
    </View>
  );
}

I tried removing unnecessary code so its a bit more legible.

I'm on React 16.11 and ReactNative .62.2

[jemise111]

@GwFreak01 Hm I don't see anything wrong with your code. What's the error you're seeing?

Are you sure you have the latest version of react-native-swipe-list-view(v3.2.3)

If you could, go into your node_modules/react-native-swipe-list-view/components/SwipeListView.js and make sure you're seeing the right code - https://github.com/jemise111/react-native-swipe-list-view/blob/master/components/SwipeListView.js#L164

[GwFreak01]

@jemise111 I resolved it! Not sure how, but had to reinstall some packages or something.

Thank you so much for this feature though! You're a lifesaver! 🙏

[damian-balas]

Awesome! :)
Thanks! :)

[damian-balas]

@jemise111 Is there also a way to prevent the rows from closing if you hold and swipe?
I have already tried:

disableRightSwipe
disableLeftSwipe
closeOnRowPress={false}
closeOnScroll={false}
closeOnRowOpen={false}

[jemise111]

@damian-balas I'm not sure what "hold and swipe" means? What event would be firing here, do you mean onLongPress? Maybe a gif if you could?

[damian-balas]

@jemise111
I wan't to prevent from closing the row if it's open.

[jemise111]

Hm @damian-balas I'm not sure I've ever supported the case of opening a row and then preventing it from closing. I'm surprised disableLeft/RightSwipe isn't working here. I'll have to dig a little deeper on this one in a day or two

[damian-balas]

@jemise111 Thanks for your work :)!

[damian-balas]

@jemise111 Did you manage to fix it?

[jemise111]

Hey @damian-balas sorry for the delay. I really can't find a way to do this with existing props. I think it would require some additional dev work, and I just don't have the time to do it at the moment.

I got close by passing stopLeftSwipe={-150} as a prop along with the example I gave above. Maybe that'll help a little?