flux && redux

app.js

-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
-import React, { Component } from 'react'
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native'
-
-import Tabs from 'react-native-tabs'
-import Scanner from './src/scanner'
-import TabBarItem from './src/tabbaritem'
-
-export default class App extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      page: 'scan'
-    };
-  }
-
-  renderView(page) {
-    switch(page) {
-      case 'send': return (<Text>Send</Text>)
-      case 'scan': return (<Scanner></Scanner>)
-      case 'accounts': return (<Text>Accounts</Text>)
-    }
-  }
-
-  render() {
-    var self = this
-    return (
-      <View style={styles.container}>
-        <Tabs selected='this.state.page' style={{backgroundColor:'white'}}
-          onSelect={el=>this.setState({page:el.props.name})} selectedStyle={{color:'red'}}>
-          <TabBarItem name='send' text='Send TX' selectedItem={self.state.page}/>
-          <TabBarItem name='scan' text='Scan QR' selectedItem={self.state.page}/>
-          <TabBarItem name='accounts' text='Accounts' selectedItem={self.state.page}/>
-        </Tabs>
-        <View style={styles.scanner}>
-          {this.renderView(this.state.page)}
-        </View>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-  scanner: {
-    flex: 1,
-    flexDirection: 'row',
-    marginTop: 20,
-    marginBottom: 50
-  },
-});

index.android.js

@@ -4,7 +4,7 @@
  * @flow
  */
 
-import { AppRegistry } from 'react-native';
-import App from './app.js';
+import { AppRegistry } from 'react-native'
+import App from './src/components/App'
 
-AppRegistry.registerComponent('NativeSigner', () => App);
+AppRegistry.registerComponent('NativeSigner', () => App)

index.ios.js

@@ -5,6 +5,6 @@
  */
 
 import { AppRegistry } from 'react-native'
-import App from './app'
+import App from './src/components/App'
 
 AppRegistry.registerComponent('NativeSigner', () => App)

package.json

@@ -7,10 +7,13 @@
     "test": "jest"
   },
   "dependencies": {
-    "react": "^15.4.1",
+    "react": "^15.4.2",
     "react-native": "0.40.0",
     "react-native-camera": "^0.5.1",
-    "react-native-tabs": "^1.0.9"
+    "react-native-router-flux": "^3.37.0",
+    "react-native-tabs": "^1.0.9",
+    "react-redux": "^5.0.2",
+    "redux": "^3.6.0"
   },
   "devDependencies": {
     "babel-jest": "18.0.0",

src/components/App.js

+import React, { Component } from 'react'
+import { View, Text } from 'react-native'
+import { Provider, connect } from 'react-redux'
+import { createStore } from 'redux'
+import { Actions, ActionConst, Router, Scene } from 'react-native-router-flux'
+import reducers from '../reducers'
+import TabIcon from './TabIcon'
+import QrScanner from '../containers/QrScanner'
+
+const ConnectedRouter = connect()(Router)
+const store = createStore(reducers)
+
+const scenes = Actions.create(
+  <Scene key='root'>
+    <Scene key='tabs' tabs>
+      <Scene key='send' component={View} title='Send TX' icon={TabIcon}/>
+      <Scene key='scan' component={QrScanner} title='Scan QR' icon={TabIcon} initial={true}/>
+      <Scene key='accounts' component={View} title='Accounts' icon={TabIcon}/>
+    </Scene>
+  </Scene>
+)
+
+export default class App extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <Provider store={store}>
+        <ConnectedRouter scenes={scenes}/>
+      </Provider>
+    )
+  }
+}
+

src/components/Scanned.js

+'use strict'
+
+import React, { Component } from 'react'
+import {
+  Text,
+  View,
+  StyleSheet,
+} from 'react-native'
+
+export default class Scanned extends Component {
+  render() {
+    return (
+      <View>
+        <Text>This view appears after we scan something</Text>
+      </View>
+    )
+  }
+}

src/components/Scanner.js

+'use strict';
+
+import React, { Component, PropTypes } from 'react'
+import {
+  StyleSheet,
+  View
+} from 'react-native'
+import Camera from 'react-native-camera';
+
+export default class Scanner extends Component {
+  render() {
+    return (
+      <Camera onBarCodeRead={this.props.onBarCodeRead} style={styles.camera}>
+        <View style={styles.rectangleContainer}>
+          <View style={styles.rectangle}/>
+        </View>
+      </Camera>
+    )
+  }
+}
+
+Scanner.propTypes = {
+  onBarCodeRead: PropTypes.func.isRequired,
+}
+
+const styles = StyleSheet.create({
+  camera: {
+    flex: 1,
+    marginBottom: 50,
+  },
+
+  rectangleContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+  },
+
+  rectangle: {
+    height: 250,
+    width: 250,
+    borderWidth: 2,
+    borderColor: '#00FFFF',
+    backgroundColor: 'transparent',
+  },
+});

src/components/TabIcon.js

