Recenter item in functional component

[plaporte]

I'm using Swipeable component within a functional component. How can I call recenter() correctly?

[AramArakelyan22]

HI, I have the same problem. Is there any solution?

[bataevvlad]

@plaporte @AramArakelyan22 You can try something like this:

const SWIPE_LENGTH = 55;

export const SwipeableComponent = React.memo(({ id, onRemove }) => {
  let [swipeRef] = useState(null);

  const onRemove = useCallback(() => onRemove(id), [id]);

  const renderRemoveButton = useCallback(() => (
    <TouchableOpacity
      onPress={() => {
        onDeleteClick();
        swipeRef.recenter();
      }}>
    </TouchableOpacity>
  ), []);

  return (
    <Swipeable
      onRef={(ref) => { swipeRef = ref; }}
      rightButtons={[renderRemoveButton()]}
      rightButtonWidth={SWIPE_LENGTH}/>
  );
});

All you need is useState, then you need to center it in some kind of action (press button and etc). And dont forget about ref in onRef.

If you have any suggestions for improvement, go on :)

[nescroft]

i tried this but can't seem to get it working with a functional component

[scottysmalls]

I was able to get it working using ref instead of onRef as well as close() instead of recenter()

  const swipeRef = useRef();

  const doRecenter = function(){
    if(swipeRef && swipeRef.current){
      swipeRef.current.close();
    }
  }

  return(
    <Swipeable
        ref={(ref) => {swipeRef.current = ref}}
    />
  )