react-native-context-api-example/App.js at master · lvntyldz/react-native-context-api-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

import Btn from './Button.js';

const AppContext = React.createContext();

class AppProvider extends Component {

  constructor(props) {
    super(props);

    this.state = {
      value: 0,
      reset: () => {
        this.setState({value: 0});
      },
      increase: () => {
        this.setState({value: this.state.value + 1});
      },
      decrease: () => {
        this.setState({value: this.state.value - 1});
      }
    } //state
  } //constructor

  render() {

    return (
      <AppContext.Provider value={this.state}>
        {this.props.children}
      </AppContext.Provider>
    ); //return

  } //render

} //AppProvider

export default class App extends Component {

  render() {

    return (
      <AppProvider>
        <View style={[s.container, {borderColor: 'black',top: 20}]}>

          <AppContext.Consumer>
            {(context) => {
              return (
                <View style={{flex: 1,flexDirection: 'column'}}>
                  <View style={{flexDirection: 'row',height: 50,borderColor: 'gray',borderWidth: 1,margin: 10}}>
                    <Text>MAIN COMPONENT : {context.value}</Text>
                    <Btn color="gray" title="Reset To Default" onPress={context.reset}/>
                  </View>
                  <View style={{flex: 1,flexDirection: 'row'}}>
                    <Right/>
                    <Left/>
                  </View>
                </View>
              );//return
            }//context
            }
          </AppContext.Consumer>

        </View>
      </AppProvider>
    ); //return

  } //render

} //App

const Left = () => {
  return (
    <View style={[s.container, {borderColor: 'red'}]}>
      <AppContext.Consumer>
        {(context) => {
          return (
            <View style={{flex: 1}}>
              <Text>LEFT COMP : {context.value}</Text>
              <Btn color="red" title="Increase" onPress={context.increase}/>
            </View>
          );//return
        }//context
        }
      </AppContext.Consumer>
    </View>
  ); //return
} // Left

const Right = (props) => {
  return (
    <View style={[s.container, {borderColor: 'blue'}]}>
      <AppContext.Consumer>
        {(context) => {
          return (
            <View style={{flex: 1}}>
              <Text> RIGHT COMP : {context.value}</Text>
              <Btn color="blue" title="Decrease" onPress={context.decrease}/>
            </View>
          ); //return
        }//context
        }
      </AppContext.Consumer>
    </View>
  ) //return
} // Right

const s = StyleSheet.create({
  container: {
    flex: 1,
    margin: 10,
    borderWidth: 1
  }
});