Currency App

Home.js

import React, { Component } from 'react';
import { Text, View, TextInput, Dimensions, TouchableOpacity } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
import { connect } from 'react-redux';
import LinearGradient from 'react-native-linear-gradient';


import { Header } from '../components/Header';

const { width, height } = Dimensions.get('screen');

class Home extends Component {
	render() {
		return (
			<View style={styles.container}>
				<Header onPress={() => console.warn("object") } />
				<LinearGradient start={{x: -1, y: 3}} end={{x: 0, y: 0}} colors={['#FF4C4A', '#FF4C4A']} style={styles.top}>
					<Text style={styles.currencyName}>Euro</Text>
					<TextInput style={styles.currInput} value="€1.00" />
					<Text style={styles.currencyShort}>EUR</Text>
				</LinearGradient>
				<TouchableOpacity style={styles.divider}>
					<Text style={styles.dividerText}>+</Text>
				</TouchableOpacity>
				<View style={styles.bottom}>
					<Text style={[styles.currencyName, styles.currencyName2]}>USD</Text>
					<TextInput style={[styles.currInput, styles.currInput2]} value="$1.00" />
					<Text style={[styles.currencyShort, styles.currencyShort2]}>United States Dollar</Text>
				</View>
			</View>
		)
	}
}


const styles = EStyleSheet.create({
	container: {
		flex: 1,
	},
	top: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'space-around',
		paddingBottom: 50,
	},
	bottom: {
		flex: 1,
		marginTop: -70,
		alignItems: 'center',
		justifyContent: 'space-around',
	},
	currencyName: {
		fontSize: 23,
		color: "white"
	},
	currInput: {
		fontSize: 35,
		color: "white"
	},
	currencyShort: {
		color: "#D2D3D8"
	},
	currInput2: {
		color: '$primaryRed'
	},
	currencyName2: {
		color: "$primaryRed"
		
	},
	currencyShort2: {
		color: "$primaryRed"
		
	},
	divider: {
		backgroundColor: 'white',
		borderRadius: 100,
		position: 'relative',
		top: -50,
		left: width / 2 - 50,
		height: 100, width: 100,
		borderColor: '#FF4C4A',
		borderWidth: 2,
		alignItems: 'center',
		justifyContent: 'center',
	},
	dividerText: {
		fontSize: 50,
		color: '$primaryRed'
	}
});


const mapStateToProps = (state) => {
	console.warn("state", state)
	return {
		primaryColor: state.theme.primaryColor
	}
}

export default connect(mapStateToProps)(Home);