jannah
/
unioil-loyalty-rn-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Checkpoint commit. IOS UI issues fixed.

This commit is contained in:
Harley Catubag 2022-06-14 23:53:23 +08:00
parent 1c20e44bb2
commit 89ba46c19a
18 changed files with 275 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/elements.js
View File

@ -1,7 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import {useEffect, useState, useRef} from 'react'; import { useState, useRef} from 'react';
import { Platform, View, Text, Image, TouchableOpacity, ScrollView, StyleSheet, TextInput, Modal, TouchableWithoutFeedback, ActivityIndicator, Alert, KeyboardAvoidingView } from 'react-native' import { Platform, View, Text, Image, TouchableOpacity, ScrollView, StyleSheet, TextInput, Modal, ActivityIndicator, Alert } from 'react-native'
import { Card, ListItem, Button, Icon, Divider, Input, Overlay, CheckBox } from 'react-native-elements' import { Button, Icon, Divider, Input } from 'react-native-elements'
import {ActionSheet} from 'native-base'; import {ActionSheet} from 'native-base';
import DateTimePicker from '@react-native-community/datetimepicker'; import DateTimePicker from '@react-native-community/datetimepicker';
import DateTimePickerModal from "react-native-modal-datetime-picker"; import DateTimePickerModal from "react-native-modal-datetime-picker";

2
app/components/header.js
View File

@ -192,7 +192,7 @@ class CustomHeader extends React.Component {
</View> </View>
</ImageBackground> </ImageBackground>
</View> </View>
</View> </View>
) )
} }
} }

2
app/components/tab/Tabs.js
View File

@ -18,7 +18,7 @@ interface Props {
const Tabs = (props: Props) => { const Tabs = (props: Props) => {
const layout = useWindowDimensions(); const layout = useWindowDimensions();
const [index, setIndex ] = useState(0); const [index, setIndex ] = useState(props.tab || 0);
const renderScene = props.renderScene; const renderScene = props.renderScene;
const routes = props.routes; const routes = props.routes;

7
app/components/theme.style.js
View File

@ -1,4 +1,4 @@
import {Stylesheet, Dimensions} from 'react-native'; import {Platform, Dimensions} from 'react-native';
import moment from 'moment'; import moment from 'moment';
const colors = { const colors = {
@ -85,10 +85,13 @@ const formatter = {
} }
} }
const platform = Platform.OS;
export default { export default {
colors, colors,
screen, screen,
font, font,
card, card,
formatter formatter,
platform
} }

4
app/screens/account/add.js
View File

@ -165,7 +165,6 @@ class AddAccountCard extends React.PureComponent {
color={this.props.app_theme?.theme.colors.text} color={this.props.app_theme?.theme.colors.text}
visible={this.state.loading} /> visible={this.state.loading} />
<CustomHeader title="" navigation={this.props.navigation} main={false} onBackPress={() => this.props.navigation.goBack()} back={true} /> <CustomHeader title="" navigation={this.props.navigation} main={false} onBackPress={() => this.props.navigation.goBack()} back={true} />
<Container>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}> <View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}>
<Image source={Assets.logo.unioil} style={{width: '100%', height: '85%', resizeMode: 'contain'}} /> <Image source={Assets.logo.unioil} style={{width: '100%', height: '85%', resizeMode: 'contain'}} />
@ -173,7 +172,7 @@ class AddAccountCard extends React.PureComponent {
<View style={{flex: 1, alignItems: 'center'}}> <View style={{flex: 1, alignItems: 'center'}}>
<Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Add Card</Text> <Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Add Card</Text>
<Text style={{alignSelf: 'center', marginTop: 5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}> <Text style={{alignSelf: 'center', marginTop: 5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
Enter you 16-digit card number. Enter your 16-digit card number.
</Text> </Text>
<View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}> <View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}>
<CustomInput <CustomInput
@ -199,7 +198,6 @@ class AddAccountCard extends React.PureComponent {
</View> </View>
</View> </View>
</View> </View>
</Container>
</CustomSafeArea> </CustomSafeArea>
) )
} }

9
app/screens/account/index.js
View File

