Removing an image causes lockup

[alexstanbury]

I'm using the following dependencies:

"dependencies": {
    "react": "17.0.2",
    "react-native": "0.68.1",
    "react-native-awesome-gallery": "0.3.5",
    "react-native-gesture-handler": "^2.4.1",
    "react-native-reanimated": "^2.8.0"
  },

Once an image is removed from the array, gestures stop being recognised. If you change the removed image position from 0 to say 2, it only locks up when you scroll to index 2 in the image array.

Seems to be a reoccurrence of https://github.com/Flair-Dev/react-native-awesome-gallery/issues/19.

import React, {useState} from 'react';
import {Button, View} from 'react-native';
import AwesomeGallery from 'react-native-awesome-gallery';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

const IMAGE_DATA = [
  'https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg',
  'https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262__340.jpg',
  'https://cdn.pixabay.com/photo/2015/11/16/14/43/cat-1045782__340.jpg',
  'https://cdn.pixabay.com/photo/2021/10/19/10/56/cat-6723256__340.jpg',
];

const App = () => {
  const [images, setImages] = useState(IMAGE_DATA);

  const removeImage = () => {
    setImages(i => i.slice(1));
  };

  return (
    <GestureHandlerRootView style={{flex: 1, backgroundColor: 'red'}}>
      <AwesomeGallery
        data={images}
        keyExtractor={(item, index) => item}
        doubleTapInterval={150}
        onTap={() => console.log('tap')}
      />
      <View style={{position: 'absolute', top: 0, left: 0}}>
        <Button onPress={removeImage} title="REMOVE"></Button>
      </View>
    </GestureHandlerRootView>
  );
};

export default App;

[pep108]

This might not be the most elegant solution, but I added a key with the length of the data array and it's working.

<AwesomeGallery
    key={images.length}
    data={images}
    keyExtractor={(item, index) => item}
    doubleTapInterval={150}
    onTap={() => console.log('tap')}
/>

[pavelbabenko]

Released in v0.3.6