146 lines
3.3 KiB
JavaScript
146 lines
3.3 KiB
JavaScript
/*
|
|
* Menu with few options
|
|
*/
|
|
import React, { Component } from 'react';
|
|
import {
|
|
Dimensions,
|
|
View,
|
|
Text,
|
|
ImageBackground,
|
|
TouchableOpacity,
|
|
StyleSheet
|
|
} from 'react-native';
|
|
import {
|
|
Actions
|
|
} from 'react-native-router-flux';
|
|
import Icon from 'react-native-vector-icons/MaterialIcons';
|
|
|
|
const windowWidth = Dimensions.get('window').width;
|
|
const windowHeight = Dimensions.get('window').height;
|
|
|
|
const backgroundLink = '../../assets/images/homeBg.jpg';
|
|
|
|
type Props = {};
|
|
export default class Menu extends Component<Props> {
|
|
render() {
|
|
const { refreshConnection, refreshAvatar, disconnect, avatar } = this.props;
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<ImageBackground
|
|
style={styles.header}
|
|
source={{uri: avatar}}>
|
|
<View style={styles.overlay}>
|
|
<Text style={styles.hdrTxt}>Menu</Text>
|
|
</View>
|
|
</ImageBackground>
|
|
|
|
<View style={styles.main}>
|
|
<TouchableOpacity onPress={refreshConnection}>
|
|
<View style={styles.option}>
|
|
<Icon
|
|
name='track-changes'
|
|
style={styles.icons}
|
|
/>
|
|
<Text style={styles.optTxt}>Refresh Connection</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity onPress={refreshAvatar}>
|
|
<View style={styles.option}>
|
|
<Icon
|
|
name='refresh'
|
|
style={[styles.icons, styles.refresh]}
|
|
/>
|
|
<Text style={styles.optTxt}>Change Avatar</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity onPress={disconnect}>
|
|
<View style={styles.option}>
|
|
<Icon
|
|
name='exit-to-app'
|
|
style={[styles.icons, styles.disconnect]}
|
|
/>
|
|
<Text style={styles.optTxt}>Disconnect</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={styles.copyrightCont}>
|
|
<Text style={styles.copyrightTxt}>© Nexto</Text>
|
|
<Text style={styles.copyrightTxtExtra}>2018.</Text>
|
|
</View>
|
|
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = {
|
|
container: {
|
|
flex: 14,
|
|
backgroundColor: 'white'
|
|
},
|
|
header: {
|
|
flex: 3
|
|
},
|
|
overlay: {
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor:'rgba(0,0,0,0.5)'
|
|
},
|
|
hdrTxt: {
|
|
color: 'white',
|
|
fontSize: 30
|
|
},
|
|
main: {
|
|
flex: 10,
|
|
flexDirection: 'column',
|
|
justifyContent: 'flex-start'
|
|
},
|
|
option: {
|
|
flex: 0,
|
|
flexBasis: 3,
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
alignItems: 'center',
|
|
paddingTop: 25,
|
|
paddingBottom: 25
|
|
},
|
|
icons: {
|
|
fontSize: 20,
|
|
color: '#0e8f9e',
|
|
padding: 10
|
|
},
|
|
refresh: {
|
|
color: 'green'
|
|
},
|
|
disconnect: {
|
|
color: 'red'
|
|
},
|
|
optTxt: {
|
|
fontSize: 15,
|
|
fontWeight: 'bold',
|
|
color: 'black',
|
|
textAlign: 'left',
|
|
padding: 10
|
|
},
|
|
copyrightCont: {
|
|
flex: 1,
|
|
backgroundColor: '#202021',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: 10
|
|
},
|
|
copyrightTxt: {
|
|
color: '#0e8f9e'
|
|
},
|
|
copyrightTxtExtra: {
|
|
fontSize: 10,
|
|
color: '#0e8f9e'
|
|
}
|
|
}
|