💄

js/components/InputComponent.js

@@ -15,18 +15,26 @@ class InputComponent extends Component {
  <View style={{
  flexDirection: 'row',
  justifyContent: 'space-between',
- marginTop: 20
+ marginTop: 20,
+ marginRight: 10
  }}>
  <TextInput style={{
  height: 40,
  width: 200,
  paddingLeft: 10,
  marginLeft: 10,
  borderColor: 'gray',
- borderWidth: 1
- }} onChangeText={(text) => this.setState({text: text})} value={this.state.text}/>
+ borderWidth: 0,
+ }}
+ underlineColorAndroid="blue"
+ autoCapitalize={'none'}
+ onChangeText={(text) => this.setState({text: text})}
+ placeholder={this.state.text}/>
 
- <Button onPress={() => this.props.onButtonPress(this.state.text)} title="Press Me" accessibilityLabel="alert"/>
+ <Button
+ onPress={() => this.props.onButtonPress(this.state.text)}
+ title="Search"
+ accessibilityLabel="alert"/>
  </View>
  );
  }

js/components/ResultListComponent.js

@@ -12,7 +12,7 @@ const ResultListComponent = (props) => {
  );
  }
  return (
- <View >
+ <View>
  <ListView
  dataSource={ds.cloneWithRows(props.items)}
  renderRow={(data) => <Row obj={data}/>}
@@ -35,19 +35,9 @@ ResultListComponent.propTypes = {
 }
 
 const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'flex-start',
- backgroundColor: '#F6F6F6'
- },
- title: {
- fontSize: 20,
- textAlign: 'left',
- margin: 10
- },
  rowLayout: {
  padding: 16,
- backgroundColor: '#F6F6F6'
+ backgroundColor: '#FFFFFF'
  },
  separator: {
  flex: 1,

js/containers/ResultList.js

@@ -1,5 +1,5 @@
 import React, {PropTypes, Component} from 'react';
-import {ListView} from 'react-native';
+import {View,ListView,StyleSheet} from 'react-native';
 import {connect} from 'react-redux';
 import ResultListComponent from '../components/ResultListComponent';
 import receivePosts from '../actions';
@@ -25,13 +25,24 @@ class ResultList extends Component {
 
  render() {
  return (
+ <View>
+ <View style={styles.separator}/>
  <ResultListComponent
  items={this.state.items}
  />
+ </View>
  );
  }
 }
 
+const styles = StyleSheet.create({
+ separator: {
+ flexDirection: 'row',
+ height: 3,
+ backgroundColor: '#EEEEEE',
+ },
+});
+
 ResultList.propTypes = {
  result: PropTypes.object,
 }

js/reducers/searchResult.js

@@ -4,12 +4,11 @@ const searchResult = (state = {}, action) => {
  console.log(action.payload);
  switch (action.type) {
  case RECEIVE_POSTS:
- return Object.assign({}, state,
- {
- isFetching: true,
- items: action.payload
- }
- );
+ return {
+ ...state,
+ isFetching: true,
+ items: action.payload
+ };
 
  default:
  return state;