React-native-swipe-list-view: renderItem view 'overshotes' when scrolling multiple times

[Loewe1000]

When I drag one item in a FlatList horizontally to show a hidden view for multiple times, the view overshoots, not saving the right position.

You can see what I mean in the following video:
https://www.youtube.com/watch?v=18FRjnQbTIQ

This is the code:

<PizzaListContainer
          scrollEnabled={true}
          data={this.state.data}
          keyExtractor={(item, index) => '${index}'}
          snapToAlignment="center"
          renderItem={({ item }) => (
            <PizzaItem>
              <PizzaImageWrapper />
              <PizzaLabelWrapper>
                <PizzaTextLabel>cm</PizzaTextLabel>
                <PizzaNumberLabel>{item.radius}</PizzaNumberLabel>
              </PizzaLabelWrapper>
              <PizzaLabelWrapper>
                <PizzaTextLabel>€</PizzaTextLabel>
                <PizzaNumberLabel>{item.price}</PizzaNumberLabel>
              </PizzaLabelWrapper>
            </PizzaItem>
          )}
          renderHiddenItem={(data, rowMap) => (
            <DeleteContainer>
              <DeleteButton>
                <DeleteText>Delete</DeleteText>
              </DeleteButton>
            </DeleteContainer>
          )}
          rightOpenValue={-75}
          disableRightSwipe={true}
        />

And this is the style (with styled-components):

const PizzaListContainer = styled(SwipeListView)`
  height: 100%;
`;

const PizzaItem = styled.View`
  height: 100px;
  padding: 5px;
  flex-direction: row;
  justify-content: space-around;
  background-color: #eeeeee;
`;

const PizzaImageWrapper = styled.View``;

const PizzaLabelWrapper = styled.View`
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
`;

const PizzaNumberLabel = styled.Text`
  font-weight: 200;
  font-size: 36px;
`;

const PizzaTextLabel = styled.Text`
  font-weight: 600;
  font-size: 22px;
`;

const DeleteContainer = styled.View`
  flex-direction: row;
  justify-content: flex-end;
  height: 100%;
  background-color: #e93223;
`;

const DeleteButton = styled.TouchableOpacity`
  flex-direction: column;
  justify-content: center;
  width: 75px;
`;

const DeleteText = styled.Text`
  color: white;
  text-align: center;
`;

[fpyir]

Yes! I am getting this exact problem, when using a SwipeRow by itself or a SwipeListView. Driving me nuts!

[SjoenH]

Is there a work-around?

[SjoenH]

OK, I think I figured it out!

Try setting the prop stopRightSwipe to the same as your rightOpenValue:

rightOpenValue={-75}
stopRightSwipe={-75}

[Loewe1000]

OK, I think I figured it out!

Try setting the prop stopRightSwipe to the same as your rightOpenValue:

rightOpenValue={-75}
stopRightSwipe={-75}

That's not bad but I want to implement a "swipe to delete" where I swipe the complete row.

[ankhzet]

It's issue #312.
As a temporary workaround set useNativeDriver prop to false.

[Loewe1000]

Thank you, that fixes it.
But I would like to leave this open until there is a really fix. :)

[ankhzet]

@Loewe1000 original issue (#312) would suffice, I think. Just subscribe for notifications there so you would be aware when it is fixed.

[jemise111]

Yeah this is certainly the same issue as #312. @ankhzet workaround will work for now and I'll try to get that other issue resolved asap! Closing as a duplicate