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

[Jatverma54]

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

• node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
• node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
• node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
• node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:106:4 in printWarning
• node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:75:16 in error
• node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19152:9 in warnAboutUpdateOnUnmountedFiberInDEV
• node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17093:40 in scheduleUpdateOnFiber
• node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:11003:16 in dispatchAction

• [native code]:null in dispatchAction

• node_modules\react-native-image-viewing\dist\hooks\useRequestClose.js:29:23 in setTimeout$argument_0
• node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
• node_modules\react-native\Libraries\Core\Timers\JSTimers.js:383:16 in callTimers
• node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
• node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
• node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
• node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue

• [native code]:null in callFunctionReturnFlushedQueue

[Janak-Nirmal]

+1

Any temporary fix for this ?

[nextstudioal]

Bump

[bruuuuuuuce]

Facing the same issue

[rajeshde]

@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]

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]

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)}
/>