Send data back when press back

send-data-back-react-navigation.md

import React from 'react';
import { Button, View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation'; // Version can be specified in package.json

class HomeScreen extends React.Component {
  state = { selected: false };
  
  onSelect (data) {
    this.setState(data);
  }
  
  onPress () {
    this.props.navigation.navigate("Details", { onSelect: (data) =>  this.onSelect(data) })
  }

  render() {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Home Screen</Text>
          <Text>{this.state.selected ? "Selected" : "Not Selected"}</Text>
          <Button title="Next" onPress={() =>this.onPress()} />
        </View>
      );
    }
  }

class DetailsScreen extends React.Component {
  goBack () {
    const { navigation } = this.props;
    navigation.state.params.onSelect({ selected: true });
    navigation.goBack();
  }
  render() {

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go back"
          onPress={() => this.goBack()}
        />
      </View>
    );
  }
}

const RootStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

react-navigation/react-navigation#288 (comment)

========= update with 3 screen

import React from 'react';
import { Button, View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation'; // Version can be specified in package.json

class SceenA extends React.Component {
  state = { selected: false };
  
  onSelect = data => {
    this.setState(data);
  };
  
onPress () {
  this.props.navigation.navigate("SceenBB", { onSelect: this.onSelect })
}

render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Screen A</Text>
        <Text>{this.state.selected ? "Selected" : "Not Selected"}</Text>
        <Button title="Next" onPress={() =>this.onPress()} />
      </View>
    );
  }
}

class SceenB extends React.Component {
  goBack = ()=> {
    const { navigation } = this.props;
    navigation.goBack();
    navigation.state.params.onSelect({ selected: true });
   
  }
  
onPress () {
  this.props.navigation.navigate("SceenCC", { onSelect: this.props.navigation.state.params.onSelect })
  }
  
    onSelect = data => {
    this.setState(data);
    };
  render() {

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Screen B</Text>
        <Button
          title="Go back"
          onPress={this.goBack}
        />
        <Button title="Next" onPress={() =>this.onPress()} />
      </View>
    );
  }
}
class SceenC extends React.Component {
  goBack = ()=> {
    const { navigation } = this.props;
    navigation.pop(2);
    navigation.state.params.onSelect({ selected: true });
   
  }
  render() {

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Screen C</Text>
        <Button
          title="Go back"
          onPress={this.goBack}
        />
      </View>
    );
  }
}

const RootStack = StackNavigator(
  {
    SceenAA: {
      screen: SceenA,
    },
    SceenBB: {
      screen: SceenB,
    },
    SceenCC: {
      screen: SceenC,
    },
  },
  {
    initialRouteName: 'SceenAA',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

thanks https://www.facebook.com/sondt.gvn?fref=ufi

pop back data