React Native Child Parent communication

Question

Parent Child communication seems no problem using pass props:

mainpage.ios.js code:

var OtherPage = require('./otherpage');
<OtherPage value={2}/>

Then on otherpage.ios.js I can utilise the variable using this.props.value but then if I update the value on otherpage.ios.js how does it get communicated back to the mainpage.ios.js?

Answer 1

You would pass a callback then pass it through props, likely utilizing the componentWillReceiveProps hook as your setup gets more advanced.

If you are doing this alot then yes, you should be using Flux or Redux or similar.

import React, {
  Component,
  TouchableOpacity,
  Text,
} from 'react-native';


class Main extends Component {
  
  constructor() {
    super();
    this.state = {
      data: 'default'
    }
  }
  
  onChange = (data) => {
    console.log(`Data changes to ${data} !`);
    this.setState({ data });
  }
  
  render() {
    const { data } = this.state;
    return <Other data={data} onChange={this.onChange}></Other>;
  }
  
}

class Other extends Component {
  render() {
    const { data } = this.props;
    console.log(`Other Component Data is ${data}`);
    return (
      <TouchableOpacity onPress={() => {this.props.onChange('Success!')} }>
        <Text style={{fontSize: 30}}>{data}</Text>
      </TouchableOpacity>
    );
  }
}

Additionally, if you utilize Static Components when you know state is not needed in the secondary component, you can build much more re-useable functional components:

class Main extends Component {
  
  constructor() {
    super();
    this.state = {
      data: 'default'
    }
  }
  
  onChange = (data) => {
    console.log(`Data changes to ${data} !`);
    this.setState({ data });
  }
  
  render() {
    const { data } = this.state;
    return <Other data={data} onChange={this.onChange}></Other>;
  }
  
}

const Other = ({ data, onChange }) => {
  return (
      <TouchableOpacity onPress={() => {onChange('Success!')} }>
        <Text style={{fontSize: 30}}>{data}</Text>
      </TouchableOpacity>
  );
}

EDIT These days you should probably only use functional components and hooks, there is much documentation on the React websites on this, but the idea is similar :-)