Calendário Detail Layout

This commit is contained in:
João Borges 2019-03-11 01:30:37 +00:00
parent c8389af216
commit 64813d3b17
16 changed files with 1892 additions and 1511 deletions

View File

@ -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')

View File

@ -1,27 +1,30 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.app">
package="com.app">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="AIzaSyAwM2Q3T62uh6BPDXcFPqdjXy8F7SI0WH4"/>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
</application>
</manifest>

View File

@ -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<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MapsPackage(),
new RNDeviceInfo(),
new RNMaterialShadowsPackage(),
new LinearGradientPackage(),

View File

@ -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'

View File

@ -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 (
<View>
<Text>cenas da vida</Text>
</View>
);
}
if (!this.props.logged && this.props.onHold) {
if (!this.state.isConnected) {
return (
<View>
<Text>cenas da vida</Text>
</View>
);
}
if (!this.props.logged && this.props.onHold) {
return (
<View style={UtilStyles.containerLoading}>
<ActivityIndicator size="large" color="red"/>
</View>
)
}
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 (
<View style={styles.slide2}>
<Modal isVisible={this.props.UI_loginScannerActive}>
<View style={{ flex: 1 , backgroundColor:'white'}}>
<Button onPress={this.props.closeLoginQRScan} title={"Fechar scanner"}> </Button>
<QRCodeScanner
onRead={this.onSuccess}
cameraStyle={ styles.cameraContainer}
/>
</View>
</Modal>
<View style={{ width:'100%',
justifyContent: 'center',
alignItems: 'center',}}>
<Image style={styles.logo2} source={require('./assets/img/logo2.png')}/>
</View>
<View styles={styles.loginContainer}>
<View style={styles.slide2}>
<Modal isVisible={this.props.UI_loginScannerActive}>
<View style={{flex: 1, backgroundColor: 'white'}}>
<Button onPress={this.props.closeLoginQRScan} title={"Fechar scanner"}> </Button>
<View style={styles.inputSection}>
<TextInput
style={styles.input}
placeholder={this.state.username}
onChangeText={(searchString) => {this.setState({searchString})}}
maxLength={15}
underlineColorAndroid="transparent"
/>
<TouchableOpacity onPress={this._scanQr}>
<View style={styles.scanQR}>
<Icon style={styles.searchIcon} name="ios-qr-scanner" size={30} color="#000"/>
<Text>Scan QR</Text>
</View>
</TouchableOpacity>
</View>
<TextInput style={styles.passwordInput}
onFocus={this._print}
maxLength={10}
blurOnSubmit ={true}
secureTextEntry={true}
onChangeText={(text) => this.setState({text})}
clearButtonMode='always'
value={this.state.text}
clearTextOnFocus={true}
onSubmitEditing={Keyboard.dismiss}
placeholder='Password' />
<RkButton rkType='dark' style={styles.loginBtn} onPress={this._tryLogin}>Entrar</RkButton>
<QRCodeScanner
cameraProps={{captureAudio: false}}
onRead={this.onSuccess}
cameraStyle={styles.cameraContainer}
/>
</View>
</Modal>
<View style={{
width: '100%',
justifyContent: 'center',
alignItems: 'center',
}}>
<Image style={styles.logo2} source={require('./assets/img/logo2.png')}/>
</View>
<View style={ styles.buttons }>
<TouchableOpacity
style={styles.button}>
<Icon name="logo-facebook" size={40}/>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}>
<Icon name="logo-instagram" size={40}/>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}>
<Icon name="md-heart" size={40}/>
</TouchableOpacity>
</View>
<View style={styles.footer}>
<View style={styles.textRow}>
<RkText rkType='primary3'>Não sabes a password?</RkText>
<RkButton rkType='clear' onPress={this.onSignUpButtonPressed}>
<TouchableOpacity>
<RkText style={{color:'red'}} kType='header6'>Recuperar Password</RkText>
</TouchableOpacity>
</RkButton>
</View>
</View>
</View>
);
<View styles={styles.loginContainer}>
<View style={styles.inputSection}>
<TextInput
style={styles.input}
placeholder={this.state.username}
onChangeText={(searchString) => {
this.setState({searchString})
}}
maxLength={15}
underlineColorAndroid="transparent"
/>
<TouchableOpacity onPress={this._scanQr}>
<View style={styles.scanQR}>
<Icon style={styles.searchIcon} name="ios-qr-scanner" size={30} color="#000"/>
<Text>Scan QR</Text>
</View>
</TouchableOpacity>
</View>
<TextInput style={styles.passwordInput}
onFocus={this._print}
maxLength={10}
blurOnSubmit={true}
secureTextEntry={true}
onChangeText={(text) => this.setState({text})}
clearButtonMode='always'
value={this.state.text}
clearTextOnFocus={true}
onSubmitEditing={Keyboard.dismiss}
placeholder='Password'/>
<RkButton rkType='dark' style={styles.loginBtn} onPress={this._tryLogin}>Entrar</RkButton>
</View>
<View style={styles.buttons}>
<TouchableOpacity
style={styles.button}>
<Icon name="logo-facebook" size={40}/>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}>
<Icon name="logo-instagram" size={40}/>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}>
<Icon name="md-heart" size={40}/>
</TouchableOpacity>
</View>
<View style={styles.footer}>
<View style={styles.textRow}>
<RkText rkType='primary3'>Não sabes a password?</RkText>
<RkButton rkType='clear' onPress={this.onSignUpButtonPressed}>
<TouchableOpacity>
<RkText style={{color: 'red'}} kType='header6'>Recuperar Password</RkText>
</TouchableOpacity>
</RkButton>
</View>
</View>
</View>
);
}
}
}
@ -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,
}

