react-native-magic-modal
react-native-magic-modal copied to clipboard
Add `magicModal.update()` method for dynamic content updates
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.