Add input

This commit is contained in:
Jake Howard 2016-09-17 22:00:18 +01:00
parent 5499c1b680
commit 8ebb47f40c
Signed by: jake
GPG key ID: 57AFB45680EDD477
4 changed files with 85 additions and 13 deletions

58
src/components/Input.tsx Normal file
View file

@ -0,0 +1,58 @@
import React, { Component }from 'react';
import { TextInput, View, StyleSheet } from 'react-native';
import { BRAND_PRIMARY } from '../settings/styles';
const styles = StyleSheet.create({
inputBorder: {
borderWidth: 1,
borderColor: BRAND_PRIMARY,
borderStyle: 'solid',
borderRadius: 7,
margin: 20
} as React.ViewStyle,
input: {
height: 40,
fontSize: 14,
color: '#000',
textAlign: 'center',
} as React.TextStyle
});
interface State {
value: string
}
export default class Input extends Component<any, State> {
constructor() {
super();
this.state = {
value: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(value : string) {
this.setState({ value });
}
render() {
return (
<View style={styles.inputBorder}>
<TextInput
style={styles.input}
value={this.state.value}
onChangeText={this.handleChange}
autoCapitalize="none"
underlineColorAndroid="transparent"
returnKeyType="done"
autoCorrect={false}
blurOnSubmit
enablesReturnKeyAutomatically />
</View>
)
}
}

View file

@ -5,19 +5,24 @@ import {
Navigator, Navigator,
StyleSheet StyleSheet
} from 'react-native'; } from 'react-native';
import './types';
import Routes from './navigation/Routes'; import Routes from './navigation/Routes';
import RouteMapper from './navigation/RouteMapper'; import RouteMapper from './navigation/RouteMapper';
import './types'; import { NAVBAR_HEIGHT } from './settings/styles';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
wrapper: { container: {
flex: 1 flex: 1,
} as React.ViewStyle, } as React.ViewStyle,
navbar: { navbar: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
backgroundColor: '#888' backgroundColor: '#FFF'
} as React.ViewStyle,
wrapper: {
marginTop: NAVBAR_HEIGHT
} as React.ViewStyle } as React.ViewStyle
}); });
@ -26,16 +31,18 @@ export default class App extends Component<any, any> {
const Component = route.component; const Component = route.component;
const props = route.props || {}; const props = route.props || {};
return ( return (
<Component <View style={styles.wrapper}>
nav={nav} <Component
currentRoute={route} nav={nav}
{...props} /> currentRoute={route}
{...props} />
</View>
); );
} }
render() { render() {
return ( return (
<View style={styles.wrapper}> <View style={styles.container}>
<Navigator <Navigator
renderScene={this.renderScene} renderScene={this.renderScene}
initialRoute={Routes.main} initialRoute={Routes.main}

View file

@ -0,0 +1,5 @@
import { Platform } from 'react-native';
export const NAVBAR_HEIGHT = (Platform.OS === 'ios' ? 64 : 56);
export const BRAND_PRIMARY = '#1081DE';
export const BRAND_PRIMARY_LIGHT = '#70B1E8';

View file

@ -4,26 +4,28 @@ import {
Text, Text,
View View
} from 'react-native'; } from 'react-native';
import Input from '../components/Input';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
justifyContent: 'center', alignItems: 'stretch',
alignItems: 'center', backgroundColor: '#FFF',
backgroundColor: '#F5FCFF',
} as React.ViewStyle, } as React.ViewStyle,
text: { text: {
fontSize: 20, fontSize: 20,
textAlign: 'center', textAlign: 'center',
margin: 10, margin: 10,
} as React.TextStyle, } as React.TextStyle
}); });
export default class App extends Component<any, any> { export default class App extends Component<any, any> {
render() { render() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Input />
<Text style={styles.text}> <Text style={styles.text}>
Welcome to React Native! Welcome to React Native!
</Text> </Text>