React Native workshop #2 snippet

week_2_demo_7.js

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null
    }
  }
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <TextInput
          style={{width: '80%', fontSize: 24}}
          value={this.state.value}
          onChangeText={(value) => this.setState({value})}
        />
        <Child text={this.state.value} />
      </View>
    );
  }
}

class Child extends Component {
  componentWillReceiveProps() {
    console.log("component will receive props");
  }
  shouldComponentUpdate() {
    console.log("should component update");
    return false;
  }
  componentWillUpdate() {
    console.log("component will update");
  }
  componentDidUpdate() {
    console.log("component did update");
  }
  render() {
    return (
      <View>
        <Text>{this.props.text}</Text>
      </View>
    );
  }
}