Viro: pass props through the ViroSceneNavigator

[aminesig]

Hello ! is there any way to pass props through the ViroSceneNavigator when navigating between different components?

[VikAdvani]

Hi @aminesig,
Yep there is! You can look at our ViroARSample app to see how to do this. Github located here:

https://github.com/viromedia/ViroARSampleApp/

The scene navigator is passed as a prop to each scene you have. If you are using ViroSceneNavigator the prop is called sceneNavigator. If you are using ViroARSceneNavigator it's called arSceneNavigator. The navigators have a dictionary object called viroAppProps which you can use as global dictionary to store and pass values across your app. (For applications that have more involved state management, we recommend using redux)

Example usage:

// following code would be in constructor
this.state = {
      viroAppProps: {displayObject:false},
    }
...
// following code would be in render method()
<ViroARSceneNavigator style={localStyles.arView} apiKey="API_KEY_HERE"
          initialScene={{scene:InitialARScene}}  viroAppProps={this.state.viroAppProps}
        />

And in your scene you can access the props in your scene like below:

  // following code would be in initial scene render() method
  <Component visible={this.props.arSceneNavigator.viroAppProps.displayObject}

If you are looking to pass props to just your initial scene, you can do that by populating passProps as part of the initialScene dictionary, using the following syntax:

var InitialARScene = require('./js/ARHitTestSample');

<ViroARSceneNavigator style={localStyles.arView} apiKey="API_KEY_HERE"
          initialScene={{scene:InitialARScene, 
          passProps:{displayObject:this.state.displayObject}}}
        />

Let me know if you have any more questions!

[aminesig]

Thanks for the reply @VikAdvani, what I meant is when you are in pure Vrmode and you need to do this " this.props.sceneNavigator.jump("Shop", {scene:require('./Shop')});" is there anyway to pass props to the "Shop" Vr scene ? I have tried to do this

this.props.sceneNavigator.viroAppProps={example:true}
this.props.sceneNavigator.jump("Shop", {scene:require('./Shop')}

but it doesn't pass the value "Example" to the next scene.

[achuvm]

Hi @aminesig,

You should be able to do:

this.props.sceneNavigator.jump("Shop", {
    scene : require('./Shop'),
    passProps: {
        example : true
    }
);

In your shop scene, you should be able to check your value with:

this.props.example

Let us know if that doesn't work.

Andy

[aminesig]

@achuvm it's working now 👍 , thank you very much !

[achuvm]

Closing due to inactivity.

If you still have issues, feel free to re-open this issue or create a new one.

The latest releases are here:
React Viro - https://docs.viromedia.com/docs/releases
ViroCore - https://virocore.viromedia.com/docs/releases

Thanks for using Viro!

[mypark]

tried this technique but a bit confused on how to pass changes to the props

initialScene={{ scene: ARViewer, passProps:{ photoSrc: this.state.avatarSource}}}>

and this triggers on my onPress in the parent component

    this.setState({
      avatarSource: someNewRuntimeSourceValue
    });

When I update the state in the parent control, it triggers a componentWillReceiveProps in the child but with the original values and it doesn't see the updated value passed in the child prop - instead I see the original value. Am I doing something incorrectly?

[VikAdvani]

Hi @mypark, this is likely a React issue with props. In general props are great for manipulating an individual component but not for maintaining application state. Generally if you want props to span across multiple components I recommend using Redux to manage application state.
More info here on Redux: https://medium.com/@jonlebensold/getting-started-with-react-native-redux-2b01408c0053

However if that's too involved I'd suggest using viroAppProps. ViroAppProps is a simple dictionary of values that is attached to the scene navigator that can be used to maintain application state. Every Viro scene will have access to the scene navigator.

Here's an app that we wrote that uses viroAppProps to pass state from one component to the next: https://github.com/viromedia/ViroARSampleApp

Here are the relevant code files:
https://github.com/viromedia/ViroARSampleApp/blob/master/App.js
https://github.com/viromedia/ViroARSampleApp/blob/master/js/ARHitTestSample.js

In your case, for the child component I'd refer to the prop as this.props.sceneNavigator.viroAppProps.avatarSource and define the viroAppProps in the parent component. Look at ViroARSampleApp/App.js to see an example of this.

Have a look at the sample above and let me know if that makes sense. If you have any more questions on this let me know!

[mypark]

Sure, tried viroAppProps and that works fine.