how to show current index of an image using package react-native-image-viewing

Question

So I am using this package https://github.com/jobtoday/react-native-image-viewing to show the images in the form of a gallery, everything is working just good but when I slide the image for the next one it is not changing the index at the bottom it is just keeping the index same though I have used this prop function onImageIndexChange but still no use below is my code can someone help:

import ImageView from "react-native-image-viewing";


const Example = () => {
    const ImagesExamples = [
        {
            uri: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
            page: 0
        },
        {
            uri: 'https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270',
            page: 1
        },
        {
            uri: 'https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg',
            page: 2
        },
        {
            uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTx5kWBc-yusySv8AFM14-CMJw07rXAhRsOnHIf5xklL2pg9f-CYF40IsxKIZP-_2bOq7o&usqp=CAU',
            page: 3
        },
        {
            uri: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
            page: 4
        },
    ];

    const [currentImageIndex, setImageIndex] = useState(0);
    const [isVisible, setIsVisible] = useState(false);

    const handleSetIsVisible = (index) => {
        setImageIndex(index)
        setIsVisible(true)
    }

    return (
        <View style={styles.container}>
            {ImagesExamples.map((uri, index) => {
                return (
                    <View >
                        <Text>
                            {uri.page}
                        </Text>
                        <TouchableOpacity onPress={() => handleSetIsVisible(uri.page)}>
                            <Image source={{ uri: uri.uri }} style={{ width: 100, height: 100 }} />
                        </TouchableOpacity>

                    </View>
                );
            })}

            <ImageView
                images={ImagesExamples}
                imageIndex={currentImageIndex}
                presentationStyle="overFullScreen"
                visible={isVisible}
                onRequestClose={() => setIsVisible(false)}
                onImageIndexChange={() => setImageIndex(currentImageIndex)}
                FooterComponent={() => (
                    <View style={styles.root}>
                        <Text style={styles.text}>{`${currentImageIndex + 1}/${ImagesExamples.length}`}</Text>
                    </View>
                )}
            />
        </View>
    );
};

export default Example;

Answer 1

try this please

const handleSetIsVisible = () => {
        setIsVisible(true)
    }

            <ImageView
                images={ImagesExamples}
                imageIndex={currentImageIndex}
                presentationStyle="overFullScreen"
                visible={isVisible}
                onRequestClose={() => setIsVisible(false)}
                onImageIndexChange={(index) => setImageIndex(index)} 
                FooterComponent={() => (
                    <View style={styles.root}>
                        <Text style={styles.text}>{`${currentImageIndex + 1}/${ImagesExamples.length}`}</Text>
                    </View>
                )}
            />