Fixed few bugs, added styling

ferdiamg · Oct 16, 2019 · 7ef3020 · 7ef3020
1 parent 4ced483
commit 7ef3020
Show file tree

Hide file tree

Showing 9 changed files with 161 additions and 65 deletions.
diff --git a/App.js b/App.js
@@ -9,15 +9,19 @@ import Icon from './components/Icon';
 const styles = StyleSheet.create({
   Logo: {
     position: 'absolute',
-    bottom: Platform.OS === 'ios' ? 43 : 10,
+    bottom: Platform.OS === 'ios' ? 47 : 12,
     zIndex: 1,
     display: 'flex',
     alignSelf: 'center',
     shadowColor: 'black',
     shadowOffset: {width: 0, height: 10},
     shadowOpacity: 0.1,
-    shadowRadius: 11.14,
-    elevation: 17,
+    shadowRadius: 11,
+    elevation: 50,
+    backgroundColor: 'white',
+    borderRadius: 100,
+    width: 76,
+    height: 76,
   },
   ViewContainer: {
     flex: 1,

diff --git a/android/.project b/android/.project
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <projectDescription>
-	<name>android</name>
+	<name>RN_final</name>
 	<comment>Project android created by Buildship.</comment>
 	<projects>
 	</projects>

diff --git a/android/app/.classpath b/android/app/.classpath
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8/"/>
+	<classpathentry kind="con" path="org.eclipse.buildship.core.gradleclasspathcontainer"/>
+	<classpathentry kind="output" path="bin/default"/>
+</classpath>
diff --git a/android/app/.project b/android/app/.project
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>app</name>
+	<comment>Project app created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>
diff --git a/android/app/.settings/org.eclipse.buildship.core.prefs b/android/app/.settings/org.eclipse.buildship.core.prefs
@@ -0,0 +1,2 @@
+connection.project.dir=..
+eclipse.preferences.version=1
diff --git a/assets/svgs.js b/assets/svgs.js
@@ -31,42 +31,81 @@ export default {
   Logo: {
     svg: (
       <G transform="translate(-4807.928 -2795.29)">
-        <Circle cx="33.243" cy="33.243" r="33.243" fill="#fff" transform="translate(4807.928 2795.29)"/>
-        <Path fill="#069bff" d="M4836.767 2804.533l-11.794 8.174a7.985 7.985 0 00-3.436 6.563v18.529a7.986 7.986 0 003.436 6.563l11.794 8.174a7.984 7.984 0 009.055.029l11.5-7.866a7.983 7.983 0 003.479-6.592v-19.146a7.984 7.984 0 00-3.479-6.592l-11.5-7.866a7.985 7.985 0 00-9.055.03z"/>
-        <Path fill="#fff" d="M4853.915 2818.384l-12.6-8.616-12.883 8.929v19.674l12.883 8.929 12.6-8.616v-5.469l-7.823-4.68 7.823-4.68zm-13.688 7.285v5.73l7.813 4.675-6.707 4.585-7.434-5.152v-13.942l7.434-5.152 6.707 4.585z"/>
+        <Circle
+          cx="33.243"
+          cy="33.243"
+          r="33.243"
+          fill="#fff"
+          transform="translate(4807.928 2795.29)"
+        />
+        <Path
+          fill="#069bff"
+          d="M4836.767 2804.533l-11.794 8.174a7.985 7.985 0 00-3.436 6.563v18.529a7.986 7.986 0 003.436 6.563l11.794 8.174a7.984 7.984 0 009.055.029l11.5-7.866a7.983 7.983 0 003.479-6.592v-19.146a7.984 7.984 0 00-3.479-6.592l-11.5-7.866a7.985 7.985 0 00-9.055.03z"
+        />
+        <Path
+          fill="#fff"
+          d="M4853.915 2818.384l-12.6-8.616-12.883 8.929v19.674l12.883 8.929 12.6-8.616v-5.469l-7.823-4.68 7.823-4.68zm-13.688 7.285v5.73l7.813 4.675-6.707 4.585-7.434-5.152v-13.942l7.434-5.152 6.707 4.585z"
+        />
       </G>
     ),
     viewBox: '0 0 70 70',
   },
   Logo2: {
     svg: (
       <G>
-      <Defs>
-        <LinearGradient id="a" x1=".092" x2=".916" y1=".818" y2=".182" gradientUnits="objectBoundingBox">
-          <Stop offset='0' stopColor="#0067ff"/>
-          <Stop offset='0.174' stopColor="#006fff"/>
-          <Stop offset="0.449" stopColor="#0085ff"/>
-          <Stop offset="0.789" stopColor="#0af"/>
-          <Stop offset="0.896" stopColor="#00b8ff"/>
-        </LinearGradient>
+        <Defs>
+          <LinearGradient
+            id="a"
+            x1=".092"
+            x2=".916"
+            y1=".818"
+            y2=".182"
+            gradientUnits="objectBoundingBox">
+            <Stop offset="0" stopColor="#0067ff" />
+            <Stop offset="0.174" stopColor="#006fff" />
+            <Stop offset="0.449" stopColor="#0085ff" />
+            <Stop offset="0.789" stopColor="#0af" />
+            <Stop offset="0.896" stopColor="#00b8ff" />
+          </LinearGradient>
         </Defs>
-      <G transform="translate(-4807.928 -2795.29)">
-        <Circle cx="33.243" cy="33.243" r="33.243" fill="#fff" transform="translate(4807.928 2795.29)"/>
-        <Path fill="url(#a)" d="M5005.907 2901.72l-11.794 8.174a7.985 7.985 0 00-3.436 6.563v18.529a7.986 7.986 0 003.436 6.563l11.794 8.174a7.984 7.984 0 009.055.029l11.5-7.866a7.983 7.983 0 003.479-6.592v-19.146a7.984 7.984 0 00-3.479-6.592l-11.5-7.866a7.985 7.985 0 00-9.055.03z" transform="translate(-169.14 -97.187)"/>
-        <Path fill="#fff" d="M4853.915 2818.384l-12.6-8.616-12.883 8.929v19.674l12.883 8.929 12.6-8.616v-5.469l-7.823-4.68 7.823-4.68zm-13.688 7.285v5.73l7.813 4.675-6.707 4.585-7.434-5.152v-13.942l7.434-5.152 6.707 4.585z"/>
-      </G>
+        <G transform="translate(-4807.928 -2795.29)">
+          <Circle
+            cx="33.243"
+            cy="33.243"
+            r="33.243"
+            fill="#fff"
+            transform="translate(4807.928 2795.29)"
+          />
+          <Path
+            fill="url(#a)"
+            d="M5005.907 2901.72l-11.794 8.174a7.985 7.985 0 00-3.436 6.563v18.529a7.986 7.986 0 003.436 6.563l11.794 8.174a7.984 7.984 0 009.055.029l11.5-7.866a7.983 7.983 0 003.479-6.592v-19.146a7.984 7.984 0 00-3.479-6.592l-11.5-7.866a7.985 7.985 0 00-9.055.03z"
+            transform="translate(-169.14 -97.187)"
+          />
+          <Path
+            fill="#fff"
+            d="M4853.915 2818.384l-12.6-8.616-12.883 8.929v19.674l12.883 8.929 12.6-8.616v-5.469l-7.823-4.68 7.823-4.68zm-13.688 7.285v5.73l7.813 4.675-6.707 4.585-7.434-5.152v-13.942l7.434-5.152 6.707 4.585z"
+          />
+        </G>
       </G>
     ),
     viewBox: '0 0 70 70',
   },
   Wifi: {
     svg: (
       <G>
-        <Path d="M105.621 21.939a1.267 1.267 0 00-.139-.168 74.346 74.346 0 00-105.139 0 1.162 1.162 0 000 1.646l7.689 7.686a1.16 1.16 0 001.641 0 61.082 61.082 0 0186.484 0 1.16 1.16 0 001.641 0l7.688-7.686a1.165 1.165 0 00.139-1.477zm0 0"/>
-        <Path d="M52.912 20.33a53.649 53.649 0 00-38.18 15.84 1.16 1.16 0 000 1.641l7.664 7.662a1.16 1.16 0 001.641 0 40.787 40.787 0 0157.746 0 1.162 1.162 0 001.643 0l7.664-7.662a1.16 1.16 0 000-1.641 53.651 53.651 0 00-38.178-15.84zm0 0"/>
-        <Path d="M52.909 40.659a33.457 33.457 0 00-23.811 9.881 1.165 1.165 0 000 1.641l7.662 7.662a1.165 1.165 0 001.645 0 20.486 20.486 0 0129.01 0 1.16 1.16 0 001.641 0l7.664-7.662a1.16 1.16 0 000-1.641 33.457 33.457 0 00-23.811-9.881zm0 0M52.911 62.2a11.665 11.665 0 00-8.307 3.439 1.159 1.159 0 000 1.643l7.484 7.486a1.162 1.162 0 001.643 0l7.484-7.486a1.159 1.159 0 000-1.643 11.66 11.66 0 00-8.3-3.439zm0 0"/>
+        <Path d="M105.621 21.939a1.267 1.267 0 00-.139-.168 74.346 74.346 0 00-105.139 0 1.162 1.162 0 000 1.646l7.689 7.686a1.16 1.16 0 001.641 0 61.082 61.082 0 0186.484 0 1.16 1.16 0 001.641 0l7.688-7.686a1.165 1.165 0 00.139-1.477zm0 0" />
+        <Path d="M52.912 20.33a53.649 53.649 0 00-38.18 15.84 1.16 1.16 0 000 1.641l7.664 7.662a1.16 1.16 0 001.641 0 40.787 40.787 0 0157.746 0 1.162 1.162 0 001.643 0l7.664-7.662a1.16 1.16 0 000-1.641 53.651 53.651 0 00-38.178-15.84zm0 0" />
+        <Path d="M52.909 40.659a33.457 33.457 0 00-23.811 9.881 1.165 1.165 0 000 1.641l7.662 7.662a1.165 1.165 0 001.645 0 20.486 20.486 0 0129.01 0 1.16 1.16 0 001.641 0l7.664-7.662a1.16 1.16 0 000-1.641 33.457 33.457 0 00-23.811-9.881zm0 0M52.911 62.2a11.665 11.665 0 00-8.307 3.439 1.159 1.159 0 000 1.643l7.484 7.486a1.162 1.162 0 001.643 0l7.484-7.486a1.159 1.159 0 000-1.643 11.66 11.66 0 00-8.3-3.439zm0 0" />
       </G>
     ),
     viewBox: '0 0 120 120',
   },
+  QrMarker: {
+    svg: (
+      <G>
+        <Path fill="#0076ff" d="M32.35 279.09H13.21A13.23 13.23 0 010 265.87v-19.13h6v19.13a7.22 7.22 0 007.21 7.22h19.14zM265.86 279.09h-19.13v-6h19.13a7.23 7.23 0 007.22-7.22v-19.13h6v19.13a13.23 13.23 0 01-13.22 13.22zM279.08 32.35h-6V13.22A7.23 7.23 0 00265.86 6h-19.13V0h19.13a13.23 13.23 0 0113.22 13.22zM6 32.35H0V13.22A13.23 13.23 0 0113.21 0h19.14v6H13.21A7.22 7.22 0 006 13.22z"/>
+      </G>
+    ),
+    viewBox: '0 0 280 280',
+  },
 };
diff --git a/components/Ble.js b/components/Ble.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import {BleManager} from 'react-native-ble-plx';
-
 import {
   Text,
   View,
@@ -10,6 +9,7 @@ import {
   TouchableHighlight,
   Image,
 } from 'react-native';
+
 import Icon from './Icon';
 
 const styles = StyleSheet.create({
@@ -128,7 +128,7 @@ class Ble extends React.Component {
         });
       }
     });
-  }
+  };
 
   ButtonClickCheckFunction = () => () => {
     Alert.alert('Scanning..');
@@ -149,7 +149,7 @@ class Ble extends React.Component {
             <TouchableOpacity
               style={styles.SubmitButtonStyle}
               activeOpacity={0.5}
-              onPress={this.scan()}>
+              onPress={this.ButtonClickCheckFunction()}>
               <Text style={styles.TextStyle}> Scan for Beacons </Text>
             </TouchableOpacity>
           </View>

diff --git a/components/QR.js b/components/QR.js
@@ -1,57 +1,73 @@
 import React from 'react';
-import {Text, View, Linking, StyleSheet, TouchableOpacity} from 'react-native';
+import {Text, View, Linking, StyleSheet} from 'react-native';
 import QRCodeScanner from 'react-native-qrcode-scanner';
+import Icon from './Icon';
 
 const styles = StyleSheet.create({
-  centerText: {
-    flex: 1,
-    fontSize: 18,
-    padding: 32,
-    color: '#777',
+  topArea: {
+    height: 375,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+  },
+  Instructions: {
+    paddingBottom: 40,
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: -60,
   },
-  textBold: {
-    fontWeight: '500',
-    color: '#000',
+  SmallText: {
+    color: '#CFCFCF',
+    fontSize: 15,
+    fontWeight: '700',
+    paddingTop: 6,
+    paddingBottom: 20,
   },
-  buttonText: {
-    fontSize: 21,
-    color: 'rgb(0,122,255)',
+  BigText: {
+    color: '#4A4A4A',
+    fontSize: 18,
+    fontWeight: '800',
   },
-  buttonTouchable: {
-    padding: 16,
+  container: {},
+  camera: {
+    height: 220,
+    width: 220,
+    display: 'flex',
+    alignItems: 'center',
+    alignSelf: 'center',
   },
 });
+
 class QR extends React.Component {
   onSuccess = e => {
-    Linking.openURL(e.data).catch(err =>
-      console.error('An error occured', err),
-    );
+    // Linking.openURL(e.data).catch(err =>
+    //   console.error('An error occured', err),
+    // );
+    alert(e.data);
   };
 
   render() {
     return (
-      <View style={{display: "flex", alignItems: "center", marginTop: -420}}>
-        <Text style={{color: '#4A4A4A', fontSize: 18, fontWeight: '800'}}>
-          Place the QR code inside the area
-        </Text>
-        <Text style={{color: '#CFCFCF', fontSize: 15, fontWeight: '700', paddingTop: 6}}>
-          Scanning will start automatically
-        </Text>
-        <QRCodeScanner
-          onRead={this.onSuccess}
-          topContent={
-            <Text style={styles.centerText}>
-              Go to{' '}
-              <Text style={styles.textBold}>wikipedia.org/wiki/QR_code</Text> on
-              your computer and scan the QR code.
-            </Text>
-          }
-          bottomContent={
-            <TouchableOpacity style={styles.buttonTouchable}>
-              <Text style={styles.buttonText}>OK. Got it!</Text>
-            </TouchableOpacity>
-          }
-        />
+      <View style={styles.Container}>
+        <View style={styles.Instructions}>
+          <Text style={styles.BigText}>Place the QR code inside the area</Text>
+          <Text style={styles.SmallText}>
+            Scanning will start automatically
+          </Text>
+        </View>
+        <View style={styles.topArea}>
+          <QRCodeScanner
+            onRead={this.onSuccess}
+            showMarker
+            cameraStyle={styles.camera}
+            customMarker={
+              <View style={styles.container}>
+                <Icon fill="#0076FF" name="QrMarker" height="280" width="280" />
+              </View>
+            }
+          />
+        </View>
       </View>
     );
   }

diff --git a/images/qrmarker.svg b/images/qrmarker.svg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		connection.project.dir=..
		eclipse.preferences.version=1