up

App/app/assets/styles.js

@@ -1,5 +1,9 @@
 import {StyleSheet} from 'react-native';
 import {RkTheme} from 'react-native-ui-kitten'
+import { Dimensions} from 'react-native'
+
+const SCREEN_HEIGHT = Dimensions.get("window").height;
+const SCREEN_WIDTH = Dimensions.get("window").width;
 
 export const UtilStyles = StyleSheet.create({
     container: {
@@ -97,11 +101,12 @@ export const UtilStyles = StyleSheet.create({
 
 
     loginImage: {
+        marginTop:50,
         justifyContent: 'center',
         alignItems: 'center',
         alignSelf: 'center',
-        width: 80, //160/2
-        height: 74.6 // 149.2/2
+        width: 150, //160/2
+        height: 150
     },
 
     //------------------//

App/app/screens/Login.js

@@ -1,5 +1,5 @@
 import React, {Component, Fragment} from 'react'
-import {View, Image, Vibration, Dimensions} from 'react-native'
+import {View, Image, Vibration, Dimensions,Text ,Button} from 'react-native'
 import Icon from "react-native-vector-icons/Ionicons";
 import {UtilStyles} from '../assets/styles'
 
@@ -12,6 +12,11 @@ import QRCodeScanner from 'react-native-qrcode-scanner';
 const SCREEN_HEIGHT = Dimensions.get("window").height;
 const SCREEN_WIDTH = Dimensions.get("window").width;
 
+
+import {RkButton,
+    RkTheme , RkText} from 'react-native-ui-kitten';
+
+
 export default class Login extends Component {
 
     static  navigationOptions = {
@@ -24,9 +29,10 @@ export default class Login extends Component {
 
 
     onSuccess = (e) => {
+
         console.log(e.data)
 
-
+        
 
     };
 
@@ -34,26 +40,26 @@ export default class Login extends Component {
         return (
             <QRCodeScanner
                 showMarker
+                captureAudio={false}
+                reactivate={true}
                 onRead={this.onSuccess.bind(this)}
                 cameraStyle={{ height: SCREEN_HEIGHT }}
+                
                 customMarker={
                     <View style={styles.rectangleContainer}>
-                            <View style={styles.topOverlay}>
-                                <Image style={UtilStyles.loginImage}
+                        <View style={styles.logo}>
+                        <Image style={UtilStyles.loginImage}
                                        source={require('../assets/img/logo.png')}
                                 />
                         </View>
+                          
 
                         <View style={{ flexDirection: "row" }}>
                             <View style={styles.leftAndRightOverlay}>
                             </View>
 
-                            <View style={styles.rectangle}>
-                                <Icon
-                                    name="ios-qr-scanner"
-                                    size={SCREEN_WIDTH}
-                                    color={"#fff"}
-                                />
+                                <View style={styles.rectangle}>
+                               
                             </View>
 
 
@@ -62,6 +68,13 @@ export default class Login extends Component {
                         </View>
 
                         <View style={styles.bottomOverlay}>
+                        
+                            <View style={{flex:1, alignItems: 'center', alignContent: 'center'}}>
+                                
+                                <RkText rkType='primary' style={styles.recover}>Recuperar pin de acesso</RkText>
+                                <RkButton rkType='dark' style={styles.manual}>Instruções</RkButton>
+                            </View>
+            
                         </View>
                     </View>
                 }
@@ -71,20 +84,50 @@ export default class Login extends Component {
 }
 
 
+RkTheme.setType('RkButton', 'dark', {
+    container: {
+        paddingTop:10,
+       backgroundColor: 'gray',
+       
+       borderRadius: 90,
+    }
+  });
+
 
 const rectDimensions = SCREEN_WIDTH * 0.85; // this is equivalent to 255 from a 393 device width
 
-const overlayColor = 'rgba(0,0,0,0.85)';
+const overlayColor = 'rgba(0,0,0,0.30)';
 
 const styles = {
+ 
+    recover:{
+        paddingTop:10,
+        color: "red",
+        paddingBottom:10
+    },
+    manual:{
+        paddingTop:10,
+        
+
+    },
+    
+    logo:{
+
+        height:SCREEN_HEIGHT*0.35,
+        width:SCREEN_WIDTH,
+        backgroundColor: overlayColor,
+    },
     rectangleContainer: {
+       
         flex: 1,
         alignItems: "center",
         justifyContent: "center",
-        backgroundColor: "transparent"
+        backgroundColor: "transparent",
+     
     },
 
     rectangle: {
+     
         height: rectDimensions,
         width: rectDimensions,
         alignItems: "center",
@@ -94,8 +137,6 @@ const styles = {
 
     topOverlay: {
         flex: 1,
-        height: SCREEN_HEIGHT,
-        width: SCREEN_WIDTH,
         backgroundColor: overlayColor,
         justifyContent: "center",
         alignItems: "center"
@@ -106,7 +147,7 @@ const styles = {
         height: SCREEN_HEIGHT,
         width: SCREEN_WIDTH,
         backgroundColor: overlayColor,
-        paddingBottom: SCREEN_WIDTH * 0.25
+        paddingBottom: SCREEN_WIDTH * 0.2
     },
 
     leftAndRightOverlay: {