From 64813d3b17a9d236b668dc0116650d8d8c264ece Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Borges?= Date: Mon, 11 Mar 2019 01:30:37 +0000 Subject: [PATCH] =?UTF-8?q?Calend=C3=A1rio=20Detail=20Layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App/android/app/build.gradle | 1 + App/android/app/src/main/AndroidManifest.xml | 39 +- .../main/java/com/app/MainApplication.java | 2 + App/android/settings.gradle | 4 + App/app/App.js | 564 ++++---- App/app/Router.js | 108 +- App/app/components/Nav.js | 99 ++ App/app/screens/Calendar.js | 8 +- App/app/screens/Jogo.js | 1205 ++++++++--------- App/app/screens/Scan.js | 233 ++-- App/app/screens/calendarDetail.js | 391 ++++-- App/app/store/actions/api.js | 716 +++++----- App/app/store/reducers/api.js | 4 +- App/ios/app.xcodeproj/project.pbxproj | 19 + App/package-lock.json | 9 +- App/package.json | 1 + 16 files changed, 1892 insertions(+), 1511 deletions(-) create mode 100644 App/app/components/Nav.js diff --git a/App/android/app/build.gradle b/App/android/app/build.gradle index 2b2f7adc..ec49a2d4 100755 --- a/App/android/app/build.gradle +++ b/App/android/app/build.gradle @@ -149,6 +149,7 @@ android { } dependencies { + compile project(':react-native-maps') compile project(':react-native-device-info') compile project(':react-native-material-shadows') compile project(':react-native-linear-gradient') diff --git a/App/android/app/src/main/AndroidManifest.xml b/App/android/app/src/main/AndroidManifest.xml index 94c48efd..46057b3b 100755 --- a/App/android/app/src/main/AndroidManifest.xml +++ b/App/android/app/src/main/AndroidManifest.xml @@ -1,27 +1,30 @@ + package="com.app"> - + - - - - - - - + android:name=".MainApplication" + android:label="@string/app_name" + android:icon="@mipmap/ic_launcher" + android:allowBackup="false" + android:theme="@style/AppTheme"> + + + + + + + + diff --git a/App/android/app/src/main/java/com/app/MainApplication.java b/App/android/app/src/main/java/com/app/MainApplication.java index 8b11f16a..23ca3771 100755 --- a/App/android/app/src/main/java/com/app/MainApplication.java +++ b/App/android/app/src/main/java/com/app/MainApplication.java @@ -3,6 +3,7 @@ package com.app; import android.app.Application; import com.facebook.react.ReactApplication; +import com.airbnb.android.react.maps.MapsPackage; import com.learnium.RNDeviceInfo.RNDeviceInfo; import ui.materialshadows.RNMaterialShadowsPackage; import com.BV.LinearGradient.LinearGradientPackage; @@ -29,6 +30,7 @@ public class MainApplication extends Application implements ReactApplication { protected List getPackages() { return Arrays.asList( new MainReactPackage(), + new MapsPackage(), new RNDeviceInfo(), new RNMaterialShadowsPackage(), new LinearGradientPackage(), diff --git a/App/android/settings.gradle b/App/android/settings.gradle index 7c9cafb3..8dc9c679 100755 --- a/App/android/settings.gradle +++ b/App/android/settings.gradle @@ -1,4 +1,6 @@ rootProject.name = 'app' +include ':react-native-maps' +project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android') include ':react-native-device-info' project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android') include ':react-native-material-shadows' @@ -11,5 +13,7 @@ include ':react-native-vector-icons' project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') include ':react-native-gesture-handler' project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android') +include ':react-native-maps' +project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android') include ':app' diff --git a/App/app/App.js b/App/app/App.js index b4f401ee..a2be73cc 100755 --- a/App/app/App.js +++ b/App/app/App.js @@ -1,14 +1,14 @@ import React, {Component} from 'react'; import { - Platform, - StyleSheet, - Text, - View, - StatusBar, - Dimensions, - Image, - ActivityIndicator, - Button, + Platform, + StyleSheet, + Text, + View, + StatusBar, + Dimensions, + Image, + ActivityIndicator, + Button, TouchableHighlight, Keyboard, ImageBackground, @@ -26,7 +26,7 @@ import {connect} from 'react-redux'; import QRCodeScanner from 'react-native-qrcode-scanner'; import {UtilStyles} from './assets/styles' -import * as Actions from './store/actions'; +import * as Actions from './store/actions'; import {RkButton, RkTheme, RkText, RkTextInput} from 'react-native-ui-kitten'; @@ -40,43 +40,43 @@ const SCREEN_HEIGHT = Dimensions.get("window").height; const SCREEN_WIDTH = Dimensions.get("window").width; import Swiper from 'react-native-swiper'; + var TimerMixin = require('react-timer-mixin'); function handleConnectivityChange() { - console.log("asdasd"); - } - -class App extends Component { - handleConnectivityChange = isConnected => { - this.setState({ isConnected }); - } - _activate=()=>{ + console.log("asdasd"); +} - this.setState({ isModalVisible: !this.state.isModalVisible}); +class App extends Component { + handleConnectivityChange = isConnected => { + this.setState({isConnected}); + } + _activate = () => { + + this.setState({isModalVisible: !this.state.isModalVisible}); this.scanner.reactivate(); } - _scanQr=()=>{ + _scanQr = () => { this.props.openScannerLogin() console.log(this.props.UI_loginScannerActive) } - _tryLogin=()=>{ - + _tryLogin = () => { + //console.log(this.state.text) //this.scanner.reactivate(); this.props.login(this.state.username, this.state.text); - - - - } + + + } _toggleModal = () => - this.setState({ isModalVisible: !this.state.isModalVisible }); + this.setState({isModalVisible: !this.state.isModalVisible}); constructor(props) { super(props); - + this.state = { token: {valid: false}, @@ -84,95 +84,98 @@ class App extends Component { onHold: true, logged: false, isModalVisible: false, - state : {text: ''}, - username:'QR code', + state: {text: ''}, + username: 'QR code', failedAttempt: false, - push:4, - UI_loginScannerActive:false, - userDetails:{username:'', password:''}, - isConnected: true + push: 4, + UI_loginScannerActive: false, + userDetails: {username: '', password: ''}, + isConnected: true }; } - _print=()=>{ - console.log("hello") - this.setState({push:0}) - } - checkValue=(e)=>{ - console.log("check"+e) - } - _handleConnectionChange = (isConnected) => { - this.props.connectionState(true); - }; - + _print = () => { + console.log("hello") + this.setState({push: 0}) + }; + + checkValue = (e) => { + console.log("check" + e) + }; + + _handleConnectionChange = (isConnected) => { + this.props.connectionState(true); + }; + + componentDidMount() { - this.props.hold(); - NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange); + this.props.hold(); + NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange); this.setState({isModalVisible: false}) //verifica se o utilizador tem token guardado this.props.checkUser(this.props.userDetails); this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow); this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide); - + } - componentWillUnmount() { - NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange); - } - - _keyboardDidShow () { - //alert('Keyboard Shown'); - // this.setState({push:0}) - } - - _keyboardDidHide () { + componentWillUnmount() { + NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange); + } + + _keyboardDidShow() { + //alert('Keyboard Shown'); + // this.setState({push:0}) + + } + + _keyboardDidHide() { //this.setState({push:4}) - } + } + onSuccess = (e) => { // this.setState({ isModalVisible: !this.state.isModalVisible }); // this.props.login(e.data, 'f8908cc0'); this.props.closeLoginQRScan(); - this.setState({username:e.data}) + this.setState({username: e.data}) console.log("QR code lido"); - }; render() { - if (!this.state.isConnected) { - return ( - - cenas da vida - - ); - } - if (!this.props.logged && this.props.onHold) { + if (!this.state.isConnected) { + return ( + + cenas da vida + + ); + } + if (!this.props.logged && this.props.onHold) { return ( - + ) } - else - { + else { - // console.log('token... '+ this.props.logged) + // console.log('token... '+ this.props.logged) //se existir token - if (this.props.logged ) { + if (this.props.logged) { return ( @@ -180,116 +183,111 @@ class App extends Component { ) } return ( - - - - - - - - - - - - - - - - - + + + + - - - - {this.setState({searchString})}} - maxLength={15} - underlineColorAndroid="transparent" - /> - - - - - - Scan QR - - - - - - - this.setState({text})} - clearButtonMode='always' - value={this.state.text} - clearTextOnFocus={true} - onSubmitEditing={Keyboard.dismiss} - placeholder='Password' /> - - Entrar + + + + + + - - - - - - - - - - - - - - - - - - - - - Não sabes a password? - - - - Recuperar Password - - - - - - - - - - ); - + + + + + + { + this.setState({searchString}) + }} + maxLength={15} + underlineColorAndroid="transparent" + /> + + + + + + Scan QR + + + + + + + this.setState({text})} + clearButtonMode='always' + value={this.state.text} + clearTextOnFocus={true} + onSubmitEditing={Keyboard.dismiss} + placeholder='Password'/> + + Entrar + + + + + + + + + + + + + + + + + + + + + + + Não sabes a password? + + + + Recuperar Password + + + + + + + + + + ); + } } } @@ -310,161 +308,159 @@ const rectDimensions = SCREEN_WIDTH * 0.85; // this is equivalent to 255 from a const overlayColor = 'rgba(0,0,0,0.30)'; const styles = { - cameraContainer:{ - // height: Dimensions.get('window').height , + cameraContainer: { + // height: Dimensions.get('window').height , }, - passwordInput:{ + passwordInput: { borderRadius: 90, - - borderColor:'#bfbdbd', + + borderColor: '#bfbdbd', borderWidth: 1, - marginTop:20, - marginBottom:20, - width:SCREEN_WIDTH*0.8, - + marginTop: 20, + marginBottom: 20, + width: SCREEN_WIDTH * 0.8, + backgroundColor: 'white', borderRadius: 90, - height: SCREEN_HEIGHT*0.08, - borderColor:'#bfbdbd', + height: SCREEN_HEIGHT * 0.08, + borderColor: '#bfbdbd', borderWidth: 1, - paddingLeft:SCREEN_WIDTH*0.05, - - }, - scanQRText:{ - - paddingTop:50 - // paddingTop:20, - + paddingLeft: SCREEN_WIDTH * 0.05, }, - scanQR:{ - + scanQRText: { + + paddingTop: 50 + // paddingTop:20, + + + }, + scanQR: { + //flexDirection: 'row', - paddingTop:5, - backgroundColor:10, - - width:80, - paddingLeft:10, - backgroundColor:'#f24b4b', - borderBottomRightRadius:90, - borderTopRightRadius:90, - height:'100%', - + paddingTop: 5, + backgroundColor: 10, + + width: 80, + paddingLeft: 10, + backgroundColor: '#f24b4b', + borderBottomRightRadius: 90, + borderTopRightRadius: 90, + height: '100%', + }, inputSection: { - + flexDirection: 'row', backgroundColor: '#fff', - + backgroundColor: 'white', borderRadius: 90, - height: SCREEN_HEIGHT*0.08, - borderColor:'#bfbdbd', + height: SCREEN_HEIGHT * 0.08, + borderColor: '#bfbdbd', borderWidth: 1, - + }, searchIcon: { - paddingLeft:10 + paddingLeft: 10 }, input: { - - - + + flex: 1, paddingRight: 10, - - + + paddingLeft: 0, - paddingLeft:SCREEN_WIDTH*0.05, + paddingLeft: SCREEN_WIDTH * 0.05, color: '#424242', - + }, - textRow:{ - marginBottom:40 + textRow: { + marginBottom: 40 }, - loginContainer:{ + loginContainer: { width: '100%', height: '30%', justifyContent: 'center', alignItems: 'center' }, - loginBtn:{ - marginTop:10, - marginBottom:20, - marginLeft: '25%', - + loginBtn: { + marginTop: 10, + marginBottom: 20, + marginLeft: '25%', + }, - + button: { - borderWidth:1, - borderColor:'rgba(0,0,0,0.2)', - alignItems:'center', - justifyContent:'center', - width:60, - height:60, - backgroundColor:'#fff', - borderRadius:100, - marginRight: 10, - marginLeft:10 - }, + borderWidth: 1, + borderColor: 'rgba(0,0,0,0.2)', + alignItems: 'center', + justifyContent: 'center', + width: 60, + height: 60, + backgroundColor: '#fff', + borderRadius: 100, + marginRight: 10, + marginLeft: 10 + }, footer: {}, buttons: { flexDirection: 'row', marginBottom: 24, marginHorizontal: 24, - marginTop:24, + marginTop: 24, justifyContent: 'space-around', - - - }, - logoContainer:{ - - width:'100%', - - justifyContent: 'center', - alignItems: 'center', - marginTop:200 }, - logo2:{ - - // flex: 1, - // resizeMode: 'contain', + logoContainer: { + + width: '100%', + + justifyContent: 'center', + alignItems: 'center', + marginTop: 200 + + }, + + logo2: { + + // flex: 1, + // resizeMode: 'contain', width: 200, height: 200, }, - wrapper: { - }, + wrapper: {}, slide1: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: 'white', + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'white', }, slide2: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: 'white', + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'white', }, slide3: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - color:'black', - backgroundColor: 'white', + flex: 1, + justifyContent: 'center', + alignItems: 'center', + color: 'black', + backgroundColor: 'white', }, text: { - color: '#fff', - fontSize: 30, - fontWeight: 'bold', + color: '#fff', + fontSize: 30, + fontWeight: 'bold', }, recover: { paddingTop: 10, @@ -520,19 +516,19 @@ const styles = { }; RkTheme.setType('RkTextInput', 'frame', { input: { - backgroundColor: 'white', - marginLeft: 0, - marginHorizontal: 0, - borderRadius: 5 + backgroundColor: 'white', + marginLeft: 0, + marginHorizontal: 0, + borderRadius: 5 }, color: 'gray', backgroundColor: 'gray', borderRadius: 10, container: { - paddingHorizontal: 20 + paddingHorizontal: 20 } - }); - +}); + mapStateToProps = (state, props) => { return { @@ -540,7 +536,7 @@ mapStateToProps = (state, props) => { loggedIn: state.apiReducer.loggedIn, onHold: state.apiReducer.onHold, logged: state.apiReducer.logged, - failedAttempt:state.apiReducer.failedAttempt, + failedAttempt: state.apiReducer.failedAttempt, UI_loginScannerActive: state.uiReducer.UI_loginScannerActive, userDetails: state.apiReducer.userDetails, } diff --git a/App/app/Router.js b/App/app/Router.js index 74783cfe..cdd6d7c8 100755 --- a/App/app/Router.js +++ b/App/app/Router.js @@ -3,16 +3,23 @@ import { TouchableOpacity, Text, View, - Image + Image, + } from 'react-native'; import { createStackNavigator, createAppContainer, createSwitchNavigator, - createBottomTabNavigator + createBottomTabNavigator, + HeaderBackButton } from 'react-navigation'; import * as Screens from './screens'; +/*Icons*/ +import Icon from "react-native-vector-icons/Ionicons" +import IconF from "react-native-vector-icons/Foundation" +import IconFA from "react-native-vector-icons/FontAwesome5" + import AuthLoadingScreen from './screens/AuthLoading' @@ -25,17 +32,18 @@ import Calendar from './screens/Calendar' import Home from './screens/Home' - -/*Icons*/ -import Icon from "react-native-vector-icons/Ionicons" -import IconF from "react-native-vector-icons/Foundation" -import IconFA from "react-native-vector-icons/FontAwesome5" import Profile from "./screens/Profile"; import editCalendar from './screens/editCalendar'; import choosePath from './screens/choosePath'; import calendarDetail from './screens/calendarDetail'; +const navigationOptions = ({navigation}) => ({ + headerLeft: navigation.goBack(null)}/>, + headerStyle: {backgroundColor: 'transparent', zIndex: 100 }, + +}); + const AppStack = createBottomTabNavigator( { Calendário: { @@ -48,15 +56,15 @@ const AppStack = createBottomTabNavigator( ) }, }, - + 'Jogo do...': { screen: Jogo, navigationOptions: { tabBarIcon: ({tintColor}) => ( - - + + ) }, }, @@ -71,8 +79,8 @@ const AppStack = createBottomTabNavigator( }, }, - - Eventos: { + + Eventos: { screen: Eventos, navigationOptions: { @@ -82,7 +90,7 @@ const AppStack = createBottomTabNavigator( ) }, }, - + Home: { screen: Home, navigationOptions: { @@ -94,7 +102,6 @@ const AppStack = createBottomTabNavigator( }, - }, { initialRouteName: 'Home', @@ -120,51 +127,56 @@ const Stack = createStackNavigator({ return { headerTitle: `${navigation.state.routes[index].routeName}`, headerRight: ( - navigation.navigate('Profile')}> - + navigation.navigate('Profile')}> + editar - + ) } } - else if(navigation.state.routes[index].routeName == 'Calendário'){ + else if (navigation.state.routes[index].routeName == 'Calendário') { return { headerTitle: 'Calendário', headerRight: ( - - navigation.navigate('Edit')}> - FAQ - - + + navigation.navigate('Edit')}> + FAQ + + + + navigation.navigate('choosePath')}> + Escolher + + - navigation.navigate('choosePath')}> - Escolher - - - ) } - } - else if(navigation.state.routes[index].routeName == 'choosePath'){ + } + else if (navigation.state.routes[index].routeName == 'choosePath') { return { headerTitle: 'Calendário', headerRight: ( - - navigation.navigate('Edit')}> - FAQ - - + + navigation.navigate('Edit')}> + FAQ + + + + navigation.navigate('choosePath')}> + Escolher + + - navigation.navigate('choosePath')}> - Escolher - - - ) } - } + } else { return { header: null @@ -175,17 +187,15 @@ const Stack = createStackNavigator({ Profile: { screen: Profile }, - Edit:{ + Edit: { screen: editCalendar }, - choosePath:{ + choosePath: { screen: choosePath }, - calendarDetail:{ - screen:calendarDetail - } - - + calendarDetail: { + screen: calendarDetail, + }, }); @@ -194,7 +204,7 @@ export default createAppContainer(createSwitchNavigator( { AuthLoading: AuthLoadingScreen, App: Stack, - + }, { diff --git a/App/app/components/Nav.js b/App/app/components/Nav.js new file mode 100644 index 00000000..eb06de50 --- /dev/null +++ b/App/app/components/Nav.js @@ -0,0 +1,99 @@ +import React, { Component } from 'react' +import { StyleSheet, Text, View } from 'react-native' +import { Icon } from 'react-native-elements' + +const styles = StyleSheet.create({ + centerRow: { + alignItems: 'flex-start', + backgroundColor: 'transparent', + flex: 3, + flexDirection: 'column', + justifyContent: 'center', + }, + + container: { + backgroundColor: 'transparent', + borderBottomWidth: 0, + elevation: 0, + flexDirection: 'row', + height: 55, + justifyContent: 'center', + left: 0, + marginLeft: 10, + marginRight: 10, + //marginTop: 22, + position: 'absolute', + right: 0, + zIndex: 100, + }, + icon: { + justifyContent: 'flex-start', + marginTop: 2.8, + }, + iconContainer: { + alignSelf: 'center', + }, + leftRow: { + backgroundColor: 'transparent', + flex: 1, + flexDirection: 'row', + justifyContent: 'flex-start', + }, + rightRow: { + alignItems: 'flex-end', + backgroundColor: 'transparent', + flex: 2, + flexDirection: 'row', + justifyContent: 'flex-end', + marginRight: 4, + }, + titleText: { + color: '#000', + fontSize: 24, + fontWeight: '600', + }, + subTitleText: { + color: '#000', + fontSize: 14, + fontWeight: '400', + }, +}); + +class Nav extends Component { + + + render() { + const { navigation, title} = this.props; + + return ( + + + + navigation.goBack(null)} + color= '#000' + iconStyle={styles.icon} + underlayColor="transparent" + underlineColorAndroid="transparent" + containerStyle={styles.iconContainer} + hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }} + /> + + + + {title} + + + + + + + + ) + } +} + +export default Nav \ No newline at end of file diff --git a/App/app/screens/Calendar.js b/App/app/screens/Calendar.js index bb216504..02c8a0fe 100644 --- a/App/app/screens/Calendar.js +++ b/App/app/screens/Calendar.js @@ -21,7 +21,7 @@ const formatObj = (obj) => { let a = {}; - a.push({}) + a.push({}); return a @@ -44,7 +44,7 @@ class Calendar extends React.Component { index: 0, routes: [ {key: 'first', weekDay: 'sex', day:12}, - {key: 'second', weekDay: 'sab',day:13}, + {key: 'second', weekDay: 'sab', day:13}, {key: 'third', weekDay: 'dom', day:14}, {key: 'fourth', weekDay: 'seg', day:15}, @@ -137,7 +137,7 @@ class Calendar extends React.Component { constructor() { - super() + super(); const archeryImgSource = require('../assets/img/archery.png'); const badmintonImgSource = require('../assets/img/badminton.png'); @@ -209,7 +209,7 @@ class Calendar extends React.Component { - ) + ); const SecondRoute = () => ( diff --git a/App/app/screens/Jogo.js b/App/app/screens/Jogo.js index 6f4666ac..3dc5702b 100644 --- a/App/app/screens/Jogo.js +++ b/App/app/screens/Jogo.js @@ -1,12 +1,12 @@ import React from 'react'; -import { - StyleSheet, - Text, - View, - ImageBackground, - Dimensions, - Button, - TouchableOpacity +import { + StyleSheet, + Text, + View, + ImageBackground, + Dimensions, + Button, + TouchableOpacity } from 'react-native'; import ProgressBarAnimated from 'react-native-progress-bar-animated'; import Modal from "react-native-modal"; @@ -14,7 +14,7 @@ import Modal from "react-native-modal"; import IconF from "react-native-vector-icons/Foundation" import IconFA from "react-native-vector-icons/FontAwesome5" -import { ScrollView } from 'react-native-gesture-handler'; +import {ScrollView} from 'react-native-gesture-handler'; const SCREEN_HEIGHT = Dimensions.get("window").height; @@ -22,646 +22,609 @@ const SCREEN_WIDTH = Dimensions.get("window").width; export default class Jogo extends React.Component { -state = { - progress: 20, - progressWithOnComplete: 0, - progressCustomized: 0, - isModalVisible: false, - } ; + state = { + progress: 20, + progressWithOnComplete: 0, + progressCustomized: 0, + isModalVisible: false, + }; increase = (key, value) => { - this.setState({ - [key]: this.state[key] + value, - }); - } + this.setState({ + [key]: this.state[key] + value, + }); + } - _toggleModal = () =>{ - this.setState({ isModalVisible: !this.state.isModalVisible }); - console.log("assd") - } + _toggleModal = () => { + this.setState({isModalVisible: !this.state.isModalVisible}); + console.log("assd") + } - render() { - - const { navigate } = this.props.navigation; + render() { + + const {navigate} = this.props.navigation; - const progressCustomStyles = { - backgroundColor: 'red', - borderRadius: 0, - borderColor: 'orange', - }; + const progressCustomStyles = { + backgroundColor: 'red', + borderRadius: 0, + borderColor: 'orange', + }; - const barWidth = Dimensions.get('screen').width - 30; + const barWidth = Dimensions.get('screen').width - 30; - + return ( - return ( + + + + + Hello! + + Hide me! + + + + + + + Jogo do ENEI'19 + + + - - - - - - Hello! - - Hide me! - - + + + + + 45 + pontos + + +