ninekey component

squarenotsquare/src/components/NineKey.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { Text, View } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import { styles } from "../screens/styles/AppStyles";
+
+function NineKey(props){
+
+  function generateKey(value){
+    return (
+      <TouchableOpacity
+        style={[styles.darkGreen, styles.nineKeyButton, styles.dropShadow, styles.centeredJustify]}
+        onPress={() => props.onPress(value)}
+      >
+        <Text style={[styles.boldText, styles.headerTitleFont, styles.centeredText, styles.lightText]}>
+          {value}
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <View style={[styles.centeredItems]}>
+      <View style={styles.flexRow}>
+        {generateKey(7)}
+        {generateKey(8)}
+        {generateKey(9)}
+      </View>
+      <View style={styles.flexRow}>
+        {generateKey(4)}
+        {generateKey(5)}
+        {generateKey(6)}
+      </View>
+      <View style={styles.flexRow}>
+        {generateKey(1)}
+        {generateKey(2)}
+        {generateKey(3)}
+      </View>
+      <View style={styles.flexRow}>
+        <View style={[styles.nineKeyButton]} />
+        {generateKey(0)}
+        <View style={[styles.nineKeyButton]} />
+      </View>
+    </View>
+  );
+}
+
+export default NineKey;