react-native-magic-modal icon indicating copy to clipboard operation
react-native-magic-modal copied to clipboard

Add `magicModal.update()` method for dynamic content updates

Open JoinChang opened this issue 3 months ago • 0 comments

Currently, when a modal is shown using magicModal.show(), there's no built-in way to update the modal's content without hiding and re-showing it.

Add a new magicModal.update() method that allows updating the content of an existing modal:

const { modalID } = magicModal.show(() => (
  <MyModalContent data={initialData} />
));

magicModal.update({
  modalID,
  render: () => <MyModalContent data={updatedData} />
});

Alternatively, the show() method could return an update() function:

const { modalID, update } = magicModal.show(() => <MyModal />);

// Later
update(() => <MyModal data={newData} />);

Currently, my solution is:

// In content component
const [data, setData] = useState(initialData);
const dataRef = useRef(setData);

useEffect(() => {
  onDataUpdate?.(setData);
}, [onDataUpdate]);

// In parent
const setDataRef = useRef(null);

magicModal.show(() => (
  <MyModalContent 
    data={data}
    onDataUpdate={(setter) => {
      setDataRef.current = setter;
    }}
  />
));

// Update
useEffect(() => {
  setDataRef.current?.(newData);
}, [newData]);

Not sure if adapting this feature would be convenient for the existing code, but it would be great if it is.

JoinChang avatar Nov 05 '25 08:11 JoinChang