Arjun Patel
59a3bc7e7d
- properly importing fonts with assets folders - properly getting material icons with react-native-vector-icons - figuring out how messages with display - fixing keyboard bringing up other Views - function for getting user input into TextInput
84 lines
1.8 KiB
JavaScript
84 lines
1.8 KiB
JavaScript
/*
|
|
* Home screen with logo and connect button
|
|
*/
|
|
import React, { Component } from 'react';
|
|
import {
|
|
Dimensions,
|
|
View,
|
|
ImageBackground,
|
|
Text,
|
|
TouchableOpacity,
|
|
Permissions,
|
|
AsyncStorage
|
|
} from 'react-native';
|
|
import {
|
|
Actions
|
|
} from 'react-native-router-flux';
|
|
import { Fonts } from '../utils/Fonts.js';
|
|
|
|
const windowWidth = Dimensions.get('window').width;
|
|
const windowHeight = Dimensions.get('window').height;
|
|
const backgroundLink = '../assets/images/homeBg.jpg';
|
|
|
|
type Props = {};
|
|
export default class Home extends Component<Props> {
|
|
connect() {
|
|
Actions.loading();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={homeStyles.container}>
|
|
<ImageBackground style={homeStyles.bg} source={require(backgroundLink)} >
|
|
<View>
|
|
<Text style={homeStyles.logo}>Nexto</Text>
|
|
<Text style={homeStyles.motto}>spontaneous connection</Text>
|
|
</View>
|
|
|
|
<TouchableOpacity style={homeStyles.connect} onPress={this.connect.bind(this)}>
|
|
<Text style={homeStyles.connectTxt}>Connect</Text>
|
|
</TouchableOpacity>
|
|
</ImageBackground>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const homeStyles = {
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#0e8f9e',
|
|
},
|
|
bg: {
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-around',
|
|
alignItems: 'center',
|
|
width: windowWidth,
|
|
height: windowHeight
|
|
},
|
|
logo: {
|
|
color: 'grey',
|
|
fontSize: 50,
|
|
textAlign: 'center',
|
|
zIndex: 100,
|
|
fontFamily: Fonts.Sunflower
|
|
},
|
|
motto: {
|
|
color: '#0e8f9e',
|
|
fontSize: 18,
|
|
fontFamily: Fonts.Sunflower
|
|
},
|
|
connect: {
|
|
backgroundColor: '#0e8f9e',
|
|
padding: 15,
|
|
width: windowWidth - 100,
|
|
justifyContent: 'flex-end',
|
|
},
|
|
connectTxt: {
|
|
textAlign: 'center',
|
|
color: 'white',
|
|
fontSize: 25
|
|
}
|
|
}
|