screenLayoult/App.js at master · gdproano/screenLayoult · 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 {
  Modal,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from "react-native";

export default class App extends Component {
  state = {
    modalVisible: true
  };

  setModalVisible (visible)  {
    this.setState({ modalVisible: visible });
  };

  render() {
    return (
      <View style={styles.container}>
        {
          this.state.modalVisible && <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert("Modal has been closed.");
          }}
        >
          <View style={styles.modal}>
            <View>
              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>
        }
        <View style={styles.navigation}>
          <Text style={styles.navigationText}>Navigation</Text>
        </View>
        <View style={styles.header}>
          <Text style={styles.headerText}>
            Escanea el código de tu vecino a quien quieres paggar.
          </Text>
        </View>
        <View style={styles.main}>
          <Text style={styles.mainText}>Pago.</Text>
        </View>
        <View style={styles.footer}>
        <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Open Modal</Text>
              </TouchableHighlight>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  },
  header: {
    padding: 24
  },
  headerText: {
    fontSize: 16,
    fontWeight: "normal",
    fontStyle: "normal",
    lineHeight: 19.2,
    letterSpacing: 0,
    color: "rgba(0, 0, 0, 0.54)"
  },
  main: {
    backgroundColor: 'red',
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    width: "100%"
  },
  modal: {
    backgroundColor: 'transparent',
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    width: "100%",

  },
  navigation: {
    height: 76
  },
  footer: {
    padding: 40
  },
  footerText: {
    fontSize: 18,
    fontWeight: "500",
    fontStyle: "normal",
    lineHeight: 19.2,
    letterSpacing: 0,
    textAlign: "center",
    color: "#0f265c"
  }
});