How to recentered "All swipeable" when user press/touch outside the swipeable container?

[Steffi3rd]

I have a Flatlist with Swipeable Item.

When I swipe one item, how to recenter() when I click anywhere on the Flatlist?

The behavior is like "Clock" app in iOS

[AdrianoRuberto]

You can have the ref on each object that you have, and call recenter() on each one when you need it:

// Object containing an index to each ref
swipeablesRef = Object.create(null);

// Set the ref somehow, for example:
if (!swipeablesRef[index]) swipeablesRef[index] = React.createRef();
<Swipeable ref={swipeablesRef[index]}>...</Swipeable>

// Call this when you need to recenter each swipeable
recenterAll = () => {
  Object.values(swipeablesRef).filter(s => s.current).forEach(s => s.current.recenter());
}

// Call this when you delete one swipeable
deleteSwipeable = index => delete swipeablesRef[index];

[maykonmeier]

You can have the ref on each object that you have, and call recenter() on each one when you need it:

// Object containing an index to each ref
swipeablesRef = Object.create(null);

// Set the ref somehow, for example:
if (!swipeablesRef[index]) swipeablesRef[index] = React.createRef();
<Swipeable ref={swipeablesRef[index]}>...</Swipeable>

// Call this when you need to recenter each swipeable
recenterAll = () => {
  Object.values(swipeablesRef).filter(s => s.current).forEach(s => s.current.recenter());
}

// Call this when you delete one swipeable
deleteSwipeable = index => delete swipeablesRef[index];

It works for me. Thanks

[renankanu]

You can have the ref on each object that you have, and call recenter() on each one when you need it:

// Object containing an index to each ref
swipeablesRef = Object.create(null);

// Set the ref somehow, for example:
if (!swipeablesRef[index]) swipeablesRef[index] = React.createRef();
<Swipeable ref={swipeablesRef[index]}>...</Swipeable>

// Call this when you need to recenter each swipeable
recenterAll = () => {
  Object.values(swipeablesRef).filter(s => s.current).forEach(s => s.current.recenter());
}

// Call this when you delete one swipeable
deleteSwipeable = index => delete swipeablesRef[index];

It works for me. Thanks

Working, nice!