├── .gitignore
├── .watchmanconfig
├── App.js
├── README.md
├── app.json
├── assets
    ├── icon.png
    └── splash.png
├── babel.config.js
├── package-lock.json
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/**/*
2 | .expo/*
3 | npm-debug.*
4 | *.jks
5 | *.p12
6 | *.key
7 | *.mobileprovision
8 | 


--------------------------------------------------------------------------------
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
  3 | 
  4 | class Botao extends Component {
  5 |   constructor(props) {
  6 |     super(props);
  7 | 
  8 |     this.state = {};
  9 |     let tamanho = 1;
 10 |     if (props.tamanho) {
 11 |       tamanho = parseInt(props.tamanho);
 12 |     }
 13 |     let bg = "#E0E0E0";
 14 |     if (props.bg) {
 15 |       bg = props.bg;
 16 |     }
 17 | 
 18 |     this.styles = StyleSheet.create({
 19 |       area: {
 20 |         flex: tamanho,
 21 |         justifyContent: "center",
 22 |         alignItems: "center",
 23 |         borderWidth: 1,
 24 |         borderColor: "#999",
 25 |         backgroundColor: bg
 26 |       },
 27 |       text: {
 28 |         fontSize: 18
 29 |       }
 30 |     });
 31 |   }
 32 |   render() {
 33 |     return (
 34 |       <TouchableOpacity style={this.styles.area} onPress={this.props.onPress}>
 35 |         <Text style={this.styles.text}>{this.props.text}</Text>
 36 |       </TouchableOpacity>
 37 |     );
 38 |   }
 39 | }
 40 | 
 41 | export default class App extends Component {
 42 |   constructor(props) {
 43 |     super(props);
 44 | 
 45 |     this.state = { result: "0" };
 46 | 
 47 |     this.btn = this.btn.bind(this);
 48 |   }
 49 | 
 50 |   btn(text) { 
 51 |     let s = this.state;
 52 | 
 53 |     if (text === "C") {
 54 |       s.result = "0";
 55 |     }else if (text === "=") {
 56 |       s.result = eval(s.result);
 57 |     }else if (s.result === "0") {
 58 |       s.result = text;
 59 |     }else{
 60 |       s.result += text;
 61 |     }
 62 | 
 63 |     this.setState(s);
 64 |   }
 65 | 
 66 |   render() {
 67 |     return (
 68 |       <View style={styles.container}>
 69 |         <View style={styles.linha}>
 70 |           <Text style={styles.result}>{this.state.result}</Text>
 71 |         </View>
 72 |         <View style={styles.linha}>
 73 |           <Botao
 74 |             text="C"
 75 |             tamanho="3"
 76 |             bg="#CCC"
 77 |             onPress={() => {
 78 |               this.btn("C");
 79 |             }}
 80 |           />
 81 |           <Botao
 82 |             text="/"
 83 |             onPress={() => {
 84 |               this.btn("/");
 85 |             }}
 86 |             bg="#FD9526"
 87 |           />
 88 |         </View>
 89 |         <View style={styles.linha}>
 90 |           <Botao
 91 |             text="7"
 92 |             onPress={() => {
 93 |               this.btn("7");
 94 |             }}
 95 |           />
 96 |           <Botao
 97 |             text="8"
 98 |             onPress={() => {
 99 |               this.btn("8");
100 |             }}
101 |           />
102 |           <Botao
103 |             text="9"
104 |             onPress={() => {
105 |               this.btn("9");
106 |             }}
107 |           />
108 |           <Botao
109 |             text="*"
110 |             onPress={() => {
111 |               this.btn("*");
112 |             }}
113 |             bg="#FD9526"
114 |           />
115 |         </View>
116 |         <View style={styles.linha}>
117 |           <Botao
118 |             text="4"
119 |             onPress={() => {
120 |               this.btn("4");
121 |             }}
122 |           />
123 |           <Botao
124 |             text="5"
125 |             onPress={() => {
126 |               this.btn("5");
127 |             }}
128 |           />
129 |           <Botao
130 |             text="6"
131 |             onPress={() => {
132 |               this.btn("6");
133 |             }}
134 |           />
135 |           <Botao
136 |             text="-"
137 |             onPress={() => {
138 |               this.btn("-");
139 |             }}
140 |             bg="#FD9526"
141 |           />
142 |         </View>
143 |         <View style={styles.linha}>
144 |           <Botao
145 |             text="1"
146 |             onPress={() => {
147 |               this.btn("1");
148 |             }}
149 |           />
150 |           <Botao
151 |             text="2"
152 |             onPress={() => {
153 |               this.btn("2");
154 |             }}
155 |           />
156 |           <Botao
157 |             text="3"
158 |             onPress={() => {
159 |               this.btn("3");
160 |             }}
161 |           />
162 |           <Botao
163 |             text="+"
164 |             onPress={() => {
165 |               this.btn("+");
166 |             }}
167 |             bg="#FD9526"
168 |           />
169 |         </View>
170 |         <View style={styles.linha}>
171 |           <Botao
172 |             text="0"
173 |             onPress={() => {
174 |               this.btn("0");
175 |             }}
176 |             tamanho="2"
177 |           />
178 |           <Botao
179 |             text="."
180 |             onPress={() => {
181 |               this.btn(".");
182 |             }}
183 |           />
184 |           <Botao
185 |             text="="
186 |             onPress={() => {
187 |               this.btn("=");
188 |             }}
189 |             bg="#FD9526"
190 |           />
191 |         </View>
192 |       </View>
193 |     );
194 |   }
195 | }
196 | 
197 | const styles = StyleSheet.create({
198 |   container: {
199 |     flex: 1,
200 |     backgroundColor: "#fff",
201 |     alignItems: "center",
202 |     justifyContent: "center"
203 |   },
204 |   linha: {
205 |     flex: 1,
206 |     flexDirection: "row"
207 |   },
208 |   result: {
209 |     backgroundColor: "#000",
210 |     color: "#FFF",
211 |     fontSize: 50,
212 |     flex: 1,
213 |     textAlign: "right"
214 |   }
215 | });
216 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # SimpleReactCalculatorExample
2 | Para executar no Expo utilize npm start
3 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "Calculadora",
 4 |     "slug": "calculadora",
 5 |     "privacy": "public",
 6 |     "sdkVersion": "32.0.0",
 7 |     "platforms": [
 8 |       "ios",
 9 |       "android"
10 |     ],
11 |     "version": "1.0.0",
12 |     "orientation": "portrait",
13 |     "icon": "./assets/icon.png",
14 |     "splash": {
15 |       "image": "./assets/splash.png",
16 |       "resizeMode": "contain",
17 |       "backgroundColor": "#ffffff"
18 |     },
19 |     "updates": {
20 |       "fallbackToCacheTimeout": 0
21 |     },
22 |     "assetBundlePatterns": [
23 |       "**/*"
24 |     ],
25 |     "ios": {
26 |       "supportsTablet": true
27 |     }
28 |   }
29 | }


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toshiossada/SimpleReactCalculatorExample/445a82ef471f63aa8a70cbcb1ec0434d71067ed2/assets/icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toshiossada/SimpleReactCalculatorExample/445a82ef471f63aa8a70cbcb1ec0434d71067ed2/assets/splash.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "eject": "expo eject"
 8 |   },
 9 |   "dependencies": {
10 |     "expo": "^32.0.0",
11 |     "react": "16.5.0",
12 |     "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
13 |   },
14 |   "devDependencies": {
15 |     "babel-preset-expo": "^5.0.0"
16 |   },
17 |   "private": true
18 | }
19 | 


--------------------------------------------------------------------------------