Solved

How to pass callback function to Screen

michaelelias
Shopify Partner
10 0 4

I have several screens in my POS UI Extension and need to be able to pass a callback function to a screen that is being navigated to so the parent screen can receive data from the child screen. 

 

Here's the navigate method to navigate to another screen where I pass a callback function in the params object.

api.navigation.navigate('EnterGiftCodeScreen', {config, onCallback: () => console.log('callback invoked')});

Here's the screen being navigated to:

<Screen name='EnterGiftCodeScreen' title='Enter Gift Code Manually' onReceiveParams={(params) => {
      setParams(params);
      params.onCallback();
    }}>
...
</Screen>

When the params are received by the new screen and I try calling the callback function I get the following error on Android emulator:

Uncaught (in promise) Error: You attempted to call a function that was already released.

What is the best way to receive data back from a screen that is being navigated to?

Accepted Solution (1)

Liam
Shopify Staff
2731 302 777

This is an accepted solution.

Hi Michaelelias,

 

The error you're getting could be because because the function you are trying to call has been garbage collected. This is a limitation on how Android manages memory and unfortunately, it's not possible to pass a callback function through navigation params.

 

Instead, you could use a state management library like Redux or React Context to handle the communication between screens. This way, when you navigate to a new screen, you can update the state with any data that needs to be passed back the previous screen. When navigating back to the previous screen, you can listen for changes to this state and update the screen accordingly.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Reply 1 (1)

Liam
Shopify Staff
2731 302 777

This is an accepted solution.

Hi Michaelelias,

 

The error you're getting could be because because the function you are trying to call has been garbage collected. This is a limitation on how Android manages memory and unfortunately, it's not possible to pass a callback function through navigation params.

 

Instead, you could use a state management library like Redux or React Context to handle the communication between screens. This way, when you navigate to a new screen, you can update the state with any data that needs to be passed back the previous screen. When navigating back to the previous screen, you can listen for changes to this state and update the screen accordingly.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog