App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import LoginForm from './components/Login';
import UserCredential from './components/UserCredential';
import CheckMoney from './components/CheckMoney';
import Payment from './components/Payment';
import ConfirmPaid from './components/ConfirmPaid';

const SimpleApp = StackNavigator({
  Home: { screen: LoginForm },
  Main: { screen: UserCredential},
  Money: { screen: CheckMoney},
  Pay: { screen: Payment},
  Confirm: { screen: ConfirmPaid}
});

export default class App extends React.Component {
  render() {
    return <SimpleApp />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

CheckMoney.js

import React from 'react';
import {StyleSheet , View , Text , Button} from 'react-native';

const style = StyleSheet.create({
    navbar:{
        flex:1,
    },
    navText:{
        fontSize: 40
    },
    row:{
        flexDirection: 'row',
        backgroundColor: '#C995DD'
    },
    flex:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
})
export default class CheckMoneyComponent extends React.Component {
    render(){
        return(
            <View style={style.navbar}>
                <View style={style.row}>
                    <View style={{ paddingLeft: 60 }}>
                        <Text style={style.navText}>เช็คยอดเงิน</Text>
                    </View>
                </View>
                <View style={style.flex}>
                    <Text style={{fontSize: 40}}>
                        30000
                    </Text>
                </View>
            </View>
        )
    }
}

ConfirmPaid.js

import React from 'react';
import { StyleSheet , View , Text , TextInput , Image} from 'react-native';

const style = StyleSheet.create({
    container:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 1,
        flexDirection: 'column',
    },
    navbar:{
        flex:1,
        flexDirection: 'row'
    }
})
export default class ConfirmPaidComponent extends React.Component {
    constructor(props){
        super(props)
    }

    render(){
        return(
            <View style={style.container}>
                <View style={style.navbar}>
                    
                </View>
            </View>
        )
    }
}

Login.js

import React from 'react';
import { StyleSheet , View , Text , TextInput , Button , Image} from 'react-native';
import { app } from '../feathers';
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgb(187,107,217)',
        borderWidth: 1,
        flexDirection: 'column',
      },
      image:{
          width:100,
          height:100,
      }
  });
export default class LoginComponent extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            username: '',
            password: '',
            error: ''
        }
    }
    login(){
        app.authenticate({
            strategy: 'local',
            email: '[email protected]',
            password: 'admin'
          }).then(function(result){
          }).catch(function(error){
            console.info(error)
          });
          
    }
    render(){
        const { navigate} = this.props.navigation;
        return(
        <View style={styles.container}>
            <View>
            <Image style={styles.image} source={require('../images/23548317_10209894275745144_1444130420_n.png')}
            />
            <Text style={{fontSize: 60 ,color: 'white'}}> PHO</Text>
            <Text style={{color:'white' , marginLeft: 80, fontSize: 30}}> wallet</Text>
            <View style={{paddingTop: 30,paddingBottom: 30,}}>
            <Text > ชื่อผู้ใช้งาน </Text>
            <TextInput
                style={{ height: 40 , width: 300 }}
                onChangeText={(username) => this.setState({username})}
             />

             <Text> รหัสผ่าน</Text>
             <TextInput
                style={{height: 40, width: 300}}
                onChangeText={(password) => this.setState({password})}
             />
             <Button
                onPress={() => this.props.navigation.navigate('Main')}
                title="เข้าสู่ระบบ"
                color="#FC8C5A"
                accessibilityLabel="Learn more about this purple button"
            />
            <Text>{this.state.error}</Text>
            </View>
            </View>
        </View>
        )
    }
}

Payment.js

import React from 'react';
import {StyleSheet , View , Text , Button} from 'react-native';

const style = StyleSheet.create({
    navbar:{
        flex:1,
    },
    navText:{
        fontSize: 40
    },
    row:{
        flexDirection: 'row',
        backgroundColor: '#C995DD'
    },
    flex:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
})
export default class PaymentComponent extends React.Component {

    takePicture() {
        const options = {};
        //options.location = ...
        this.camera.capture({metadata: options})
          .then((data) => console.log(data))
          .catch(err => console.error(err));
      }
      
    render(){
        return(
            <View style={style.navbar}>
                <View style={style.row}>
                    <View style={{paddingTop: 10}}>
                        <Button title="ย้อนกลับ"></Button>
                    </View>
                    <View style={{ paddingLeft: 50 }}>
                        <Text style={style.navText}>ชำระเงิน</Text>
                    </View>
                </View>
                <View style={style.flex}>
                    <Camera
                        ref={(cam) => { this.camera = cam;}}
                        style={styles.preview}
                        aspect={Camera.constants.Aspect.fill}>
                        <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
                    </Camera>
                </View>
            </View>
        )
    }
}

userCredential.js

import React from 'react';
import {StyleSheet , View , Text , Image, Button} from 'react-native';
const flex = StyleSheet.create({
    navbar:{
        flex:1,
    },
    userImage:{
        paddingTop: 15,
        width: 60,
        height: 60,
        backgroundColor: '#C995DD'
    },
    userName:{
        paddingTop: 15,
        paddingLeft: 50,
        fontSize: 20,
        backgroundColor: '#C995DD'
    }
})
export default class UserCredentialComponent extends React.Component {
    constructor(props){
        super(props);
    }
    render(){
        return(
            <View style={flex.navbar}>
                <View style={{backgroundColor: "#C995DD" , flexDirection: 'row'}}>
                    <View>
                        <Image style={flex.userImage} source={require('../images/abstract-user-flat-3.png')}/>
                    </View>
                    <View>
                            <Text style={flex.userName}> นายดีจร้า สวัสดี</Text>
                    </View>
                </View>
                <View style={{flex:1 , flexDirection: 'column' , backgroundColor:"#FFFFFF" , alignItems: 'center'}}>
                    <View style={{width: 100 , paddingBottom: 50 , paddingTop: 50}}>
                        <Button 
                        onPress={() => this.props.navigation.navigate('Money')}
                        title='เช็คยอด'></Button>
                    </View>
                    <View style={{width: 100 , paddingBottom: 50 , paddingTop: 50}}>
                        <Button 
                        onPress={() => this.props.navigation.navigate('Pay')}
                        title='จ่ายบิล'></Button>
                    </View>
                    <View style={{width: 100 , paddingBottom: 50 , paddingTop: 50}}>
                        <Button title='ประวัติ'></Button>
                    </View>
                </View>
            </View>
        )
    }
}