import React, { Component } from 'react';
import {
  Text,
  View,
  Button
} from 'react-native';
class B extends Component {
  state = {
    nub: 0
  }
  renderItem = ()=> {
    return <Text style={{fontSize: 30, color: "#000"}}>{this.state.nub}</Text>
  }
  componentDidMount(){
    this.props.forceUpdate()
  }
  render() {
    return (
      <View style={{height: 100, width:100, backgroundColor: 'blue'}}>
        <Text style={{fontSize: 80, color: "#fff", textAlign: "center"}}>B</Text>
        <Button title={'CLICK'} onPress={()=>{
          this.setState({
            nub: this.state.nub+1
          },()=>{
            this.props.forceUpdate()
          })
        }}/>
        {this.props.element(this.renderItem)}
      </View>
    );
  }
}
class App extends Component {
  element = (item) => {
    this.renderElement = ()=> item()
  }
  renderElement = () => {
    return null
  }
  
  render() {
    return (
      <View>
        <View style={{height: 300, backgroundColor: 'red', alignItems: "center"}}>
          <Text style={{fontSize: 80, color: "#fff", textAlign: "center"}}>A</Text>
          <B forceUpdate={this.forceUpdate.bind(this)} element={this.element} />
        </View>
        <View style={{flexDirection: "row", paddingTop: 20}}>  
          <View style={{height: 130, width: 130, backgroundColor: "yellow", alignItems: "center", justifyContent:"center"}}>{this.renderElement()}</View>
          <View style={{height: 130, width: 130, backgroundColor: "yellow", alignItems: "center", justifyContent:"center"}}>{this.renderElement()}</View>
          <View style={{height: 130, width: 130, backgroundColor: "yellow", alignItems: "center", justifyContent:"center"}}>{this.renderElement()}</View>
        </View>
      </View>
    );
  }
}

export default App;