openRight just the first item

[jon-moreira]

Hi,
Is it possible to call, on a list of swipeable elements, the openRight for a particular element? On my example, I would like to open the first one just to show to the user the available actions on the items.

Example:

row 1 -> openRight
row 2 > closed
row 3 > closed

Code:

useEffect(() => {
    if (showStartAnimation) {
      swipeableRef.current?.openRight(); // <--- HERE: Only open the first element of the list
      setTimeout(() => swipeableRef.current?.close(), 1000);
    }
  }, [showStartAnimation]);
  
  
const renderRightActions = () => (
   <Icon.Button name="delete" backgroundColor="red"  />
);

  const renderListItem = ({ item, index, rowMap }) => (
    <Swipeable
      ref={swipeableRef}
      renderRightActions={renderRightActions}
      <View style={styles.listRow}>
        <Text>{item.name}</Text>
      </View>
    </Swipeable>
  );

  return (
    <FlatList
    style={styles.flatList}
    data={items}
    renderItem={renderListItem}
    keyExtractor={item => `${item.name}`}
    />
  );

Package versions

React: 17.0.2
React Native: 0.64.2
React Native Gesture Handler: 1.10.3

Thank you for your help!

[jakub-gonet]

What if you used an array of refs?

const [swipeableRefs, setSwipeableRefs] = React.useState([]);

React.useEffect(() => {
	  setElRefs(elRefs => (
	    	Array(items.length).fill().map((_, i) => swipeableRefs[i] ?? React.createRef())
	  ));
}, [items.length]);
// ...
useEffect(() => {
    if (showStartAnimation) {
      swipeableRefs[0].current?.openRight();
      setTimeout(() => swipeableRefs[0].current?.close(), 1000);
    }
  }, [showStartAnimation]);
// ...
const renderListItem = ({ item, index, rowMap }) => (
	  <Swipeable
    	ref={swipeableRefs[index]}
	    renderRightActions={renderRightActions}
		      <View style={styles.listRow}>
		        	<Text>{item.name}</Text>
		      </View>
	  </Swipeable>
);

[Jacek-gh]

@jakub-gonet There are 3 kind of problems with your solution.

The first one is using that setTimeout and some magical number. Could you explain how you arrived with that 1000, other than was trying to do the best to not have that item closed prematurely? I did it in a class component and added that functionality to componentDidMount, and also had to add a similar timer, as if not there, Swipeable would be basically immediately calling a close on it.

The second is how the list is initially displayed (more like esthetics). There is no need (for some) for the initial animation on such row, especially when it comes triggered by that timeout. Even more, if more than one row needs to be opened. I have it implemented in my list, and I really don't like how it looks like.

The last one with the unneeded code. Do we really want everyone to try to reinvent something that rather should be a property in the first place?

It would be really nice to have the left/rightInitialOpen properties added.