React Native Child Parent communication

Question

Parent Child communication seems no problem using pass props:

mainpage.ios.js code:

var OtherPage = require(\'./otherpage\');


        

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 :-)

Answer 2

I highly recommend that you use Flux here. When you find yourself in need of various components needing the same information, then it means you need Flux. You can of course use a bunch of callbacks and so on, but as your app grows and becomes more complex, it will be much more difficult to manage it without something like flux.

With flux you will have your mainpage component listen to changes and once the change took place do something. For example:

mainpage:

componentDidMount() {
  SomeStore.addChangeListener(this.updateComponent)
}

componentWillUnmount() {
  SomeStore.removeChangeListener(this.updateComponent)
}

updateComponent() {
  this.setState value: SomeStore.getValue()
}



otherpage:

toggle() {
  SomeActions.change(this.props.value + 1)
}

render() {
  <TouchableOpacity onPress={this.toggle}>
    <View>Some View</View>
  </ToucableOpacity>
}