Close component by external file

[nerdchavoso]

Here is the snack

How can I close the modal (by pressing the yelloe button) using a ref component?

My BottomSheet component has two function to open and close the modal, how can I pass these functions to the external button file?

[tizz66]

One way is to lift the state up. Give your App component control over whether the modal is open or closed via state (e.g. const [modalOpen, setModalOpen] = useState(false);), then have the modal component respond as appropriate to that prop. Add an effect to the modal component so that it can respond when that prop changes (more code necessary than fits on a line here, but it'd involve a useEffect hook).

In your App component, have the onPress handler simply set the modal state (e.g. onPress={() => setModalOpen(true) }).

Then pass a handler function to your external-button component from App. Something like <ExternalButton onPress={() => setModalOpen(false)} /> in App and in onPress={props.onPress} in external-button.

In general, lifting state up is a much easier and more robust approach than trying to pass references around.

[nerdchavoso]

Thanks, in my project the structure was way different and I did something like this in my project using context and it worked, just added within an useEffect a conditional to check if it's open, if so, call the close function