intellidev1991/react-native-image-slider-box

Image start from particular index

surajdasst opened this issue · 2 comments

How to show the image in slider box from a particular index? So right now I am having a small slider box and onpress a modal should come with full screen slider box starting from the image clicked.

You have to set the firstItem prop on the SliderBox component.

create a currentImage state and use the currentImageEmitter callback on your small slider box component to set the currentImage state to the image index. Then you can pass the currentImage state to the firstItem prop in your full screen slider box that is inside your modal.

const [currentImage, setCurrenImaget] = useState(0);
<>
      <SliderBox
        images={images}
        firstItem={currentImage} 
        currentImageEmitter={(index) => setCurrentImage(index)}
      />
      {showFullScreen && (
        <Portal>
          <Modal>
            <SliderBox
              images={images}
              firstItem={currentImage}
              currentImageEmitter={(index) => setCurrentImage(index)}
            />
          </Modal>
        </Portal>
      )}
    </>

set currentImageEmitter and firstTime props to both sliders if you want them synced

Lib has been updated.