React-native-router-flux: Passing props to previous scene

[rodrigofbm]

Version

• react-native-router-flux v4.0.6
• react v16.6.3
• react-native v0.58.6

Expected behaviour

Send props to the previous scene

Actual behaviour

Don't send props to the previous scene

onBarCodeRead = barcodes => Actions.pop({refresh: {barCode: barcodes[0], showModal: true } } );

The last scene has: 
render () {
        return (
            <View  style={styles.container}>
                <RNCamera
                  ref={ref => {
                    this.camera = ref;
                  }}
                  style={styles.preview}
                  type={RNCamera.Constants.Type.back}
                  flashMode={RNCamera.Constants.FlashMode.on}
                  androidCameraPermissionOptions={{
                    title: 'Permissão para usar câmera',
                    message: 'Precisamos de permissão para usar sua câmera',
                    buttonPositive: 'Permitir',
                    buttonNegative: 'Negar',
                  }}
                  onGoogleVisionBarcodesDetected={({ barcodes }) => {
                    if(barcodes.length > 0) {
                      console.log(barcodes[0].data);
                      return this.onBarCodeRead(barcodes);
                    }
                  }}
                />
                <View style={styles.maskOutter}>
                  <View style={[{ flex: this.maskRowHeight  }, styles.maskRow, styles.maskFrame]} />
                  <View style={[{ flex: 30 }, styles.maskCenter]}>
                      <View style={[{ width: this.maskColWidth }, styles.maskFrame]} />
                      <View style={styles.maskInner} />
                      <View style={[{ width: this.maskColWidth }, styles.maskFrame]} />
                  </View>
                  <View style={[{ flex: this.maskRowHeight }, styles.maskRow, styles.maskFrame]} />
                </View>
                <View style={{justifyContent: 'flex-end', alignItems: 'center'}} >
                    <Text style={{fontSize: 16, color: '#FFF'}} ></Text>
                </View>
            </View>
        )
    }

and the previous:

componentWillReceiveProps(nextProps) {
    console.log(nextProps);
}

but nextProps is always in the same...

[prospegto]

Same here. In the meantime I'm using Actions.replace(sceneKey: String, props: Object)

[Cmancuso]

This does not appear to work either. Same functionality as pop() where no props are passed to the previous scene.
popAndPush() does not work at all and replace() pops but does not send props

[prospegto]

I'm using v4.0.6 and I confirm replace is sending props

[yuricorrea]

I use the navigation prop to do this.

Scene 1:

Actions.push('nextScreen', {onBack: this.onBack.bind(this)})

Scene 2:

const { navigation } = this.props;
navigation.goBack(); // or Actions.pop();
navigation.state.params.onBack ? navigation.state.params.onBack({ key: value )}) : void(0);

[nica0012]

@yuricorrea Are you successfully passing props back with this? I am getting error with third line.

[yuricorrea]

@nica0012 are you using typescript?

[nica0012]

@yuricorrea No I am not. right now I am trying to pass props back with Actions.Replace but it doesn't work good I was hoping your solution would!

[yuricorrea]

@nica0012 make sure that your component have navigation prop.
exemple: <Scene key='login' component={Login} />
Login component will receive this prop

[nica0012]

@yuricorrea I am trying to change the title on the previous scene when I go back but it always stays the same.

I am getting this error: navigation.state.params.onBack is not a function...

I do have the navigation prop on my component too :/

[yuricorrea]

@nica0012 can you post this part of your code?

[nica0012]

@yuricorrea

Actions.replace('homeList', { title: item, });

[yuricorrea]

@nica0012 Actions.replace pops the current scene from the stack. Maybe my solution works only with Actions.push

[fanzhiri]

@rodrigofbm @yuricorrea @nica0012 @Cmancuso @prospegto @aksonov
* I make a New solution ，it work for me , share to you *

1、call Action.BB() in SceneAA
SceneAA => SenceBB
2、call pop() in SenceBB
SceneBB => SenceAA
the func named onComeback in SenceAA will be called

https://github.com/fanzhiri/react-native-router-flux/commit/3f23911e0fe9acfa5756f0183e272ff0abe435f0

[patelrushabh]

I'm using v4.0.6 and I confirm replace is sending props
replace passing props, but i get warning Can't perform a React state update on an unmounted component,a React state update on an unmounted To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method, memory leak
@prospegto

[rodrigofbm]

I had to update the router-flux to the new version in order to not give an error in RN 0.62 and I still couldn't solve this problem and probably won't. Time to move to React Navigation and leave it here in the past.

[leogoncalves]

Actions.popTo(Scene)
Actions.refresh({props})
works to me

[online-lorno]

Actions.routeName({ type: ActionConst.BACK, ...params }) doesn't work for me. Instead I used the reactnavigation's navigation prop, navigation.navigate('routeName', { ...params }).

https://reactnavigation.org/docs/params#passing-params-to-a-previous-screen

[robinalexandre]

Lot of people are saying to add a Timeout when doing in order for the refresh to not be called to quickly:
Actions.popTo(Scene); Actions.refresh({props})

But I don't like workaround working with timeout function so I found a new easy solution.
Promise.resolve(Actions.pop()).then(() => { Actions.refresh(...props); });

[kosmicke]

Following what @yuricorrea sad, but changing some things, I could achieve the expected behaviour, making the last scene execute a function from the previous one:

// First scene
Actions.push("secondScene", { 
    beforeBack: () => { this.loadData() } 
})

// Second scene
this.props.beforeBack ? this.props.beforeBack() : null;
Actions.pop()

The second scene, before popping to firstScene, executes a function from the firstScene called "loadData"

[inhoho]

Hi, I wonder this problem is solved or not.

In my case, I used react-navigation. Because this npm is based on react-navigation.

1. Go to nextScene

Scene 1:

Actions.nextScene()

1. Make a param for Scene 1 in the Scence 2.

Scene 2:

const { navigation } = this.props;
navigation.navigate(Actions.state.routes.slice(-2)[0].routeName, {KEY:VALUE})

1. Use param from the Scene 2 in Scene 1
   Scene 1:

this.props.navigation.state.params.KEY

This param has the VALUE from the Scene 1.

I solve the problem this way. Please let me know if you guys has more nice way.

Thanks