Merge pull request #3 from tomoima525/introduce_router_flux

Introduce router flux

js/App.js

@@ -1,15 +1,13 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
-import Input from './containers/Input';
-import ResultList from './containers/ResultList';
+import Scenes from './scenes';
 
 class App extends Component {
  render() {
  return (
- <View>
- <Input/>
- <ResultList/>
- </View>
+ <View style={{ flex: 1 }}>
+ <Scenes />
+ </View>
  );
  }
 }

js/components/DetailComponent.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import {View, Text, StyleSheet} from "react-native";
+//import Button from "react-native-button";
+//import {Actions} from "react-native-router-flux";
+
+const styles = StyleSheet.create({
+ container: {
+ alignItems: 'center',
+ backgroundColor: 'white',
+ marginTop: 10,
+ },
+ textLayout: {
+ padding: 10,
+ backgroundColor: 'white',
+ },
+});
+
+const DetailComponent = (props) => {
+ return (
+ <View style={styles.container}>
+ <Text style={styles.textLayout}>
+ {props.item}
+ </Text>
+ </View>
+ );
+}
+export default DetailComponent;

js/components/InputComponent.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {View, StyleSheet, TextInput, Button} from 'react-native';
+import {View, StyleSheet, TextInput, Button, Platform } from 'react-native';
 
 class InputComponent extends Component {
 
@@ -16,24 +16,32 @@ class InputComponent extends Component {
  <View style={{
  flexDirection: 'row',
  justifyContent: 'space-between',
- marginTop: 20,
- marginRight: 10
+ backgroundColor: 'white',
+ height: 48,
+ paddingLeft: 10,
+ paddingRight: (Platform.OS === 'android' ? 10 : 0),
  }}>
  <TextInput style={{
- height: 40,
- width: 200,
- paddingLeft: 10,
+ height: 42,
  marginLeft: 10,
+ marginRight: 10,
+ flex: 3,
  }}
  underlineColorAndroid="blue"
  autoCapitalize={'none'}
  onChangeText={(text) => this.setState({text: text})}
  placeholder={this.state.text}/>
-
+ <View style={{
+ flex: 1,
+ paddingTop:4,
+ paddingBottom:4,
+ }}>
  <Button
  onPress={() => this.props.onButtonPress(this.state.text)}
  title="Search"
- accessibilityLabel="alert"/>
+ accessibilityLabel="alert"
+ />
+ </View>
  </View>
  );
  }

js/components/ResultListComponent.js

@@ -30,7 +30,7 @@ const ResultListComponent = (props) => {
  <View>
  <ListView
  dataSource={ds.cloneWithRows(props.items)}
- renderRow={(data) => <Row obj={data}/>}
+ renderRow={(data) => <Row obj={data} onPressRow={ (value) => props.onPressRow(value) }/>}
  renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator}/>}
  enableEmptySections={true}/>
  </View>
@@ -40,7 +40,7 @@ const ResultListComponent = (props) => {
 
 const Row = (props) => {
  return (
- <TouchableHighlight >
+ <TouchableHighlight onPress={() => props.onPressRow(props.obj.value) } >
  <Text style= {styles.rowLayout}>{props.obj.value}</Text>
  </TouchableHighlight>
  );
@@ -49,6 +49,7 @@ const Row = (props) => {
 ResultListComponent.propTypes = {
  items: PropTypes.array,
  isFetching: PropTypes.bool,
+ onPressRow: PropTypes.func,
 }
 
 const styles = StyleSheet.create({

js/components/common/BackButton.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { HeaderBackButton } from 'react-navigation';
+import PropTypes from 'prop-types';
+import { View, StyleSheet, TouchableHighlight, TouchableNativeFeedback, Text } from 'react-native';
+
+// Component for Back Buttons
+
+const styles = StyleSheet.create({
+ barBackButtonText: {
+ color: 'rgb(0, 122, 255)',
+ textAlign: 'left',
+ fontSize: 17,
+ paddingLeft: 6,
+ },
+});
+
+const BaseBackButton = props => (
+ <HeaderBackButton
+ onPress={() => props.onPress()}
+ title={props.backTitle}
+ titleStyle={styles.barBackButtonText}
+ />
+);
+
+BaseBackButton.propTypes = {
+ onPress: PropTypes.func.isRequired,
+ backTitle: PropTypes.string.isRequired,
+};
+
+export const BackButton = props => (
+ <BaseBackButton
+ onPress={
+ props.onPress ? props.onPress : Actions.pop
+ }
+ backTitle={props.backTitle}
+ />
+);

js/containers/Detail.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { View } from 'react-native';
+import { connect } from 'react-redux';
+import DetailComponent from '../components/DetailComponent';
+
+//Container for detail
+const Detail = (props) => {
+ console.log(props.item);
+ return (
+ <View>
+ <DetailComponent
+ item={props.item}
+ />
+ </View>
+ );
+}
+
+Detail.propTypes = {
+ item: PropTypes.string,
+}
+
+export default connect()(Detail);

js/containers/ResultList.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {View, ListView, StyleSheet} from 'react-native';
 import {connect} from 'react-redux';
+import {Actions} from "react-native-router-flux";
 import ResultListComponent from '../components/ResultListComponent';
 import receivePosts from '../actions';
 
@@ -32,6 +33,7 @@ class ResultList extends Component {
  <ResultListComponent
  items={this.state.items}
  isFetching={this.state.loading}
+ onPressRow={(value) => Actions.Detail({ item: value })}
  />
  </View>
  );

js/scenes/DetailScene.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { View } from 'react-native';
+import Detail from '../containers/Detail';
+
+const DetailScene = props => {
+ return (
+ <View>
+ <Detail {...props}/>
+ </View>
+ );
+}
+
+export default DetailScene;

js/scenes/SearchScene.js

@@ -0,0 +1,22 @@
+import React from 'react';
+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 style={styles.container}>
+ <Input/>
+ <ResultList/>
+ </View>
+ );
+}
+
+export default SearchScene;

js/scenes/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Router, Scene, Actions } from 'react-native-router-flux';
+import { connect } from 'react-redux';
+import map from 'lodash.map';
+import { BackButton } from '../components/common/BackButton';
+import * as scenes from './scenes';
+
+const RouterWithRedux = connect()(Router);
+
+const Scenes = (props, context) => (
+ <RouterWithRedux>
+ <Scene key="root">
+ { map(scenes, (component, name) => (
+ <Scene
+ key={name}
+ title={name}
+ component={component}
+ renderBackButton={() =>
+ <BackButton backTitle='back' onPress={() => Actions.pop() }/>}
+ />
+ ))}
+ </Scene>
+ </RouterWithRedux>
+);
+
+Scenes.contextTypes = {
+ initialScene: PropTypes.string.isRequired,
+};
+
+export default connect()(Scenes);

js/scenes/scenes.js

@@ -0,0 +1,2 @@
+export { default as Search } from './SearchScene';
+export { default as Detail } from './DetailScene';