zoomTo doesn't work with multiple images

[phillipcmittmann]

I can't figure out why zoomTo() only works for the last image of the list. I also tried mapping inside a scrollview and two images side by side.

I need a FlatList because in the end I will be rendering around 80 images, so it will impact the performance.

FlatList snippet:

import React, { useRef } from 'react';

import {
    View,
    Image,
    FlatList,
    Dimensions,
    Button
} from 'react-native';

import ZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';

const images = [
    // Simplest usage.
    'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
    'https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Ym9va3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80',
    'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8aHVtYW58ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80',
    'https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg?fit=fill&w=480&h=270'
];

const App = () => {
    let arrayRefs = useRef([]);
    arrayRefs.current = Array(4).fill(useRef(null)); // also tried React.createRef()

    return (
        <View style={{ flex: 1, backgroundColor: 'white' }}>
            <FlatList
                data={images}
                extraData={arrayRefs.current}
                horizontal={true}
                pagingEnabled={true}
                decelerationRate={'fast'}
                bounces={false}
                scrollEventThrottle={16}
                renderItem={({ item, index }) => {
                    return (
                        <View style={{ overflow: 'hidden' }}>
                            <ZoomableView
                                maxZoom={1.5}
                                minZoom={0.5}
                                zoomStep={0.5}
                                initialZoom={1.0}
                                bindToBorders={true}
                                captureEvent={true}
                                ref={arrayRefs.current[index]}
                                onZoomEnd={(event, gestureState, zoomableViewEventObject) => {
                                    console.log(zoomableViewEventObject.zoomLevel)
                                    console.log(index)
                                }}
                            >
                                <Image
                                    source={{ uri: item }}
                                    style={{ width: Dimensions.get('window').width, height: 500 }}
                                />
                            </ZoomableView>

                            <View style={{ marginBottom: 100 }}>
                                <Button
                                    title={'Press Me'}
                                    onPress={() => {
                                        arrayRefs.current[index].current.zoomTo(1);
                                        console.log(index)
                                        console.log(arrayRefs.current[index].current.state)
                                    }}
                                />
                            </View>
                        </View>
                    )
                }}
            />
        </View>
    )
}

export default App;

EDIT: Two images snippet:

Obs: When keeping only the first one and changing its refs to any other index, it works

import React, { useRef } from 'react';

import {
    View,
    Image,
    Button,
} from 'react-native';

import ZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';

const images = [
    // Simplest usage.
    'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
    'https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Ym9va3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80',
    'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8aHVtYW58ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80',
    'https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg?fit=fill&w=480&h=270'
];

const App = () => {
    let arrayRefs = useRef([]);
    arrayRefs.current = Array(2).fill(useRef(null)); // also tried React.createRef()

    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <View style={{ height: '20%', width: '80%' }}>
                <ZoomableView
                    maxZoom={1.5}
                    minZoom={0.5}
                    zoomStep={0.5}
                    initialZoom={1.0}
                    bindToBorders={true}
                    captureEvent={true}
                    ref={arrayRefs.current[0]}
                    style={{ borderColor: 'red', borderWidth: 1 }}
                >
                    <Image
                        source={{ uri: images[0] }}
                        resizeMode={'contain'}
                        style={{ flex: 1 }}
                    />
                </ZoomableView>
            </View>

            <Button
                title={'Press Me'}
                onPress={() => arrayRefs.current[0].current.zoomTo(1)}
            />

            <View style={{ height: '20%', width: '80%' }}>
                <ZoomableView
                    maxZoom={1.5}
                    minZoom={0.5}
                    zoomStep={0.5}
                    initialZoom={1.0}
                    bindToBorders={true}
                    captureEvent={true}
                    ref={arrayRefs.current[1]}
                    style={{ borderColor: 'red', borderWidth: 1 }}
                >
                    <Image
                        source={{ uri: images[1] }}
                        resizeMode={'contain'}
                        style={{ flex: 1 }}
                    />
                </ZoomableView>
            </View>

            <Button
                title={'Press Me'}
                onPress={() => arrayRefs.current[1].current.zoomTo(1)}
            />
        </View>
    )
}

export default App;

[phillipcmittmann]

Looks like I was doing it wrong, instead of:

arrayRefs.current = Array(2).fill(useRef(null));

It should be:

arrayRefs.current = Array(2).fill(0).map(i => useRef(null));

Isn't a bug, so will be closing the issue.