New WiFi setup views, not functional yet

2021-05-24 13:19:19 +02:00
parent 90ae6df6de
commit fee67e04aa
4 changed files with 362 additions and 0 deletions
--- a/components/SetupView.js
+++ b/components/SetupView.js
@@ -0,0 +1,103 @@
+import React from "react";
+import {
+  StyleSheet,
+  View,
+  StatusBar,
+  ImageBackground,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import EntypoIcon from "react-native-vector-icons/Entypo";
+
+
+function AdditionalOptionsBottomBar(props) {
+  return (
+    <View style={bottomBarStyles.container}>
+      { props.leftText ?
+        <TouchableOpacity onPress={props.onLeftPress}>
+          <Text style={bottomBarStyles.text}>{props.leftText} </Text>
+        </TouchableOpacity> : <View></View>
+      }
+      {props.rightText &&
+        <TouchableOpacity onPress={props.onRightPress}>
+          <Text style={bottomBarStyles.text}>{props.rightText}</Text>
+        </TouchableOpacity>
+      }
+    </View>
+  );
+};
+
+const bottomBarStyles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingBottom: 30,
+  },
+  text: {
+    color: "rgba(255,255,255,0.5)",
+  }
+})
+
+// ---------------------------------------------------------------------------------------------
+
+
+function SetupView(props) {
+
+  return (
+    <View style={{ flex: 1 }}>
+
+      <StatusBar barStyle="light-content" backgroundColor="rgba(0,0,0,0.4)" translucent={true} />
+      <ImageBackground
+        source={require("../assets/pool_sky_background_blurred.jpg")}
+        resizeMode="cover"
+        style={{ flex: 1 }}
+      >
+        <View style={setupViewStyles.container}>
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
+            {props.backButton &&
+              <TouchableOpacity onPress={props.navigation.goBack}>
+                <EntypoIcon name="chevron-left" style={setupViewStyles.backButton}></EntypoIcon>
+                </TouchableOpacity>
+            }
+            <Text style={setupViewStyles.headerText}>
+              {props.headerText}
+            </Text>
+          </View>
+          {props.children}
+          <AdditionalOptionsBottomBar leftText={props.lowerLeftButtonText}
+            onLeftPress={props.onLowerLeftButtonPress}
+            rightText={props.lowerRightButtonText}
+            onRightPress={props.onLowerRightButtonPress}>
+          </AdditionalOptionsBottomBar>
+        </View>
+      </ImageBackground>
+    </View>
+  );
+}
+
+const setupViewStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "space-between",
+    width: "80%",
+    marginLeft: 40,
+    marginTop: 60,
+  },
+  headerText: {
+    color: "rgba(255,255,255,1)",
+    fontSize: 25,
+  },
+  subtext: {
+    color: "rgba(255,255,255,1)",
+    textAlign: "left",
+    fontSize: 18,
+    lineHeight: 25,
+    width: "80%",
+  },
+  backButton: {
+    color: "rgba(255,255,255,1)",
+    fontSize: 40
+  },
+});
+
+export default SetupView;