37

My code is:

...
<Router>
 <Scene key="com1" component={Com1} initial/>
<Scene key="com2" component={Com2}/>
</Router>
...
com1.js
...
onPress={Actions.com2}

I changed com1 to com2.

But I need to pass values for the inputbox of Com1 to Com2.

How can I do that?

selva
  • 1,175
  • 1
  • 19
  • 39
Eric Chan
  • 1,192
  • 4
  • 16
  • 30

4 Answers4

69

You can pass data like this:

Actions.com2 ({text: 'Hello World'})

You can recover your data in com2 like this:

this.props.text

You can go to the next tutorial for more information:

https://github.com/aksonov/react-native-router-flux/blob/master/docs/v3/MINI_TUTORIAL.md

meJustAndrew
  • 6,011
  • 8
  • 50
  • 76
Alexandre Teixeira
  • 1,366
  • 11
  • 9
6

In addition to that, (and for those in the comments who said it didn't work) you may want to try below. When you pass the

Actions.com2({text : 'Hello World'});

Com2 should pass 'props'

const Com2 = (props) => {
   return ( <View ...
    {props.text}
   ... />
);
user2552155
  • 77
  • 1
  • 2
4

Pass data through an Input,

   import React, { Component } from 'react';
   import { Text, View, TextInput, TouchableOpacity } from 'react-native';
   import { Actions } from 'react-native-router-flux';

   export default class Com1 extends Component {
   state = { text: '' };
      render() {
       return (
          <View>
             <TextInput
                value={this.state.text}
                onChangeText={text => this.setState({ text })}
            />
    <TouchableOpacity onPress={this.onPressNext.bind(this)}>
   <Text>Get Data</Text>
    </TouchableOpacity>
    </View>
    );
}

onPressNext() {
    Actions.Com2({text: this.state.text });
}
}

To get value in the second Page

   export default class Com2 extends Component {

      render() {
         return (
        <View>
         <Text>
          {this.props.text}
         </Text>
       </View>
    );
  }
 }

You can refer to this link: https://react-native-solutions.blogspot.com/2018/07/passing-data-between-screens-in-react.html

1

Use push method as below:

Actions.push('your key name',{prop you want to pass})

It pushes the scene to the stack, performing a transition to the new scene.

Gaurav Jeswani
  • 4,410
  • 6
  • 26
  • 47
sahil555
  • 152
  • 2
  • 11
  • Please format your answer: https://stackoverflow.com/editing-help#code for better readability. A link to the docu would also improve the quality of your answer. – jasie Sep 11 '19 at 09:21