search

jobtoday / react-native-image-viewing

Tiny, purely TS, modal component for viewing images 🏙
https://exp.host/@antonkalinin/react-native-image-viewing
MIT License
887 stars 290 forks source link

Can't perform a React state update on an unmounted component is appearing while closing the modal using onRequestClose. #80

Open Jatverma54 opened 3 years ago

Jatverma54 commented 3 years ago

node_modules\react-native\Libraries\LogBox\LogBox.js:173:8 in registerError

Janak-Nirmal commented 3 years ago

+1

Any temporary fix for this ?

nextstudioal commented 3 years ago

Bump

bruuuuuuuce commented 3 years ago

Facing the same issue

rajeshde commented 3 years ago

@Jatverma54 @bruuuuuuuce Can you share a repo with minimal implementation where this issue is occurring? I can look into it and submit a PR if possible.

Are you conditionally rendering ImageViewing component?

mr-faraday commented 3 years ago

I found it occurs if you change imageIndex prop in onRequestClose callback or somehow modify imageIndex while fadeout. My case:

const [currentIndex, setCurrentIndex] = useState(null)
// ...
  visible={typeof currentIndex === 'number'}
  imageIndex={currentIndex}
  onRequestClose={() => setCurrentIndex(null)}
// ...

Changed to:

const [isVisible, setIsVisible] = useState(false)
const [currentIndex, setCurrentIndex] = useState(0)
// ...
  visible={isVisible}
  imageIndex={currentIndex}
  onRequestClose={() => setIsVisible(false)}
// ...

Solution: don't use same state for visible and imageIndex props

vahidvdn commented 1 year ago

For my case, I changed this:

{fullscreenImg && !isPDF && (
    <ImageView
      images={fullscreenImages}
      imageIndex={0}
      visible={fullscreenImg}
      onRequestClose={() => setFullscreenImg(false)}
    />
)}

To the following:

<ImageView
  images={fullscreenImages}
  imageIndex={0}
  visible={fullscreenImg}
  onRequestClose={() => setFullscreenImg(false)}
/>