Ref's are null when remouting

[michavie]

Currently, the modalized modal is losing its reference when being unmounted and remounted again by its parent - resulting in a null value.

Here's an example of what that looks like:

const Parent = () => {
// IF THIS 'someCondition' DYNAMICALLY CHANGES, THE REF IS LOST WITH THE PORTAL, not using portals it works correctly (apart from styling issues)
  if (someCondition) {
    return <SomethingElse />
  }

  return (
    ...
    ...
    <Modal open={someState} onClose={() => setSomeState(false)}>Some content</Modal>
  )
}

const Modal = ({ open, onClose: handleClose, children }: IProps) => {
  // THIS REF IS LOST AFTER 'someCondition' IN PARENT COMPONENT INVERTS TWICE
  const modalRef = useRef<Modalize>(null)

  useEffect(() => {
    if (open) modalRef.current?.open()
  }, [open, modalRef])

  return (
    <Portal>
      <Modalize ref={modalRef} snapPoint={400} adjustToContentHeight onClose={handleClose}>
        <View style={styles.content}>{children}</View>
      </Modalize>
    </Portal>
  )
}

Do you have any ideas on how this can be solved?

[jacobmolby]

@michavie did you manage to find a solution to this?

[michavie]

@jacobmolby not a real solution but a workaround is to never unmount the modal/portal.

meaning in the above example, that you have the ´someCondition´condition directly in the tsx/jsx

[jacobmolby]

@michavie Not the answer I hoped for... but thanks a lot for your quick reply :)

[jefferyjxn]

This issue seems to exist in every portal library for React Native I've tried 😕