View File

@ -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: <HeaderBackButton onPress={() => 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}) => (
<Image style={{width:30, height:30}}source={require('./assets/img/logo2.png')}></Image>
<Image style={{width: 30, height: 30}} source={require('./assets/img/logo2.png')}></Image>
)
},
},
@ -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: (
<TouchableOpacity style={{marginRight: 20, flex:1, flexDirection:'row'}} onPress={() => navigation.navigate('Profile')}>
<TouchableOpacity style={{marginRight: 20, flex: 1, flexDirection: 'row'}}
onPress={() => navigation.navigate('Profile')}>
<Text>editar</Text>
<IconFA name="user-edit" size={22}/>
</TouchableOpacity>
)
}
}
else if(navigation.state.routes[index].routeName == 'Calendário'){
else if (navigation.state.routes[index].routeName == 'Calendário') {
return {
headerTitle: 'Calendário',
headerRight: (
<View style={{flex:1, flexDirection:'row'}}>
<TouchableOpacity style={{marginRight: 20, flex:1, flexDirection:'row'}} onPress={() => navigation.navigate('Edit')}>
<Text>FAQ</Text>
</TouchableOpacity>
<View style={{flex: 1, flexDirection: 'row'}}>
<TouchableOpacity style={{marginRight: 20, flex: 1, flexDirection: 'row'}}
onPress={() => navigation.navigate('Edit')}>
<Text>FAQ</Text>
</TouchableOpacity>
<TouchableOpacity style={{marginRight: 20, flex: 1, flexDirection: 'row'}}
onPress={() => navigation.navigate('choosePath')}>
<Text>Escolher</Text>
<IconFA name="user-edit" size={22}/>
</TouchableOpacity></View>
<TouchableOpacity style={{marginRight: 20, flex:1, flexDirection:'row'}} onPress={() => navigation.navigate('choosePath')}>
<Text>Escolher</Text>
<IconFA name="user-edit" size={22}/>
</TouchableOpacity></View>
)
}
}
else if(navigation.state.routes[index].routeName == 'choosePath'){
}
else if (navigation.state.routes[index].routeName == 'choosePath') {
return {
headerTitle: 'Calendário',
headerRight: (
<View style={{flex:1, flexDirection:'row'}}>
<TouchableOpacity style={{marginRight: 20, flex:1, flexDirection:'row'}} onPress={() => navigation.navigate('Edit')}>
<Text>FAQ</Text>
</TouchableOpacity>
<View style={{flex: 1, flexDirection: 'row'}}>
<TouchableOpacity style={{marginRight: 20, flex: 1, flexDirection: 'row'}}
onPress={() => navigation.navigate('Edit')}>
<Text>FAQ</Text>
</TouchableOpacity>
<TouchableOpacity style={{marginRight: 20, flex: 1, flexDirection: 'row'}}
onPress={() => navigation.navigate('choosePath')}>
<Text>Escolher</Text>
<IconFA name="user-edit" size={22}/>
</TouchableOpacity></View>
<TouchableOpacity style={{marginRight: 20, flex:1, flexDirection:'row'}} onPress={() => navigation.navigate('choosePath')}>
<Text>Escolher</Text>
<IconFA name="user-edit" size={22}/>
</TouchableOpacity></View>
)
}
}
}
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,
},
{

99
App/app/components/Nav.js Normal file
View File

@ -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 (
<View>
<View style={styles.container}>
<View style={styles.leftRow}>
<Icon
size={24}
name="arrow-back"
type="material-icon"
onPress={() => navigation.goBack(null)}
color= '#000'
iconStyle={styles.icon}
underlayColor="transparent"
underlineColorAndroid="transparent"
containerStyle={styles.iconContainer}
hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
/>
</View>
<View style={styles.centerRow}>
<Text style={styles.titleText} numberOfLines={1}>
{title}
</Text>
</View>
<View style={styles.rightRow}>
</View>
</View>
</View>
)
}
}
export default Nav