@ -253,11 +253,12 @@ class About extends React.PureComponent {
style={{width: '100%', height: '85%', resizeMode: 'contain'}} style={{width: '100%', height: '85%', resizeMode: 'contain'}}
/> />
</View> </View>
<Container style={{height: 100}}> <View style={{flex: 1}}>
<View> <View>
<View style={{flexDirection: 'row', padding: 20}}> <View style={{flexDirection: 'row', padding: 20, marginBottom: 15}}>
<View style={{flex: 1}}> <View>
<NBImage <NBImage
style={{height: 50, width: 50, marginRight: 10}}
source={this.state.data ? this.state.data.photo == '' ? Assets.logo.profileHolder : {uri: this.state.data.photo} : Assets.logo.profileHolder} source={this.state.data ? this.state.data.photo == '' ? Assets.logo.profileHolder : {uri: this.state.data.photo} : Assets.logo.profileHolder}
/> />
</View> </View>
@ -286,7 +287,7 @@ class About extends React.PureComponent {
</View> </View>
{this.renderAccount()} {this.renderAccount()}
</Container> </View>
{this.state.accounts.length < 5 ? {this.state.accounts.length < 5 ?
<View <View
style={{ style={{

117
app/screens/login/apply/details.js
View File

@ -6,11 +6,14 @@ import {
View, View,
Text, Text,
Image, Image,
Alert Alert,
Keyboard
} from 'react-native'; } from 'react-native';
import { import {
FormControl, FormControl,
Input, Input,
KeyboardAvoidingView,
ScrollView,
Stack Stack
} from 'native-base'; } from 'native-base';
import CustomHeader from '../../../components/header.js'; import CustomHeader from '../../../components/header.js';
@ -58,6 +61,9 @@ class ApplyCardDetails extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.card = props.route.params || {} this.card = props.route.params || {}
this.keyboardOpenListener = null;
this.keyboardCloseListener = null;
} }
state = { state = {
@ -73,7 +79,6 @@ class ApplyCardDetails extends React.Component {
} }
componentWillUnmount() { componentWillUnmount() {
} }
init = async () => { init = async () => {
@ -128,60 +133,68 @@ class ApplyCardDetails extends React.Component {
return ( return (
<CustomSafeArea> <CustomSafeArea>
<CustomHeader title="" menu={false} back={true} backscreen="ApplySelectCard" navigation={this.props.navigation} /> <CustomHeader title="" menu={false} back={true} backscreen="ApplySelectCard" navigation={this.props.navigation} />
<View style={{flex: 1}}> <KeyboardAvoidingView
<View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}> style={{flex: 1}}
<View style={{padding: 10, width: '100%'}}> behavior='padding'
<Image source={{uri: this.card.image}} style={{width: '100%', height: Theme.screen.h * .32, borderRadius: 10}} /> keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
</View> >
<Text style={{padding: 15, paddingTop: 5, paddingLeft: 0, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black, fontWeight: 'bold'}}> <ScrollView contentContainerStyle={{height: Theme.screen.h * .85}}>
{this.card.name} <View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
</Text> <View style={{padding: 10, width: '100%'}}>
<Text style={{fontSize: 13.5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, width: '100%'}}> <Image source={{uri: this.card.image}} style={{width: '100%', height: Theme.screen.h * .28, borderRadius: 10}} />
{this.card.description} </View>
</Text> <Text style={{padding: 15, paddingTop: 5, paddingLeft: 0, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black, fontWeight: 'bold'}}>
{this.card.name}
<View style={{flex: 1, width: '100%'}}> </Text>
<View style={{width: '100%', opacity: this.handleShowForm()}}> <Text style={{fontSize: 13.5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, width: '100%'}}>
<View style={{alignItems: 'center', alignSelf: 'center', marginTop: 20}}> {this.card.description}
<Text style={{fontSize: 20, fontWeight: 'bold', textAlign: 'center', padding: 10, color: 'black', paddingBottom: 20}}>Enter ID Number</Text> </Text>
{/* <View style={{flexDirection: 'row'}}>
<Text style={{padding: 10, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}> <View style={{flex: 1, width: '100%'}}>
{this.card.id_number_description ? this.card.id_number_description : ""} <View style={{width: '100%', opacity: this.handleShowForm()}}>
</Text> <View style={{alignItems: 'center', alignSelf: 'center', marginTop: 20}}>
<TouchableOpacity onPress={() => Alert.alert("Information", this.state.info ? this.state.info.value : "")} style={{padding: 10, paddingLeft: 0}}> <Text style={{fontSize: 20, fontWeight: 'bold', textAlign: 'center', padding: 10, color: 'black', paddingBottom: 20}}>Enter ID Number</Text>
<Icon.Foundation name="info" color={Theme.colors.gray} size={20} /> {/* <View style={{flexDirection: 'row'}}>
<Text style={{padding: 10, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>
{this.card.id_number_description ? this.card.id_number_description : ""}
</Text>
<TouchableOpacity onPress={() => Alert.alert("Information", this.state.info ? this.state.info.value : "")} style={{padding: 10, paddingLeft: 0}}>
<Icon.Foundation name="info" color={Theme.colors.gray} size={20} />
</TouchableOpacity>
</View> */}
</View>
</View>
<FormControl style={{width: '100%', opacity: this.handleShowForm()}}>
<Stack>
<FormControl.Label style={{ color: this.props.app_theme?.theme.colors.text }}>ID Number</FormControl.Label>
<Input
style={{ color: this.props.app_theme?.theme.colors.text }}
placeholder="ID Number"
value={this.state.cardid || ""}
onChangeText={(value) => {
this.setState({ cardid: value })
if(value != "") this.setState({ valid: true })
else this.setState({ valid: false })
}}
/>
</Stack>
</FormControl>
<View style={{flex: 1, justifyContent: 'flex-end'}}>
{
this.state.canProceed ?
<TouchableOpacity onPress={() => this.onNext()} style={{backgroundColor: !this.handleShowForm() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary, padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: 3}}>
<Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
</TouchableOpacity> :
<TouchableOpacity disabled={!this.state.valid} onPress={() => this.onNext()} style={{backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: this.state.valid ? 3 : 0}}>
<Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
</TouchableOpacity> </TouchableOpacity>
</View> */} }
</View> </View>
</View> </View>
<FormControl style={{width: '100%', opacity: this.handleShowForm()}}>
<Stack>
<FormControl.Label style={{ color: this.props.app_theme?.theme.colors.text }}>ID Number</FormControl.Label>
<Input
style={{ color: this.props.app_theme?.theme.colors.text }}
placeholder="ID Number"
value={this.state.cardid || ""}
onChangeText={(value) => {
this.setState({ cardid: value })
if(value != "") this.setState({ valid: true })
else this.setState({ valid: false })
}}
/>
</Stack>
</FormControl>
{
this.state.canProceed ?
<TouchableOpacity onPress={() => this.onNext()} style={{backgroundColor: !this.handleShowForm() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary, padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: 3}}>
<Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
</TouchableOpacity> :
<TouchableOpacity disabled={!this.state.valid} onPress={() => this.onNext()} style={{backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: this.state.valid ? 3 : 0}}>
<Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
</TouchableOpacity>
}
</View> </View>
</View> </ScrollView>
</View> </KeyboardAvoidingView>
</CustomSafeArea> </CustomSafeArea>
); );
} }

249
app/screens/login/apply/form.js
View File

@ -18,6 +18,7 @@ import moment from 'moment';
import DB from '../../../components/storage/'; import DB from '../../../components/storage/';
import REQUEST from '../../../components/api/'; import REQUEST from '../../../components/api/';
import CustomSafeArea from '../../../components/safeArea.component.js'; import CustomSafeArea from '../../../components/safeArea.component.js';
import { KeyboardAvoidingView } from 'native-base';
const CustomInput = (props) => { const CustomInput = (props) => {
@ -394,130 +395,136 @@ class ApplyForm extends React.Component {
onCancel={() => this.setState({ datepicker: false })} onCancel={() => this.setState({ datepicker: false })}
/> />
<CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} /> <CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
<ScrollView> <KeyboardAvoidingView
<View style={{flex: 1}}> style={{flex: 1}}
<View style={{flex: 1, alignItems: 'center'}}> behavior="padding"
<Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, marginTop: 25, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Enter Your Details</Text> keyboardVerticalOffset={Theme.platform === 'ios' ? 50 : 70}
<Text style={{alignSelf: 'center', textAlign: 'center', width: '90%', marginTop: 0, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}> >
Fill out the remaining forms and you're good to go! <ScrollView>
</Text> <View style={{flex: 1}}>
<CustomInput <View style={{flex: 1, alignItems: 'center'}}>
title="First Name" <Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, marginTop: 25, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Enter Your Details</Text>
value={this.state.fname} <Text style={{alignSelf: 'center', textAlign: 'center', width: '90%', marginTop: 0, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
index={1} Fill out the remaining forms and you're good to go!
current={this.state.activeInput} </Text>
keyboardType={'ascii-capable'} <CustomInput
textColor={this.props.app_theme?.theme.colors.text} title="First Name"
isDarkMode={this.props.app_theme?.theme.dark} value={this.state.fname}
focus={this.state.focus} index={1}
error={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname : false} current={this.state.activeInput}
errorMessage={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname[0] : ""} keyboardType={'ascii-capable'}
onFocus={() => { textColor={this.props.app_theme?.theme.colors.text}
this.setState({ activeInput: 1, focus: true }) isDarkMode={this.props.app_theme?.theme.dark}
}} focus={this.state.focus}
onChangeText={this.onChangeTextValueFirstname} error={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname : false}
/> errorMessage={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname[0] : ""}
<CustomInput onFocus={() => {
top={50} this.setState({ activeInput: 1, focus: true })
title="Last Name" }}
value={this.state.lname} onChangeText={this.onChangeTextValueFirstname}
index={2} />
current={this.state.activeInput} <CustomInput
keyboardType={'ascii-capable'} top={50}
textColor={this.props.app_theme?.theme.colors.text} title="Last Name"
isDarkMode={this.props.app_theme?.theme.dark} value={this.state.lname}
focus={this.state.focus} index={2}
error={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname : false} current={this.state.activeInput}
errorMessage={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname[0] : ""} keyboardType={'ascii-capable'}
onFocus={() => { textColor={this.props.app_theme?.theme.colors.text}
this.setState({ activeInput: 2, focus: true }) isDarkMode={this.props.app_theme?.theme.dark}
}} focus={this.state.focus}
onChangeText={this.onChangeTextValueLastname} error={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname : false}
/> errorMessage={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname[0] : ""}
<CustomInput onFocus={() => {
top={50} this.setState({ activeInput: 2, focus: true })
title="Email Address" }}
value={this.state.email} onChangeText={this.onChangeTextValueLastname}
index={3} />
current={this.state.activeInput} <CustomInput
focus={this.state.focus} top={50}
textColor={this.props.app_theme?.theme.colors.text} title="Email Address"
isDarkMode={this.props.app_theme?.theme.dark} value={this.state.email}
error={this.state.errors && this.state.errors.email ? this.state.errors.email : false} index={3}
errorMessage={this.state.errors && this.state.errors.email ? this.state.errors.email[0] : ""} current={this.state.activeInput}
onFocus={() => { focus={this.state.focus}
this.setState({ activeInput: 3, focus: true }) textColor={this.props.app_theme?.theme.colors.text}
}} isDarkMode={this.props.app_theme?.theme.dark}
onChangeText={(val) => { error={this.state.errors && this.state.errors.email ? this.state.errors.email : false}
this.setState({ email: val }) errorMessage={this.state.errors && this.state.errors.email ? this.state.errors.email[0] : ""}
}} onFocus={() => {
/> this.setState({ activeInput: 3, focus: true })
}}
<View style={{flexDirection: 'row', width: '80%', marginTop: 35, alignItems: 'center'}}> onChangeText={(val) => {
<View style={{flex: 1}}> this.setState({ email: val })
{this.state.activeInput >= 4 ? <Text style={{fontSize: 12, color: this.state.activeInput == 4 && this.state.focus ? Theme.colors.accent : Theme.colors.darkGray, marginTop: -25, marginBottom: 15}}>Birthday</Text> : null} }}
<TouchableOpacity />
onPress={() => {
this.setState({ focus: true, activeInput: 4, datepicker: true }) <View style={{flexDirection: 'row', width: '80%', marginTop: 35, alignItems: 'center'}}>
if(this.state.errors && this.state.errors.birthdate) delete this.state.errors.birthdate <View style={{flex: 1}}>
}}> {this.state.activeInput >= 4 ? <Text style={{fontSize: 12, color: this.state.activeInput == 4 && this.state.focus ? Theme.colors.accent : Theme.colors.darkGray, marginTop: -25, marginBottom: 15}}>Birthday</Text> : null}
<View style={{paddingTop: 15, paddingBottom: 5,borderColor: this.state.errors && this.state.errors.birthdate ? Theme.colors.primary : 'gray', borderBottomWidth: this.state.errors && this.state.errors.birthdate ? 1.5 : 1}}> <TouchableOpacity
<Text style={{fontSize: 17, fontFamily: 'Arial', color: (this.state.birthdate && this.props.app_theme?.theme.dark) ? this.props.app_theme?.theme.colors.text : this.state.birthdate ? Theme.colors.textPrimary : Theme.colors.darkGray}}>{this.state.birthdate || "Birthday"}</Text> onPress={() => {
</View> this.setState({ focus: true, activeInput: 4, datepicker: true })
</TouchableOpacity> if(this.state.errors && this.state.errors.birthdate) delete this.state.errors.birthdate
{this.state.errors && this.state.errors.birthdate ? }}>
<Text style={{fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 15, width: '90%'}}> <View style={{paddingTop: 15, paddingBottom: 5,borderColor: this.state.errors && this.state.errors.birthdate ? Theme.colors.primary : 'gray', borderBottomWidth: this.state.errors && this.state.errors.birthdate ? 1.5 : 1}}>
{this.state.errors?.birthdate[0]} <Text style={{fontSize: 17, fontFamily: 'Arial', color: (this.state.birthdate && this.props.app_theme?.theme.dark) ? this.props.app_theme?.theme.colors.text : this.state.birthdate ? Theme.colors.textPrimary : Theme.colors.darkGray}}>{this.state.birthdate || "Birthday"}</Text>
</Text> : null} </View>
</View>
</View>
<CustomInput
top={50}
index={5}
current={this.state.activeInput}
focus={this.state.focus}
title="Mobile Number"
value={this.state.number && this.state.number.length <= 2 ? '+63' : this.state.number}
keyboardType="numeric"
maxlength={13}
textColor={this.props.app_theme?.theme.colors.text}
isDarkMode={this.props.app_theme?.theme.dark}
error={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile : false}
errorMessage={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile[0] : ""}
onFocus={() => {
this.setState({ activeInput: 5, focus: true })
if(this.state.number == null) this.setState({ number: '+63' })
}}
onChangeText={(val) => {
this.setState({ number: val, errors: null })
if(this.state.agree){
if(val.length < 13) this.setState({ valid: false })
else if(val.length == 13) this.setState({ valid: true })
}
}}
/>
<View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}>
<TouchableOpacity onPress={() => this.state.fname && this.state.lname && this.state.birthdate && this.state.email && this.state.number ? this.onAgree() : null} style={{flex: 0, paddingTop: 15}}>
{!this.state.agree ? <Icon.Feather color={this.props.app_theme?.theme.colors.text} name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.accent} size={20} />}
</TouchableOpacity>
<View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
<View style={{flexDirection: 'row', paddingTop: 5, alignItems: 'center'}}>
<Text style={{ color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>I agree to </Text>
<TouchableOpacity style={{ paddingVertical: 10 }} onPress={() => this.props.navigation.navigate("TermsConditions", {screen: 'ApplyForm'})}>
<Text style={{color: Theme.colors.primary}}>Unioil's Data Privacy Policy.</Text>
</TouchableOpacity> </TouchableOpacity>
{this.state.errors && this.state.errors.birthdate ?
<Text style={{fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 15, width: '90%'}}>
{this.state.errors?.birthdate[0]}
</Text> : null}
</View> </View>
</View> </View>
</View>
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 20}}> <CustomInput
<TouchableOpacity onPress={() => this.onSubmit()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 60, paddingBottom: 15, borderRadius: 10, backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15"}}> top={50}
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Submit</Text> index={5}
</TouchableOpacity> current={this.state.activeInput}
</View> focus={this.state.focus}
</View> title="Mobile Number"
</View> value={this.state.number && this.state.number.length <= 2 ? '+63' : this.state.number}
</ScrollView> keyboardType="numeric"
maxlength={13}
textColor={this.props.app_theme?.theme.colors.text}
isDarkMode={this.props.app_theme?.theme.dark}
error={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile : false}
errorMessage={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile[0] : ""}
onFocus={() => {
this.setState({ activeInput: 5, focus: true })
if(this.state.number == null) this.setState({ number: '+63' })
}}
onChangeText={(val) => {
this.setState({ number: val, errors: null })
if(this.state.agree){
if(val.length < 13) this.setState({ valid: false })
else if(val.length == 13) this.setState({ valid: true })
}
}}
/>
<View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}>
<TouchableOpacity onPress={() => this.state.fname && this.state.lname && this.state.birthdate && this.state.email && this.state.number ? this.onAgree() : null} style={{flex: 0, paddingTop: 15}}>
{!this.state.agree ? <Icon.Feather color={this.props.app_theme?.theme.colors.text} name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.accent} size={20} />}
</TouchableOpacity>
<View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
<View style={{flexDirection: 'row', paddingTop: 5, alignItems: 'center'}}>
<Text style={{ color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>I agree to </Text>
<TouchableOpacity style={{ paddingVertical: 10 }} onPress={() => this.props.navigation.navigate("TermsConditions", {screen: 'ApplyForm'})}>
<Text style={{color: Theme.colors.primary}}>Unioil's Data Privacy Policy.</Text>
</TouchableOpacity>
</View>
</View>
</View>
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 20}}>
<TouchableOpacity onPress={() => this.onSubmit()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 60, paddingBottom: 15, borderRadius: 10, backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15"}}>
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Submit</Text>
</TouchableOpacity>
</View>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
</CustomSafeArea> </CustomSafeArea>
); );
} }

2
app/screens/main/station/fragments/searchbar.js
View File

@ -13,7 +13,7 @@ export default function SearchBar(props){
<Icon.Ionicons name="md-search" size={22} color={props.textColor} /> <Icon.Ionicons name="md-search" size={22} color={props.textColor} />
</View> </View>
<View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center'}}> <View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center'}}>
<TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 17, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder="Search for city" placeholderTextColor={Theme.colors.lightGray} /> <TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 17, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder="Search for a station name" placeholderTextColor={Theme.colors.lightGray} />
</View> </View>
{props.clear ? <TouchableOpacity onPress={props.onClear} activeOpacity={1} style={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}> {props.clear ? <TouchableOpacity onPress={props.onClear} activeOpacity={1} style={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}>
<Icon.Ionicons name="md-close" size={22} color={Theme.colors.darkGray} /> <Icon.Ionicons name="md-close" size={22} color={Theme.colors.darkGray} />

116
app/screens/main/station/xindex.js
View File

@ -134,7 +134,7 @@ class Stations extends React.Component {
<Icon.Ionicons name="md-search" size={22} color={Theme.colors.darkGray} /> <Icon.Ionicons name="md-search" size={22} color={Theme.colors.darkGray} />
</View> </View>
<View style={{flex: 5, backgroundColor: '#fff', justifyContent: 'center'}}> <View style={{flex: 5, backgroundColor: '#fff', justifyContent: 'center'}}>
<TextInput style={{fontSize: 17}} placeholder="Search for city" /> <TextInput style={{fontSize: 17}} placeholder="Search for a station name" />
</View> </View>
</View> </View>
</View> </View>
@ -166,120 +166,6 @@ class Stations extends React.Component {
export default Stations export default Stations
// export default function Stations(navigation) {
// const [loading, setloading] = useState(false)
// const [panel, setpanel] = useState(null)
// const [showPanel, setshowpanel] = useState(false)
// const [session, setsession] = useState(null)
// const [stations, setstations] = useState([])
// const [initialRegion, setinitialRegion] = useState({
// latitude: 14.599512,
// longitude: 120.984222,
// latitudeDelta: 0.0922,
// longitudeDelta: 0.0421,
// })
// const [mylocation, setmylocation] = useState({})
// const fetch = async () => {
// setloading(true)
// panel.hide()
// let session = await DB.session()
// await setsession(session)
// REQUEST('gas_stations', 'post', {
// Authorization: session.token
// }, {}, {
// lcard_uuid: session.user.lcard_uuid,
// longitude: mylocation.longitude,
// latitude: mylocation.latitude
// }, function(res){
// setloading(false)
// setstations(res.data)
// panel.show()
// updateRegion()
// }, function(e){
// console.log(e)
// setloading(false)
// })
// setloading(false)
// }
// const updateRegion = () => {
// if(stations.length > 0){
// let region = initialRegion
// region.latitude = parseFloat(stations[0].latitude)
// region.longitude = parseFloat(stations[0].longitude)
// region.latitudeDelta = 0.00700
// region.longitudeDelta = 0.00100
// setinitialRegion(region)
// }
// }
// const init = async () => {
// Geolocation.getCurrentPosition(info => setmylocation(info.coords) );
// // if(!mylocation.accuracy){
// // alert("Location is disabled")
// // return
// // }
// fetch()
// }
// useEffect(() => {
// init()
// }, [])
// return (
// <SafeAreaView style={{flex: 1}}>
// <CustomHeader title="Stations" menu={true} navigation={navigation} />
// <View style={styles.mapContainer}>
// <MapView
// provider={PROVIDER_GOOGLE}
// loadingEnabled={true}
// style={styles.map}
// showsUserLocation={true}
// region={initialRegion}
// />
// </View>
// <View style={{flex: 0, backgroundColor: '#fff', border: 1, margin: 15, height: 50, padding: 0, justifyContent: 'flex-start', alignItems: 'center', borderRadius: 15, elevation: 10}}>
// <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
// <View style={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}>
// <Icon.Ionicons name="md-search" size={22} color={Theme.colors.darkGray} />
// </View>
// <View style={{flex: 5, backgroundColor: '#fff', justifyContent: 'center'}}>
// <TextInput style={{fontSize: 17}} placeholder="Search for city" />
// </View>
// </View>
// </View>
// {/* <View style={ showPanel ? {...styles.panelActiveContainer} : {...styles.panelInctiveContainer}}> */}
// <View style={styles.panelInctiveContainer}>
// <SlidingUpPanel
// ref={c => setpanel(c)}
// backdropOpacity={1}
// allowDragging={true}
// showBackdrop={false}
// draggableRange={{top: Theme.screen.h / 2.35, bottom: Theme.screen.h / 1.96}}>
// <View style={{flex: 1, alignItems: 'center', justifyContent: 'flex-start', backgroundColor: '#fff'}}>
// <TouchableOpacity activeOpacity={1} onPress={() => setshowpanel(true)} style={{ width: '100%', height: 60, top: -70}}>
// <View style={{flex: 1, flexDirection: 'row', backgroundColor: Theme.colors.lightGray, justifyContent: 'flex-start', padding: 20, alignItems: 'flex-start'}}>
// <Text style={{flex: 4, color: Theme.colors.textPrimary, fontSize: 14}}>Unioil Stations found: {stations.length}</Text>
// <View style={{flex: 0}}>{loading ? <ActivityIndicator color="gray" /> : null}</View>
// </View>
// </TouchableOpacity>
// <ScrollView>
// {renderStations(stations)}
// <View style={{height: Theme.screen.h}}></View>
// </ScrollView>
// </View>
// </SlidingUpPanel>
// </View>
// </SafeAreaView>
// );
// }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
mapContainer: { mapContainer: {
...StyleSheet.absoluteFillObject, ...StyleSheet.absoluteFillObject,

79
app/screens/mpin/setmpin.js
View File

@ -5,9 +5,12 @@ import {
TouchableOpacity, TouchableOpacity,
ScrollView, ScrollView,
Alert, Alert,
Dimensions } from 'react-native'; Dimensions,
KeyboardAvoidingView} from 'react-native';
import { connect } from "react-redux"; import { connect } from "react-redux";
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions"; import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
import Icon from '../../components/icons.js';
import CustomHeader from '../../components/header.js';
import Crypto from '../../components/crypto.js'; import Crypto from '../../components/crypto.js';
import Elements from '../../components/elements.js'; import Elements from '../../components/elements.js';
import NetInfo from "../../components/netstatus"; import NetInfo from "../../components/netstatus";
@ -149,13 +152,21 @@ class Setmpin extends React.Component {
render() { render() {
return( return(
<CustomSafeArea> <CustomSafeArea>
<View> {/* <View style={{flexDirection: 'row', backgroundColor: Theme.colors.primary}}>
<View style={{flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}> <View style={{flex: .5, justifyContent: 'center'}}>
<TouchableOpacity style={{height: 40, width: 40, alignItems: 'center', justifyContent: 'center', borderWidth: 1}} onPress={() => this.props.navigation.goBack()}>
<Icon.AntDesign name={"arrowleft"} size={20} style={{color: "#FFF"}} />
</TouchableOpacity>
</View>
<View style={{flex: 1, flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}>
<View style={{flex:3, justifyContent: 'center'}}> <View style={{flex:3, justifyContent: 'center'}}>
<Text style={{textAlign:'center', fontSize: 17, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : '#fff'}}>Set your mobile PIN</Text> <Text style={{textAlign:'center', fontSize: 17, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : '#fff'}}>Set your mobile PIN</Text>
</View> </View>
</View> </View>
</View> <View style={{flex: .5}} />
</View> */}
<CustomHeader title="Set your mobile PIN" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
<Elements.loaderView <Elements.loaderView
title="Validating" title="Validating"
message="Please wait..." message="Please wait..."
@ -163,33 +174,39 @@ class Setmpin extends React.Component {
backgroundColor={this.props.app_theme?.theme.colors.border} backgroundColor={this.props.app_theme?.theme.colors.border}
color={this.props.app_theme?.theme.colors.text} color={this.props.app_theme?.theme.colors.text}
visible={this.state.loading} /> visible={this.state.loading} />
<ScrollView style={{ flex: 1 }}> <KeyboardAvoidingView
<View style={{ flex: 1, marginTop: 45, }}> style={{flex: 1}}
<Text style={{ padding: 10, textAlign: 'center', fontFamily: 'arial', fontSize: 16, fontStyle: 'italic', marginBottom: 50, marginHorizontal: 30, fontWeight: 'bold', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>To keep your app secure, you will be asked for an MPIN to open your app.</Text> behavior='padding'
<View style={{ flex: 1, alignItems: 'center' }}> keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
<Text style={{ padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Enter 4-digit MPIN</Text> >
<CustomOTPInput <ScrollView style={{ flex: 1 }}>
containerStyle={{ marginBottom: 30 }} <View style={{ flex: 1, marginTop: 45, }}>
secureTextEntry={true} <Text style={{ padding: 10, textAlign: 'center', fontFamily: 'arial', fontSize: 16, fontStyle: 'italic', marginBottom: 50, marginHorizontal: 30, fontWeight: 'bold', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>To keep your app secure, you will be asked for an MPIN to open your app.</Text>
textColor={this.props.app_theme?.theme.colors.text} <View style={{ flex: 1, alignItems: 'center' }}>
isDarkMode={this.props.app_theme?.theme.dark} <Text style={{ padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Enter 4-digit MPIN</Text>
onChangeText={(v) => { <CustomOTPInput
this.setState({ mpin: v, valid: v.length == 4 ? true : false }) containerStyle={{ marginBottom: 30 }}
}}/> secureTextEntry={true}
<Text style={{ marginTop: 30, padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Confirm 4-digit MPIN</Text> textColor={this.props.app_theme?.theme.colors.text}
<CustomOTPInput isDarkMode={this.props.app_theme?.theme.dark}
secureTextEntry={true} onChangeText={(v) => {
textColor={this.props.app_theme?.theme.colors.text} this.setState({ mpin: v, valid: v.length == 4 ? true : false })
isDarkMode={this.props.app_theme?.theme.dark} }}/>
onChangeText={(v) => { <Text style={{ marginTop: 30, padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Confirm 4-digit MPIN</Text>
this.setState({ confirmMpin: v, valid: v.length == 4 ? true : false }) <CustomOTPInput
}}/> secureTextEntry={true}
{(this.state.confirmMpin.length > 0 && !this.checkValidMpin()) && ( textColor={this.props.app_theme?.theme.colors.text}
<Text style={{ textAlign: 'center', fontFamily: 'arial', fontSize: 12, marginLeft: 45, color: Theme.colors.primary, alignSelf: 'flex-start', marginTop: 5 }}>Please ensure that your MPIN is matched</Text> isDarkMode={this.props.app_theme?.theme.dark}
)} onChangeText={(v) => {
</View> this.setState({ confirmMpin: v, valid: v.length == 4 ? true : false })
</View> }}/>
</ScrollView> {(this.state.confirmMpin.length > 0 && !this.checkValidMpin()) && (
<Text style={{ textAlign: 'center', fontFamily: 'arial', fontSize: 12, marginLeft: 45, color: Theme.colors.primary, alignSelf: 'flex-start', marginTop: 5 }}>Please ensure that your MPIN is matched</Text>
)}
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
<TouchableOpacity disabled={!this.checkValidMpin()} style={{ marginHorizontal: 30, padding: 20, backgroundColor: this.state.valid && this.checkValidMpin() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", alignItems: 'center', justifyContent: 'flex-end', borderRadius: 10, marginBottom: 10, elevation: this.state.valid ? 3 : 0 }} onPress={() => this.setAppMpin()}> <TouchableOpacity disabled={!this.checkValidMpin()} style={{ marginHorizontal: 30, padding: 20, backgroundColor: this.state.valid && this.checkValidMpin() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", alignItems: 'center', justifyContent: 'flex-end', borderRadius: 10, marginBottom: 10, elevation: this.state.valid ? 3 : 0 }} onPress={() => this.setAppMpin()}>
<Text style={{ fontFamily: 'arial', fontSize: 18, color: Theme.colors.white }}>Submit</Text> <Text style={{ fontFamily: 'arial', fontSize: 18, color: Theme.colors.white }}>Submit</Text>
</TouchableOpacity> </TouchableOpacity>

4
app/screens/myprofile/card.js
View File

@ -80,8 +80,8 @@ class MyCard extends React.Component {
render() { render() {
return ( return (
<View style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.colors.background }}> <View style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.colors.background }}>
<View style={{flex: 1, width: '100%', height: 250, padding: 15, borderRadius: 15}}> <View style={{flex: 1, padding: 15, borderRadius: 15}}>
<ImageBackground source={this.state.isConnected ? this.renderImage() : this.renderImage()} style={{height: '100%', resizeMode: 'stretch', overflow: 'hidden', borderRadius: 15}} > <ImageBackground source={this.state.isConnected ? this.renderImage() : this.renderImage()} style={{height: Theme.screen.h * .3, overflow: 'hidden', borderRadius: 15}} >
<View style={{marginTop: '32%'}}> <View style={{marginTop: '32%'}}>
<Text style={{fontSize: 15, paddingLeft: 5, fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>{this.renderName() || null}</Text> <Text style={{fontSize: 15, paddingLeft: 5, fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>{this.renderName() || null}</Text>
<Text style={{fontSize: 15, paddingLeft: 5,fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>{this.renderCardNumber() || null}</Text> <Text style={{fontSize: 15, paddingLeft: 5,fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>{this.renderCardNumber() || null}</Text>

4
app/screens/myprofile/index.js
View File

@ -64,11 +64,13 @@ class MyProfile extends React.PureComponent {
} }
render() { render() {
const { tab } = this.props.route.params;
return ( return (
<CustomSafeArea> <CustomSafeArea>
<CustomHeader title="My Profile" onBackPress={() => this.props.navigation.goBack()} menu={false} navigation={this.props} /> <CustomHeader title="My Profile" onBackPress={() => this.props.navigation.goBack()} menu={false} navigation={this.props} />
<Container style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.colors.background }}> <Container style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.colors.background }}>
<Tabs renderScene={this.sceneMap()} routes={this.routes()}/> <Tabs tab={tab} renderScene={this.sceneMap()} routes={this.routes()}/>
</Container> </Container>
</CustomSafeArea> </CustomSafeArea>
) )

8
app/screens/myprofile/profile/edit.js
View File

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { SafeAreaView, ScrollView, TouchableOpacity, View, Text, Alert } from 'react-native'; import { KeyboardAvoidingView, ScrollView, TouchableOpacity, View, Text, Alert } from 'react-native';
import { Avatar } from 'react-native-elements'; import { Avatar } from 'react-native-elements';
import { connect } from "react-redux"; import { connect } from "react-redux";
import { saveUserInfo, savePlainUserInfo } from "../../../redux/actions/AppUserInfoActions"; import { saveUserInfo, savePlainUserInfo } from "../../../redux/actions/AppUserInfoActions";
@ -466,6 +466,11 @@ class EditProfile extends React.PureComponent {
navigation={this.props.navigation} navigation={this.props.navigation}
/> />
<KeyboardAvoidingView
style={{flex: 1}}
behavior="padding"
keyboardVerticalOffset={Theme.platform === 'ios' ? 50 : 70}
>
<ScrollView style={{flex: 1}}> <ScrollView style={{flex: 1}}>
<View style={{flex: 1, flexDirection: 'row', padding: 15}}> <View style={{flex: 1, flexDirection: 'row', padding: 15}}>
<View style={{flex: 1}}> <View style={{flex: 1}}>
@ -636,6 +641,7 @@ class EditProfile extends React.PureComponent {
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ScrollView> </ScrollView>
</KeyboardAvoidingView>
</CustomSafeArea> </CustomSafeArea>
<Elements.customAlert <Elements.customAlert
open={this.state.openModal} open={this.state.openModal}

2
app/screens/payatpump/fragments/searchbar.js
View File

@ -11,7 +11,7 @@ export default function SearchBar(props){
<Icon.Ionicons name="md-search" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} /> <Icon.Ionicons name="md-search" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />
</View> </View>
<View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}> <View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}>
<TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 17, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder="Search for city" placeholderTextColor={Theme.colors.lightGray} /> <TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 17, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder="Search for a station name" placeholderTextColor={Theme.colors.lightGray} />
</View> </View>
{props.clear ? <TouchableOpacity onPress={props.onClear} activeOpacity={1} style={{backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, width: 50, justifyContent: 'center', alignItems: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}> {props.clear ? <TouchableOpacity onPress={props.onClear} activeOpacity={1} style={{backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, width: 50, justifyContent: 'center', alignItems: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}>
<Icon.Ionicons name="md-close" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} /> <Icon.Ionicons name="md-close" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />

4
app/screens/tracker/add.js
View File

@ -53,8 +53,7 @@ const Tracker = (navigation) => {
return ( return (
<CustomSafeArea> <CustomSafeArea>
<CustomHeader title="Add Tracker" menu={false} back={true} backscreen="Tracker" navigation={navigation} /> <CustomHeader title="Add Tracker" menu={false} back={true} backscreen="Tracker" navigation={navigation} />
<Container> <View style={{marginTop: 20, padding: 0, alignItems: 'center'}}>
<View style={{marginTop: 20, padding: 0}}>
<CustomForm <CustomForm
items={ items={
[ [
@ -108,7 +107,6 @@ const Tracker = (navigation) => {
style={{ width: '90%', marginLeft: '5%', marginTop: Theme.screen.h / 3, borderRadius: 10, padding: 15, backgroundColor: Theme.colors.primary}}> style={{ width: '90%', marginLeft: '5%', marginTop: Theme.screen.h / 3, borderRadius: 10, padding: 15, backgroundColor: Theme.colors.primary}}>
<Text style={{alignSelf: 'center', color: '#fff', fontSize: 16, fontFamily: 'Arial'}}>Save Tracker</Text> <Text style={{alignSelf: 'center', color: '#fff', fontSize: 16, fontFamily: 'Arial'}}>Save Tracker</Text>
</TouchableOpacity> </TouchableOpacity>
</Container>
<Elements.CustomDatePicker <Elements.CustomDatePicker
visible={datepicker} visible={datepicker}

4
ios/RNUnioilLoyaltyApp.xcodeproj/project.pbxproj
View File

@ -1065,7 +1065,7 @@
CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements"; CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements";
CODE_SIGN_IDENTITY = "Apple Development"; CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic; CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 4; CURRENT_PROJECT_VERSION = 5;
DEVELOPMENT_TEAM = J29MB7XX75; DEVELOPMENT_TEAM = J29MB7XX75;
ENABLE_BITCODE = NO; ENABLE_BITCODE = NO;
FRAMEWORK_SEARCH_PATHS = ( FRAMEWORK_SEARCH_PATHS = (
@ -1240,7 +1240,7 @@
CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements"; CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements";
CODE_SIGN_IDENTITY = "Apple Development"; CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic; CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 4; CURRENT_PROJECT_VERSION = 5;
DEVELOPMENT_TEAM = J29MB7XX75; DEVELOPMENT_TEAM = J29MB7XX75;
FRAMEWORK_SEARCH_PATHS = ( FRAMEWORK_SEARCH_PATHS = (
"$(inherited)", "$(inherited)",

BIN
ios/RNUnioilLoyaltyApp.xcworkspace/xcuserdata/macbookpro2017.xcuserdatad/UserInterfaceState.xcuserstate generated
View File

Binary file not shown.