+import React, { Component, PropTypes } from 'react'
+import { Text } from 'react-native'
+
+export default class TabIcon extends Component {
+  render() {
+    return (
+      <Text style={{color: this.props.selected ? 'red' :'black'}}>{this.props.title}</Text>
+    )
+  }
+}
+
+TabIcon.propTypes = {
+  title: PropTypes.string.isRequired,
+}

src/containers/QrScanner.js

+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import Scanner from '../components/Scanner'
+
+const onBarCodeRead = () => ({})
+
+const readBarCode = (dispatch, ownProps) => ({
+  onBarCodeRead: () => {
+    dispatch(onBarCodeRead())
+  }
+})
+
+const QrScanner = connect(
+  readBarCode
+)(Scanner)
+
+export default QrScanner

src/reducers/index.js

+import { combineReducers } from 'redux'
+import routes from './routes'
+
+export default combineReducers({
+  routes,
+})

src/reducers/routes.js

+import { ActionConst } from 'react-native-router-flux'
+
+export default function reducer(state = {}, { type, scene }) {
+  switch (type) {
+    case ActionConst.FOCUS:
+      return {
+        ...state,
+        scene,
+      };
+    default:
+      return state;
+  }
+}

src/scanner.js

-'use strict';
-
-import React, { Component } from 'react'
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  Vibration,
-  View
-} from 'react-native'
-
-
-import Camera from 'react-native-camera';
-
-export default class Scanner extends Component {
-  _onPressCancel() {
-    var self = this
-    requestAnimationFrame(() => {
-      // cancel logic
-    })
-  }
-
-  _onBarCodeRead() {
-    var self = this
-    Vibration.vibrate([0, 500, 200, 500])
-  }
-
-  render() {
-    var self = this
-
-    var cancelButton = null;
-    this.barCodeFlag = true;
-
-    if (this.props.cancelButtonVisible) {
-      cancelButton = <CancelButton onPress={this._onPressCancel} title={this.props.cancelButtonTitle} />;
-    }
-
-    return (
-      <Camera onBarCodeRead={this._onBarCodeRead} style={styles.camera}>
-        <View style={styles.rectangleContainer}>
-          <View style={styles.rectangle}/>
-        </View>
-        {cancelButton}
-      </Camera>
-    )
-  }
-
-}
-
-//var QRCodeScreen = React.createClass({
-
-  //_onPressCancel: function() {
-    //var $this = this;
-    //requestAnimationFrame(function() {
-      //$this.props.navigator.pop();
-      //if ($this.props.onCancel) {
-        //$this.props.onCancel();
-      //}
-    //});
-  //},
-
-  //_onBarCodeRead: function(result) {
-    //var $this = this;
-
-    //if (this.barCodeFlag) {
-      //this.barCodeFlag = false;
-
-      //setTimeout(function() {
-        //VibrationIOS.vibrate();
-        //$this.props.navigator.pop();
-        //$this.props.onSucess(result.data);
-      //}, 1000);
-    //}
-  //},
-
-  //render: function() {
-    //var cancelButton = null;
-    //this.barCodeFlag = true;
-
-    //if (this.props.cancelButtonVisible) {
-      //cancelButton = <CancelButton onPress={this._onPressCancel} title={this.props.cancelButtonTitle} />;
-    //}
-
-    //return (
-      //<Camera onBarCodeRead={this._onBarCodeRead} style={styles.camera}>
-        //<View style={styles.rectangleContainer}>
-          //<View style={styles.rectangle}/>
-        //</View>
-        //{cancelButton}
-      //</Camera>
-    //);
-  //},
-//});
-
-var CancelButton = React.createClass({
-  render: function() {
-    return (
-      <View style={styles.cancelButton}>
-        <TouchableOpacity onPress={this.props.onPress}>
-          <Text style={styles.cancelButtonText}>{this.props.title}</Text>
-        </TouchableOpacity>
-      </View>
-    );
-  },
-});
-
-var styles = StyleSheet.create({
-  camera: {
-    flex: 1,
-  },
-
-  rectangleContainer: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'transparent',
-  },
-
-  rectangle: {
-    height: 250,
-    width: 250,
-    borderWidth: 2,
-    borderColor: '#00FFFF',
-    backgroundColor: 'transparent',
-  },
-
-  cancelButton: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    backgroundColor: 'white',
-    borderRadius: 3,
-    padding: 15,
-    width: 100,
-    bottom: 10,
-  },
-  cancelButtonText: {
-    fontSize: 17,
-    fontWeight: '500',
-    color: '#0097CE',
-  },
-});
-
-//module.exports = QRCodeScreen;

src/tabbaritem.js

-import React, { Component } from 'react'
-import { View, Text, StyleSheet } from 'react-native'
-
-export default class TabBarItem extends Component {
-  render() {
-    const {
-      name,
-      selectedItem,
-      text
-    } = this.props
-
-    const selected = selectedItem == name
-
-    return (
-      <View style={styles.item}>
-        <Text style={selected ? styles.selected : styles.normal}>{text}</Text>
-      </View>
-    )
-  }
-}
-
-const styles = StyleSheet.create({
-  item: {
-    alignItems: 'center',
-  },
-  normal: {
-    color: 'grey',
-  },
-  selected: {
-    color: 'red',
-  },
-})