Layout

.gitignore

@@ -0,0 +1,7 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={styles.inputs} ></View>
+        <View style={styles.results}>
+        <Text style={styles.inputText}>0</Text></View>
+        <View style={styles.operations}>
+        <View style={styles.viewColumn}>
+
+              <View style={styles.numbers}>
+              <Text style={styles.buttonAC}>AC</Text>
+              <Text style={styles.button}>Back</Text>
+              <Text style={styles.button}>%</Text>
+              </View>
+              <View style={styles.numbers}>
+              <Text style={styles.button}>7</Text>
+              <Text style={styles.button}>8</Text>
+              <Text style={styles.button}>9</Text>
+              </View>
+              <View style={styles.numbers}>
+              <Text style={styles.button}>4</Text>
+              <Text style={styles.button}>5</Text>
+              <Text style={styles.button}>6</Text>
+              </View>
+              <View style={styles.numbers}>
+              <Text style={styles.button}>1</Text>
+              <Text style={styles.button}>2</Text>
+              <Text style={styles.button}>3</Text>
+              </View>
+              <View style={styles.numbers}>
+              <Text style={styles.button}></Text>
+              <Text style={styles.button}>0</Text>
+              <Text style={styles.button}>.</Text>
+              </View>
+
+        </View>    
+            <View style={styles.operators}>
+            <Text style={styles.button}>/</Text>
+              <Text style={styles.button}>*</Text>
+              <Text style={styles.button}>-</Text>
+              <Text style={styles.button}>+</Text>
+              <Text style={styles.buttonEqual}>=</Text>
+
+            </View>
+        </View>
+
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#d2d4d8',
+
+  },
+  inputs:{
+    flex:2,
+    alignItems: 'center',
+    justifyContent: 'center',
+
+  },
+  inputText:{
+    fontSize:50
+  },
+results:{padding:10,
+
+  flex:3,
+  alignItems: 'flex-end',
+  justifyContent: 'flex-end',
+},
+operations:{flexDirection:"row",
+  flex:6,
+  backgroundColor:"#fff",
+},
+numbers:{flexDirection:"row",
+  flex:3,
+  backgroundColor:"#fff",
+
+},
+operators:{
+flex :1,
+backgroundColor:"#fff"
+},
+button:{padding:20,
+
+  flex:3,
+  borderWidth:.3,
+  borderColor:"#444",
+  color:"#444",
+  fontSize:25,
+   alignItems:"center",
+   justifyContent:"space-between"
+},
+viewColumn:{
+flex:3,
+},
+buttonEqual:{
+  padding:20,
+  flex:3,
+  borderWidth:.3,
+  backgroundColor:"#ff6c16",
+  borderColor:"#444",
+  color:"#444",
+  fontSize:25,
+   alignItems:"center",
+   justifyContent:"space-between"
+},
+buttonAC:{
+  padding:20,
+  flex:3,
+  borderWidth:.3,
+  backgroundColor:"#fff",
+  borderColor:"#444",
+  color:"#ff6c16",
+  fontSize:25,
+   alignItems:"center",
+   justifyContent:"space-between"
+
+}
+
+});

app.json

@@ -0,0 +1,34 @@
+{
+  "expo": {
+    "androidStatusBar": {
+      "barStyle":"light-content",
+      "backgroundColor":"#444"
+
+    },
+    "name": "Calculator",
+    "slug": "Calculator",
+    "privacy": "public",
+    "sdkVersion": "31.0.0",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

package.json

@@ -0,0 +1,18 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "^31.0.2",
+    "react": "16.5.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "^5.0.0"
+  },
+  "private": true
+}