580 lines
18 KiB
JavaScript
580 lines
18 KiB
JavaScript
|
/**
|
||
|
|
* Sample React Native App
|
||
|
|
* https://github.com/facebook/react-native
|
||
|
|
*
|
||
|
|
* @format
|
||
|
|
* @flow
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
import React, {Component} from 'react';
|
||
|
|
import {Platform, StyleSheet,Alert,FlatList, Text, View,TouchableOpacity,Linking} from 'react-native';
|
||
|
|
import ActionButton from 'react-native-action-button';
|
||
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
||
|
|
import {responsiveFontSize,responsiveHeight,responsiveWidth} from 'react-native-responsive-dimensions';
|
||
|
|
import HeaderMenu from './HeaderMenu';
|
||
|
|
import {historiques as histo,first,useraccount,notification,configurations} from './../../route.json';
|
||
|
|
import {primary,primaryDarkAdvanced} from './../../utils/theme.json';
|
||
|
|
import {readUser,disconnect} from './../../webservice/AuthApi';
|
||
|
|
import I18n from 'react-native-i18n'
|
||
|
|
const route=require("./../../route.json")
|
||
|
|
require('./../../utils/Translations')
|
||
|
|
var DBEvents = require('react-native-db-models').DBEvents
|
||
|
|
type Props = {};
|
||
|
|
let theme=require('./../../utils/theme.json')
|
||
|
|
import Button from 'apsl-react-native-button'
|
||
|
|
import {IlinkEmitter} from "./../../utils/events"
|
||
|
|
import { DrawerItems, SafeAreaView } from 'react-navigation';
|
||
|
|
import DeviceInfo from "react-native-device-info"
|
||
|
|
import AppContainer, {AppNavigator} from "../../App";
|
||
|
|
import Configuration from "../../webservice/persistences/Configuration";
|
||
|
|
import { ScrollView } from 'react-native-gesture-handler';
|
||
|
|
|
||
|
|
export default class OptionsMenu extends Component<Props> {
|
||
|
|
|
||
|
|
static navigatorStyle = {
|
||
|
|
statusBarColor: primaryDarkAdvanced,
|
||
|
|
};
|
||
|
|
commandeListe
|
||
|
|
constructor(props){
|
||
|
|
super(props);
|
||
|
|
this.state=this.initState();
|
||
|
|
IlinkEmitter.on("menuLink", this.onMenuNavigationEvent.bind(this))
|
||
|
|
IlinkEmitter.on("userconnect", this.onUserConnect.bind(this))
|
||
|
|
IlinkEmitter.on("userdisconnect", this.hideSideMenu.bind(this))
|
||
|
|
IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
|
||
|
|
this.configuration=new Configuration();
|
||
|
|
}
|
||
|
|
|
||
|
|
retrieveAndroidInformation() {
|
||
|
|
this.configuration._getData().then((lang)=>{
|
||
|
|
if(lang){
|
||
|
|
I18n.locale=lang
|
||
|
|
readUser().then((result) => {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.updateUser(result);
|
||
|
|
}, 3000)})
|
||
|
|
}else{
|
||
|
|
let code= DeviceInfo.getDeviceLocale();
|
||
|
|
I18n.locale=code.toLowerCase()
|
||
|
|
readUser().then((result) => {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.updateUser(result);
|
||
|
|
}, 3000)
|
||
|
|
}).catch((e) => {
|
||
|
|
this.props.navigation.navigate("Auth")
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}).catch((e)=>{
|
||
|
|
let code=DeviceInfo.getDeviceLocale()
|
||
|
|
I18n.locale=code.toLowerCase()
|
||
|
|
readUser().then((result) => {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.updateUser(result);
|
||
|
|
}, 3000)
|
||
|
|
}).catch((e) => {
|
||
|
|
this.props.navigation.navigate("Auth")
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
return ""
|
||
|
|
}
|
||
|
|
componentDidMount() {
|
||
|
|
const items=this.props.navigation.router.childRouters.sta.childRouters;
|
||
|
|
// items.filter((item)=>item.)
|
||
|
|
this.setState({items:items})
|
||
|
|
this.retrieveAndroidInformation()
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
updateLangue(){
|
||
|
|
this.setState({lang:"change"})
|
||
|
|
this.forceUpdate()
|
||
|
|
}
|
||
|
|
componentWillUnmount() {
|
||
|
|
|
||
|
|
}
|
||
|
|
onMenuNavigationEvent(menuOption){
|
||
|
|
/* Navigation.mergeOptions(this.props.componentId,{
|
||
|
|
sideMenu: {
|
||
|
|
left: {
|
||
|
|
visible: false,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
switch (menuOption){
|
||
|
|
case "home":{
|
||
|
|
this.setState({currentId:0})
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case "userInfo":{
|
||
|
|
this.setState({currentId:1})
|
||
|
|
}
|
||
|
|
}*/
|
||
|
|
}
|
||
|
|
onUserConnect() {
|
||
|
|
readUser().then((user) => {
|
||
|
|
if (user !== null && user !== undefined) {
|
||
|
|
this.updateUser(user);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
onNavigatorEvent(event) {
|
||
|
|
|
||
|
|
}
|
||
|
|
hideSideMenu() {
|
||
|
|
/* Navigation.mergeOptions("drawer", {
|
||
|
|
sideMenu: {
|
||
|
|
left: {
|
||
|
|
visible: false,
|
||
|
|
enabled:false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});*/
|
||
|
|
}
|
||
|
|
initState(){
|
||
|
|
return {
|
||
|
|
user:null,
|
||
|
|
menu:[],
|
||
|
|
currentId:0,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getGeolocatedUserMenu(){
|
||
|
|
return [
|
||
|
|
{title:I18n.t('MAP'),id:0,key:0,icon:'md-map',active:true}
|
||
|
|
,{title:I18n.t('MY_ACCOUNT'),id:1,key:1,icon:'md-person',active:false}
|
||
|
|
,{title:I18n.t('CREDIT_MANAGE'),id:2,key:2,icon:'md-card',active:false}
|
||
|
|
,{title:I18n.t('ADD_NETWORK'),id:11,key:11,icon:'md-people',active:false}
|
||
|
|
, {title:I18n.t('CHANGE_INFORMATION'),id:13,key:13,icon:'md-person',active:false}
|
||
|
|
,{title:I18n.t('NOTIFICATIONS'),id:3,key:3,icon:'md-notifications',active:false}
|
||
|
|
,{title:I18n.t('CONFIGURATIONS'),id:4,icon:'md-settings',active:false}]
|
||
|
|
}
|
||
|
|
getSuperUserMenu(){
|
||
|
|
return [
|
||
|
|
{title:I18n.t('MAP'),id:0,key:0,icon:'md-map',active:true}
|
||
|
|
,{title:I18n.t('MY_ACCOUNT'),id:1,key:1,icon:'md-person',active:false}
|
||
|
|
,{title:I18n.t('CREDIT_MANAGE'),id:2,key:2,icon:'md-card',active:false}
|
||
|
|
,{title:I18n.t('GROUP_MANAGE'),id:5,key:5,icon:'md-people',active:false}
|
||
|
|
,{title:I18n.t('NOTIFICATIONS'),id:3,key:3,icon:'md-notifications',active:false}
|
||
|
|
,{title:I18n.t('CONFIGURATIONS'),id:4,icon:'md-settings',active:false}]
|
||
|
|
}
|
||
|
|
getHyperUsermenu() {
|
||
|
|
return [
|
||
|
|
{title:I18n.t('MAP'),id:0,key:0,icon:'md-map',active:true}
|
||
|
|
,{title:I18n.t('MY_ACCOUNT'),id:1,key:1,icon:'md-person',active:false}
|
||
|
|
,{title:I18n.t('CREDIT_MANAGE'),id:2,key:2,icon:'md-card',active:false}
|
||
|
|
,{title:I18n.t('GROUP_MANAGE'),id:5,key:5,icon:'md-people',active:false}
|
||
|
|
,{title:I18n.t('NOTIFICATIONS'),id:3,key:3,icon:'md-notifications',active:false}
|
||
|
|
,{title:I18n.t('CONFIGURATIONS'),id:4,icon:'md-settings',active:false}]
|
||
|
|
}
|
||
|
|
updateUser(user){
|
||
|
|
let menu=[];
|
||
|
|
if(user!==undefined) {
|
||
|
|
/* Navigation.mergeOptions("drawer", {
|
||
|
|
sideMenu: {
|
||
|
|
left: {
|
||
|
|
visible: false,
|
||
|
|
enabled:true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});*/
|
||
|
|
if(user.category!==undefined) {
|
||
|
|
switch(user.category){
|
||
|
|
case "geolocated":
|
||
|
|
menu=this.getGeolocatedUserMenu();
|
||
|
|
break;
|
||
|
|
case "super":
|
||
|
|
menu = this.getSuperUserMenu();
|
||
|
|
break;
|
||
|
|
case "hyper":
|
||
|
|
menu=this.getHyperUsermenu();
|
||
|
|
break;
|
||
|
|
|
||
|
|
}
|
||
|
|
}else
|
||
|
|
{
|
||
|
|
menu = this.getUserMenu();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
this.setState({user: user, menu: menu});
|
||
|
|
}
|
||
|
|
getUserMenu(){
|
||
|
|
return [
|
||
|
|
{title:I18n.t('MAP'),id:0,key:0,icon:'md-map',active:true}
|
||
|
|
,{title:I18n.t('MY_ACCOUNT'),id:1,key:1,icon:'md-person',active:false}
|
||
|
|
,{title:I18n.t('NOTIFICATIONS'),id:3,key:3,icon:'md-notifications',active:false}
|
||
|
|
,{title:I18n.t('CONFIGURATIONS'),id:4,icon:'md-settings',active:false}]
|
||
|
|
}
|
||
|
|
_renderItem = (item) =>{
|
||
|
|
if(item==="creditrequest" || item==='historyItemDetails' || item==='filter' || item==='networks'){
|
||
|
|
return null
|
||
|
|
}else{
|
||
|
|
const color= this.state.currentId===item.id?theme.accent:"grey"
|
||
|
|
return (
|
||
|
|
<TouchableOpacity onPress={() => {
|
||
|
|
this.props.navigation.toggleDrawer();
|
||
|
|
this.setState({currentId:item.id})
|
||
|
|
this.props.navigation.navigate(item)}}
|
||
|
|
>
|
||
|
|
<View
|
||
|
|
style={items.content}
|
||
|
|
>
|
||
|
|
<Icon
|
||
|
|
name={this.getIcon(item)}
|
||
|
|
size={32}
|
||
|
|
/>
|
||
|
|
<Text style={{
|
||
|
|
marginLeft:20,
|
||
|
|
fontSize:16,
|
||
|
|
}}>{this.getNameItems(item)}
|
||
|
|
</Text>
|
||
|
|
</View></TouchableOpacity>)}};
|
||
|
|
_onPress=((item)=>{
|
||
|
|
|
||
|
|
this.setState({currentId:item.id})
|
||
|
|
let current=this.state.menu.filter((item)=>{return item.active})[0]
|
||
|
|
current.active=false;
|
||
|
|
item.active=true;
|
||
|
|
let newMenu=[];
|
||
|
|
this.state.menu.forEach(function (it) {
|
||
|
|
if(it.id===current.id)newMenu.push(current)
|
||
|
|
else if(it.id===item.id)newMenu.push(item)
|
||
|
|
else newMenu.push(it)
|
||
|
|
}
|
||
|
|
)
|
||
|
|
this.setState({menu:newMenu})
|
||
|
|
/* switch(item.id){
|
||
|
|
case 2:
|
||
|
|
Navigation.push(route.stackRoot,{
|
||
|
|
component: {
|
||
|
|
name: histo,
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
topBar: {
|
||
|
|
title: {
|
||
|
|
text: I18n.t('CREDIT_MANAGE')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
case 0:
|
||
|
|
Navigation.popToRoot(route.stackRoot)
|
||
|
|
IlinkEmitter.emit("menuLink","home");
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
Navigation.push(route.stackRoot,{
|
||
|
|
component: {
|
||
|
|
name:useraccount,
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
sideMenu:{
|
||
|
|
visibility:false
|
||
|
|
},
|
||
|
|
topBar: {
|
||
|
|
title: {
|
||
|
|
text:I18n.t('MY_ACCOUNT')
|
||
|
|
},
|
||
|
|
hideOnScroll: true,
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
IlinkEmitter.emit("menuLink","userInfo");
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
Navigation.push(route.stackRoot,{
|
||
|
|
component: {
|
||
|
|
name:notification,
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
topBar: {
|
||
|
|
title: {
|
||
|
|
text:I18n.t('NOTIFICATION')
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
IlinkEmitter.emit("menuLink","notification");
|
||
|
|
|
||
|
|
break;
|
||
|
|
case 4:
|
||
|
|
Navigation.push(route.stackRoot,{
|
||
|
|
component: {
|
||
|
|
name:configurations,
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
topBar: {
|
||
|
|
title: {
|
||
|
|
text:I18n.t('CONFIGURATIONS')
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
IlinkEmitter.emit("menuLink","config");
|
||
|
|
break;
|
||
|
|
case 5:
|
||
|
|
Navigation.push(route.stackRoot,{
|
||
|
|
component: {
|
||
|
|
name:route.superviseurgroup,
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
topBar: {
|
||
|
|
title: {
|
||
|
|
text:I18n.t('GROUP_MANAGE')
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
IlinkEmitter.emit("menuLink","manage_group");
|
||
|
|
|
||
|
|
break;
|
||
|
|
case 7: Navigation.push(route.stackRoot,{
|
||
|
|
component: {
|
||
|
|
name:route.credrequester,
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
topBar: {
|
||
|
|
visible:false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
case 11:
|
||
|
|
Navigation.push(route.stackRoot,{
|
||
|
|
component: {
|
||
|
|
name:route.addNetwork,
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
topBar: {
|
||
|
|
visible:false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
case 12:
|
||
|
|
Navigation.push(route.stackRoot,{
|
||
|
|
component: {
|
||
|
|
name:route.generateNetwork,
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
topBar: {
|
||
|
|
visible:false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
case 13:
|
||
|
|
Navigation.push(route.stackRoot,{
|
||
|
|
component: {
|
||
|
|
name:route.updateinfo,
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
topBar: {
|
||
|
|
visible:false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Navigation.mergeOptions(this.props.componentId,{
|
||
|
|
sideMenu: {
|
||
|
|
left: {
|
||
|
|
visible: false,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
*/ });
|
||
|
|
getNameItems(item){
|
||
|
|
|
||
|
|
let icon=item
|
||
|
|
switch (item) {
|
||
|
|
case "home":icon=I18n.t('MAP')
|
||
|
|
break
|
||
|
|
case 'useraccount':icon=I18n.t('MY_ACCOUNT')
|
||
|
|
break
|
||
|
|
case 'Historique':icon=I18n.t('CREDIT_MANAGE')
|
||
|
|
break
|
||
|
|
case "superviseurgroup":icon=I18n.t('GROUP_MANAGE')
|
||
|
|
break
|
||
|
|
case "updateinformation":icon=I18n.t("CHANGE_INFORMATION")
|
||
|
|
break
|
||
|
|
case 'notificationview':icon=I18n.t('NOTIFICATIONS')
|
||
|
|
break
|
||
|
|
case 'configuration':icon=I18n.t('CONFIGURATIONS')
|
||
|
|
break;
|
||
|
|
case 'addNetwork':icon=I18n.t('ADD_NETWORK')
|
||
|
|
break
|
||
|
|
case 'about':icon=I18n.t('ABOUT_')
|
||
|
|
}
|
||
|
|
return icon;
|
||
|
|
}
|
||
|
|
getIcon(item){
|
||
|
|
let icon="md-map"
|
||
|
|
switch (item) {
|
||
|
|
case "home":icon="md-map"
|
||
|
|
break
|
||
|
|
case 'useraccount':icon="md-person"
|
||
|
|
break
|
||
|
|
case 'Historique':icon="md-card"
|
||
|
|
break
|
||
|
|
case "superviseurgroup":icon="md-people"
|
||
|
|
break
|
||
|
|
case 'notificationview':icon="md-notifications";
|
||
|
|
break
|
||
|
|
case "updateinformation":icon="md-people"
|
||
|
|
break
|
||
|
|
case 'configuration':icon='md-settings'
|
||
|
|
break;
|
||
|
|
case 'addNetwork':icon="md-people"
|
||
|
|
break
|
||
|
|
case 'about':icon='md-contacts';
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return icon;
|
||
|
|
}
|
||
|
|
render () {
|
||
|
|
var name=this.state.user?this.state.user.firstname:"";
|
||
|
|
const surname=this.state.user? this.state.user.lastname:"";
|
||
|
|
if(!this.state.lang && this.state.lang!=="change")
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
<View
|
||
|
|
style={styles.headercontent}
|
||
|
|
>
|
||
|
|
<Text style={styles.headerTitle}>{name}</Text>
|
||
|
|
<Text style={styles.headerTitle}>{surname}</Text>
|
||
|
|
<Text style={styles.headerPhone}>{this.state.user?""+this.state.user.phone:""}</Text>
|
||
|
|
</View>
|
||
|
|
<ScrollView style={{flex:1,height:responsiveHeight(40)
|
||
|
|
}} >
|
||
|
|
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
|
||
|
|
{
|
||
|
|
this.state.items && Object.keys(this.state.items).map((item,key)=>{
|
||
|
|
return this._renderItem(item)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</SafeAreaView>
|
||
|
|
</ScrollView>
|
||
|
|
<Button
|
||
|
|
textStyle={styles.btntext}
|
||
|
|
style={styles.btnDeconnect}
|
||
|
|
onPress={()=>this.userDeconnect()}
|
||
|
|
>{I18n.t('DISCONNEXION')}</Button>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
else {
|
||
|
|
setTimeout(() => this.setState({lang: ""}), 500)
|
||
|
|
return (<View/>)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
userDeconnect(){
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t('DISCONNEXION'),
|
||
|
|
I18n.t('DISCONNEXION_TEXT'),
|
||
|
|
[
|
||
|
|
{},
|
||
|
|
{text: I18n.t('NO'), onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
|
||
|
|
{text: I18n.t('YES'), onPress: () =>{
|
||
|
|
disconnect().then(()=>{
|
||
|
|
IlinkEmitter.emit("userdisconnect");
|
||
|
|
this.props.navigation.navigate("Auth")
|
||
|
|
})
|
||
|
|
}},
|
||
|
|
],
|
||
|
|
{ cancelable: false }
|
||
|
|
)
|
||
|
|
}
|
||
|
|
watchUser() {
|
||
|
|
readUser().then((user)=> {
|
||
|
|
if(user.id!==this.state.user.id) {
|
||
|
|
if (user !== null && user !== undefined) {
|
||
|
|
this.updateUser(user);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const items=StyleSheet.create({
|
||
|
|
content:{
|
||
|
|
width:responsiveWidth(100),
|
||
|
|
height:50,
|
||
|
|
paddingLeft: 20,
|
||
|
|
flexDirection:'row',
|
||
|
|
alignItems:'center'
|
||
|
|
},
|
||
|
|
itemText:{
|
||
|
|
color:'#000000',
|
||
|
|
marginLeft:20,
|
||
|
|
fontSize:responsiveFontSize(2),
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
backgroundColor:"white",
|
||
|
|
},
|
||
|
|
btnDeconnect:{
|
||
|
|
borderColor:"transparent",
|
||
|
|
marginLeft:20,
|
||
|
|
marginRight:20,
|
||
|
|
backgroundColor:theme.accent
|
||
|
|
},
|
||
|
|
btntext:{
|
||
|
|
color:"white",
|
||
|
|
fontSize:17,
|
||
|
|
fontWeight:"bold"
|
||
|
|
},
|
||
|
|
headerTitle:{
|
||
|
|
fontSize:14,
|
||
|
|
marginBottom:5,
|
||
|
|
color:"white",
|
||
|
|
fontWeight: 'bold',
|
||
|
|
},
|
||
|
|
headerPhone:{
|
||
|
|
fontSize:12,
|
||
|
|
marginBottom: 20,
|
||
|
|
color:"white",
|
||
|
|
justifyContent:'flex-end'
|
||
|
|
|
||
|
|
},
|
||
|
|
listMenu: {
|
||
|
|
paddingTop: 15,
|
||
|
|
},
|
||
|
|
headercontent:{
|
||
|
|
height:responsiveHeight(30),
|
||
|
|
backgroundColor:primary,
|
||
|
|
justifyContent: 'flex-end',
|
||
|
|
alignItems: 'flex-start',
|
||
|
|
paddingLeft:20
|
||
|
|
|
||
|
|
},
|
||
|
|
backgroundd_drawer:{
|
||
|
|
backgroundColor:'#000',
|
||
|
|
},
|
||
|
|
listbackground:{
|
||
|
|
},
|
||
|
|
actionButtonIcon: {
|
||
|
|
fontSize: 20,
|
||
|
|
height: 22,
|
||
|
|
color: 'white',
|
||
|
|
},
|
||
|
|
welcome: {
|
||
|
|
fontSize: 20,
|
||
|
|
textAlign: 'center',
|
||
|
|
margin: 10,
|
||
|
|
},
|
||
|
|
instructions: {
|
||
|
|
textAlign: 'center',
|
||
|
|
color: '#333333',
|
||
|
|
marginBottom: 5,
|
||
|
|
},
|
||
|
|
});
|