Share a single machine instance with multiple screens in react native navigation with persistence of last updated state and context.

[tv-ravi]

It would be helpful for me if you could share that how could i share machine instance with multiple screens in react native project.
Let's supposed i have three screen in my project A,B and C, i have created machine instance by using this line "const [current, send] = useMachine(myMachine)" in A screen.
Now to make transition i need "send" in screen B and C.
So how could i use the same instance of machine without loosing of context and current state machine .Either i need to pass it to next screen as an param or something else?
Thanks in advance.

[davidkpiano]

You get the service as the third value in the tuple:

const [state, send, service] = useMachine(someMachine);

Then, you can useService(service) to use that instance anywhere else.

[tv-ravi]

Thank you for your quick response.
As much i understand it like, i need to pass this third service tuple as a navigation param to screen B while navigation from screen A and then by using these below line in screen B:
const myServ = useService(service)
then i can able to make transitions and also get context which persist on A screen at screen B by using this below lines ?

myServ('newState')
myServ.context.data

[davidkpiano]

The useService(...) hook returns [state, send].

[Andarist]

It also depends if your A screen gets destroyed when you navigate to B - if it does then you probably should hoist the machine to a common parent so they all stay alive even if A gets unmounted temporarily.

Sideways q: could you describe your use case? I'm very interested in how people are communicating machines created within React.

[tv-ravi]

The useService(...) hook returns [state, send].
To use these code useService(...) i must need to pass service object to child screens from parent A screen, which is a root screen of app and always exist in navigation stack or any other way?

[tv-ravi]

@Andarist Thank you for answering.
I have just started migration my existing app from redux and thats my first app which i have planned to use xState.
Right now am not pretty much sure what i am doing is standard way or not, hence once i done with a module i with expected result i'll definitely share my use case.