Stale crumbs

[alexstanbury]

Hi graham, I've been having a bit of a hard time getting the router to do what I need.

My situation is as follows:

I have an app that will need to open a camera view in various different sections of the app, which will then take a photo and needs to pass the image data elsewhere and also either navigate back to the screen before or on to another one. This could be handled easily using the camera view in a modal, unfortunately the camera library I am using does not work in a modal on Android .

So I have to have the camera view in its own scene, (which will be better for battery life anyway so not the end of the world), however, this then opens a can of worms relating to communication between the scenes. I don't want to use a global state manager, I've thought about how that could be done in an elegant way but every approach seems hacky and unintuitive.

I'd love to be able to pass a callback function as a param as requested here, much like react-native-navigation does, but I can see that you're not keen on implementing that.

The cleanest solution I've come up with is something along the lines of (pseudo code):

State A (a component that uses the camera view) has the following code:

const handlePress = () => {
    console.log('crumbs', stateNavigator.stateContext.crumbs);
    stateNavigator.navigateBack(1);
  };

//re-assign the renderScene prop of the capture state
useEffect(() => {
    const {capture} = stateNavigator.states;
    capture.renderScene = () => <Capture onPress={handlePress} />;
  }, []);

//called when clicking a 'show capture' button or whatever
const onButtonPress = () => {
    stateNavigator.navigate('capture');
  };

So I pass the handlePress function to the Capture component, which then calls props.handlePress() at the relevant time, this way I can control what happens without Capture knowing about it. My issue is that when handlePress is called stateNavigator.navigateBack(1) goes to the state before State A, not back to State A. If I press the hardware back button (or the back button in the nav bar) it behaves as desired though. It looks as though it's somehow closure related, but I can't seem to see anywhere in the docs a way of getting a fresh reference to stateNavigator.

Am I missing something?

By the way, thanks for your quick reply on the nav bar issue I was having, I haven't got around to sorting that yet but will report back once I get back onto it, thanks!

[grahammendick]

Hi Alex. Why can't you call stateNavigator.navigateBack(1) from the Capture component?

[alexstanbury]

Is there a way of getting the latest version of stateNavigator from within the handlePress function?

[grahammendick]

I don't recommend updating the renderScene function. I'm guessing you want to pass some data from the Capture scene to Scene A? In that case, I recommend you use React Context

const CameraContext = React.createContext({
  setPhoto: () => {}
});

const App = () => (
  <CameraContext.Provider>
    <NavigationHandler stateNavigator={stateNavigator}>
      <NavigationStack />
    </NavigationHandler>
  </CameraContext.Provider>
);

const Capture = () => {
  const {setPhoto} = useContext(CameraContext)
  const {stateNavigator} = useContext(StateNavigator);
  return (
    <Camera
      onPress={(photo) => {
        setPhoto(photo);
        stateNavigator.navigateBack(1);
      }} />
  );
}

[alexstanbury]

Is there a reason why you don't recommend it aside from it not being able to get a fresh stateNavigator instance?

If I have to use react context I'll have to go through the ceremony of creating bespoke wrapper components for every slightly different usage of the camera view, most likely with a separate context for each of them too. It's going to make my codebase a lot bigger and more complicated for something that seems like it should be pretty straightforward.

[grahammendick]

Here's why I don't recommend passing functions around.

Could you explain why you need a separate context for each camera view? Could you give me a specific examples of 2 camera views that require 2 different contexts, please?

[alexstanbury]

I managed to work around this by using global state and some wrapper components.