Landing screen

LandingScreen.js

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Dimensions } from 'react-native';
export default class Landing extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}
	
	static navigationOptions = () => {
		return {
			title: 'My APP',
			headerStyle: {
				backgroundColor: '#f4511e'
			},
			headerTintColor: '#fff',
			headerTitleStyle: {
				fontWeight: 'bold',
				flex: 1,
				textAlign: 'center',
				marginRight: 50
			}
		};
	};
	render() {
		return (
			<React.Fragment>
			
				<View style={styles.container}>
					<View style={styles.textContainer}>
						<Text style={styles.text}> Say hello to your new app </Text>
					</View>
					<View style={styles.buttonConatiner}>
						<TouchableOpacity
							style={styles.button}
							onPress={() => {
								this.props.navigation.navigate('Login');
							}}
						>
							<Text style={styles.buttonText}>Log In</Text>
						</TouchableOpacity>
						<TouchableOpacity
							style={styles.button}
							onPress={() => {
								this.props.navigation.navigate('SignUp');
							}}
						>
							<Text style={styles.buttonText}>Sign Up</Text>
						</TouchableOpacity>
					</View>
				</View>
			</React.Fragment>
		);
	}
}

const styles = {
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center'
	},
	text: {
		fontSize: 35,
		color: '#f93c22',
		textAlign: 'center'
	},
	textContainer: {
		marginBottom: 30
	},
	buttonConatiner: {},
	button: {
		backgroundColor: '#f93c22',
		marginBottom: 20,
		width: Dimensions.get('window').width / 1.3,
		height: 50,
		borderRadius: 30,
		justifyContent: 'center',
		alignItems: 'center',
		borderWidth: 2,
		borderColor: '#fff'
	},
	buttonText: {
		textAlign: 'center',
		fontSize: 16,
		color: '#fff'
	},
	iconContainer: {
		backgroundColor: '#fff',
		elevation: 3,
		height: 50,
		justifyContent: 'center'
	},
	menu: {
		color: '#f93c22',
		margin: 15
	}
};