fix some stylings

js/components/DetailComponent.js

@@ -6,16 +6,23 @@ import {View, Text, StyleSheet} from "react-native";
 const styles = StyleSheet.create({
  container: {
  flex: 1,
- justifyContent: "center",
- alignItems: "center",
- backgroundColor: "#F5FCFF",
+ alignItems: 'center',
+ backgroundColor: 'white',
+ marginTop: 10,
+ },
+ textLayout: {
+ padding: 10,
+ padding: 10,
+ backgroundColor: '#FFFFFF'
  },
 });
 
 const DetailComponent = (props) => {
  return (
  <View style={styles.container}>
- <Text>{props.item}</Text>
+ <Text style={styles.textLayout}>
+ {props.item}
+ </Text>
  </View>
  );
 }

js/components/InputComponent.js

@@ -16,24 +16,26 @@ class InputComponent extends Component {
  <View style={{
  flexDirection: 'row',
  justifyContent: 'space-between',
- marginTop: 20,
- marginRight: 10
+ backgroundColor: 'white',
+ paddingLeft: 10,
+ paddingRight:10,
  }}>
  <TextInput style={{
  height: 40,
- width: 200,
- paddingLeft: 10,
+ //paddingLeft: 10,
  marginLeft: 10,
+ flex: 3,
  }}
  underlineColorAndroid="blue"
  autoCapitalize={'none'}
  onChangeText={(text) => this.setState({text: text})}
  placeholder={this.state.text}/>
 
- <Button
+ <Button style={{ flex: 1}}
  onPress={() => this.props.onButtonPress(this.state.text)}
  title="Search"
- accessibilityLabel="alert"/>
+ accessibilityLabel="alert"
+ />
  </View>
  );
  }

js/scenes/SearchScene.js

@@ -1,11 +1,18 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import Input from '../containers/Input';
 import ResultList from '../containers/ResultList';
 
+const styles = StyleSheet.create({
+ container: {
+ alignItems: 'center',
+ backgroundColor: '#F5FCFF',
+ },
+});
+
 const SearchScene = () => {
  return (
- <View>
+ <View style={styles.container}>
  <Input/>
  <ResultList/>
  </View>