Joshua Clark

Mobile App Screens

Below are two page components used by a React Native mobile app I'm working on called ZipScan. Its purpose is to allow users to quickly update inventory in a WooCommerce store (and eventually other ecommerce platforms) from their phone by allowing the user to scan the barcode of a physical product. The app then attempts to populate required fields automatically by hitting a variety of barcode API's, and submits the product to WooCommerce via its extensions to the WP API.

scan.js:

import React, { Component } from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  Button,
  Alert,
  Dimensions,
  Navigator
} from 'react-native';

import Camera from 'react-native-camera';



export class ScanPage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Camera
          ref={(cam) => {
            this.camera = cam;
          }}

          style={styles.preview}
          aspect={Camera.constants.Aspect.fill}
          onBarCodeRead={this.onBarCodeRead.bind(this)}
        />
      </View>
    );
  }



  onBarCodeRead(e) {
    switch (e.type) {
      case 'EAN_13':
        fetch('http://isbndb.com/api/v2/json/5EN7AVDU/book/' + e.data)

          .then(isbn_data => {
            if (response.ok) {
              return response.json();
            } else {
              throw new Error('ISBN API emitted unusable response.');
            }
          })

          .then(isbn_data => {
            // TODO: Data manipulation.
          });
        break;

      default:
        return;
    }
  }
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: window.height,
    width: window.width
  }
});

list.js:

import React, { Component } from 'react';

import {
  AsyncStorage,
  View,
  ListView,
  Text,
  Button,
  TouchableHighlight,
  Alert
} from 'react-native';


export class ListPage extends Component {
  constructor(props) {
    super(props);
    let ds = new ListView.DataSource({ rowHasChanged: this._rowHasChanged });
    this.state = { dataSource: ds.cloneWithRows({}) };
  }

  async componentDidMount() {
    AsyncStorage.getItem('@zipscan:sites').then((sites_json) => {
      let sites = JSON.parse(sites_json);

      if (sites !== null) {
        let ds = new ListView.DataSource({ rowHasChanged: this._rowHasChanged });
        this.state = { dataSource: ds.cloneWithRows(sites) };
      }
    }).done();
  }

  render() {
    return (
      <View style={styles.list}>
        <ListView
          initialListSize={1}
          dataSource={this.state.dataSource}
          renderRow={(rowData) =>
            <Text style={styles.row}>
              {rowData.name}{"\n"}
              {rowData.type}{"\n"}
              {rowData.url}
            </Text>}
          enableEmptySections={true}
        ></ListView>

        <TouchableHighlight
          style={styles.addButton}
          onPress={this._addSite}
        >
          <Text style={styles.addButtonInterior}>
            +
          </Text>
        </TouchableHighlight>
      </View>
    )
  }

  _rowHasChanged(r1, r2) {
    return r1 !== r2;
  }

  _addSite() {
    Alert.alert('test');
  }

  goToNext() {
    console.log(this.props);
  }
}

const styles = {
  list: {
    flex: 1,
    backgroundColor: 'orange'
  },

  row: {
    paddingVertical: 16,
    paddingHorizontal: 10,
    fontSize: 18,

    borderBottomColor: 'black',
    borderBottomWidth: 1
  },

  addButton: {
    height: 60,
    width: 60,
    borderRadius: 60,
    backgroundColor: 'blue',
    position: 'absolute',
    bottom: 0,
    right: 0
  },

  addButtonInterior: {
    paddingTop: 12,
    paddingLeft: 21.5,
    fontSize: 26,
    color: 'white'
  }
};