View File

@ -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 {
</ScrollView>
)
);
const SecondRoute = () => (
<ScrollView contentContainerStyle={styles.contentContainer}>

File diff suppressed because it is too large Load Diff

View File

@ -1,121 +1,174 @@
import React from 'react';
import { View, Image, Vibration, Dimensions,Text ,Button ,TouchableOpacity } from 'react-native';
import {View, Image, Vibration, Dimensions, Text, Button, TouchableOpacity, ActivityIndicator} from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';
import {UtilStyles} from '../assets/styles'
import CodeInput from 'react-native-confirmation-code-input';
import Modal from "react-native-modal";
import {TabView, TabBar, SceneMap} from 'react-native-tab-view';
import {
RkButton,
RkTheme, RkText
} from 'react-native-ui-kitten';
import {RkButton,
RkTheme , RkText} from 'react-native-ui-kitten';
import IconMI from "react-native-vector-icons/MaterialIcons"
const SCREEN_HEIGHT = Dimensions.get("window").height;
const SCREEN_WIDTH = Dimensions.get("window").width;
const SCREEN_HEIGHT = Dimensions.get("window").height;
const SCREEN_WIDTH = Dimensions.get("window").width;
export default class Scan extends React.Component {
_toggleModal = () =>
this.setState({ isModalVisible: !this.state.isModalVisible });
this.setState({isModalVisible: !this.state.isModalVisible});
_activate=()=>{
_activate = () => {
this.setState({ isModalVisible: !this.state.isModalVisible ,reactivate:true});
this.setState({isModalVisible: !this.state.isModalVisible, reactivate: true});
this.scanner.reactivate();
}
onSuccess = (e) => {
this.setState({ isModalVisible: !this.state.isModalVisible ,isActive:false});
this.setState({code:e.data});
};
this.setState({isModalVisible: !this.state.isModalVisible, isActive: false});
this.setState({code: e.data});
};
state = {
isActive:true,
isRender: true,
reactivate:false,
isModalVisible: false,
code:''
}
componentDidMount() {
state = {
isActive: true,
isRender: true,
reactivate: false,
isModalVisible: false,
code: '',
index: 0,
routes: [
{key: 'scan', title: 'Scan', icon: ''},
{key: 'history', title: 'Histórico', icon: 'history'},
{key: 'fav', title: 'Favoritos', icon: 'favorite'},
],
};
componentDidMount() {
this.props.navigation.addListener('willFocus', (route) => {
this.setState({ isRender: true })
this.setState({isRender: true})
});
this.props.navigation.addListener('willBlur', (route) => {
this.setState({ isRender: false })
this.setState({isRender: false})
});
}
render() {
{
}
return (
render() {
<View style={{flex: 1}}>
{ this.state.isRender &&
<QRCodeScanner
/*Screen SCAN*/
const scanScreen = () => (
<QRCodeScanner
showMarker
ref={(node) => { this.scanner = node }}
ref={(node) => {
this.scanner = node
}}
reactivate={false}
cameraProps={{captureAudio: false}}
onRead={this.onSuccess.bind(this)}
showMarker={true}
cameraStyle={{ height: SCREEN_HEIGHT }}
cameraStyle={{height: SCREEN_HEIGHT}}
fadeIn={true}
customMarker={
<View style={{ flex: 1 }}>
<Modal isVisible={this.state.isModalVisible} style={{backgroundColor:'#E8E8E8', borderRadius:30, height:100}}>
<View style={{ flex: 1 }}>
<Text></Text>
<Text> Qr code data: {this.state.code}</Text>
<Button onPress={this._activate} title="Close" color="#841584" accessibilityLabel="Learn more about this purple button"/>
</View>
</Modal>
</View>
<View style={{flex: 1}}>
<Modal isVisible={this.state.isModalVisible}
style={{backgroundColor: '#E8E8E8', borderRadius: 30, height: 100}}>
<View style={{flex: 1}}>
<Text></Text>
<Text> Qr code data: {this.state.code}</Text>
<Button onPress={this._activate} title="Close" color="#841584"
accessibilityLabel="Learn more about this purple button"/>
</View>
</Modal>
</View>
}
/>
}
</View>
)}
return (
<View style={{ flex: 1 }}>
<TouchableOpacity onPress={this._toggleModal}>
<Text>Show Modal</Text>
</TouchableOpacity>
<Modal isVisible={this.state.isModalVisible}>
<View style={{ flex: 1 }}>
<Text>Hello!</Text>
<TouchableOpacity onPress={this._toggleModal}>
<Text>Hide me!</Text>
</TouchableOpacity>
</View>
</Modal>
/>
);
const historyScreen = () => (
<View style={{backgroundColor: '#ff4081'}}>
</View>
);
}
);
const favScreen = () => (
<View style={{backgroundColor: '#a95'}}>
</View>
);
_renderLazyPlaceholder = () => {
return (
<ActivityIndicator size="large" color="red" />
);
};
{
return (
<View style={{flex: 1}}>
{this.state.isRender &&
<TabView
lazy
navigationState={this.state}
renderScene={SceneMap({
scan: scanScreen,
history: historyScreen,
fav: favScreen,
})}
renderLazyPlaceholder={this._renderLazyPlaceholder}
onIndexChange={(index) => this.setState({index})}
initialLayout={{width: SCREEN_WIDTH, height: SCREEN_HEIGHT}}
renderIcon={({route}) => (
<IconMI
name={route.icon}
size={15}
color={'white'}
/>
)}
/>
}
</View>
)
}
return (
<View style={{flex: 1}}>
<TouchableOpacity onPress={this._toggleModal}>
<Text>Show Modal</Text>
</TouchableOpacity>
<Modal isVisible={this.state.isModalVisible}>
<View style={{flex: 1}}>
<Text>Hello!</Text>
<TouchableOpacity onPress={this._toggleModal}>
<Text>Hide me!</Text>
</TouchableOpacity>
</View>
</Modal>
</View>
);
}
}
RkTheme.setType('RkButton', 'dark', {
container: {
paddingTop:10,
backgroundColor: 'gray',
borderRadius: 90,
paddingTop: 10,
backgroundColor: 'gray',