Untitled
unknown
plain_text
5 years ago
43 kB
10
Indexable
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Dimensions,
ScrollView,
Image, FlatList,
TouchableOpacity,
SafeAreaView,
Alert,
TextInput
} from 'react-native';
// import Constants from 'expo-constants';
import { SearchBar } from 'react-native-elements';
import DeviceInfo from 'react-native-device-info';
import { ProgressDialog } from 'react-native-simple-dialogs';
import moment from 'moment';
import Database from '../Database/Database';
import { Header, Left, Right, Body, Footer, Container, Tabs, Tab, TabHeading, Item } from 'native-base';
import Icon1 from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/MaterialIcons';
import IconM from 'react-native-vector-icons/MaterialIcons';
import Service from '../Service/Service';
import { AsyncStorage } from 'react-native';
import { Grid, Row, Col } from 'react-native-easy-grid';
import { Autocomplete, withKeyboardAwareScrollView } from "react-native-dropdown-autocomplete";
import { createStyles, maxWidth } from 'react-native-media-queries';
import { lan_en, lan_ch } from '../Component/Language';
import SelectMultiple from 'react-native-select-multiple'
import PageFooter from './PageFooter';
import Toast from 'react-native-simple-toast'
const sv = new Service();
const deviceWidth = Dimensions.get('screen').width;
const deviceHeight = Dimensions.get('screen').height;
var userdata = [];
var comboArray = []
var eqparray = []
var ratearray = []
var statusarray = []
var itemarray = []
var date = ''
var epq = {
eqptype: [],
rateno: []
}
const colors1 = ['#8c4648', '#E2C471', '#79964B', '#304E60', '#6E4D9B', '#4CB5F5', '#1F3F49', '#D32D41', '#6AB187', '#B3C100', '#CED2CC', '#23282D'
]
const colors = ['#fa8484', '#87bdc9', '#bbbbbb', '#e4adff', '#69dbfd']
const db = new Database();
class Ratereferencesearch extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false,
tableData: [],
item: '',
customercode: '',
customername: '',
pla: '',
pld: '',
progressVisible: true,
itemno: '',
autorate: [],
search: "",
language: '',
Placeholder_Rateno: '',
eqparray: [],
etdvalue: ''
}
}
componentDidMount() {
AsyncStorage.getItem('lang').then((value) => {
console.log("----language---", value)
if (value == 'lang_ch') {
this.setState({ language: "lang_ch" })
this.setState({ Placeholder_Rateno: lan_ch[0].Placeholder_Rateno })
} else {
this.setState({ language: "lang_en" })
this.setState({ Placeholder_Rateno: lan_en[0].Placeholder_Rateno })
}
})
this.setState({ version: DeviceInfo.getVersion() })
AsyncStorage.getItem('customercode').then(value => {
// console.log("inside the code>>>>",value);
this.setState({ "customercode": value })
})
AsyncStorage.getItem('customername').then(value => {
this.setState({ "customername": value })
})
AsyncStorage.getItem('pla').then(value => {
// console.log("isnide the code ...",value);
this.setState({ "pla": value })
})
AsyncStorage.getItem('pld').then(value => {
this.setState({ "pld": value })
})
AsyncStorage.getItem('etd').then(value => {
console.log("etd Value...", value)
this.setState({ "etdvalue": value })
})
// AsyncStorage.getItem('autorate').then(value => {
// console.log("inside autorate...",value);
// this.setState({"autorate":value})
// })
// {this.state.tableData.map((item, index) =>
// this.state.autorate.push(item.srrno)
// )}
for (let i = 0; i < this.props.navigation.state.params.tableData.length; i++) {
console.log("inside the com ... ", this.props.navigation.state.params.tableData);
this.state.autorate.push(this.props.navigation.state.params.tableData[i].srrno);
console.log("autorate book", this.state.autorate);
}
if (this.props.navigation.state.params.tableData.length != 0) {
this.setState({
tableData: this.props.navigation.state.params.tableData,
progressVisible: false,
})
if (this.state.customername != null && this.state.customercode != null) {
AsyncStorage.setItem('customer', this.state.customername + "(" + this.state.customercode + ")");
}
else {
AsyncStorage.setItem('customer', '');
}
}
else {
Alert.alert(
'',
'No Rates for the selected customercode',
[
{
text: 'Ok',
onPress: () => {
if (this.state.customername != null && this.state.customercode != null) {
AsyncStorage.setItem('customer', '');
AsyncStorage.setItem('eqptype', 'Type')
AsyncStorage.setItem('mycust_rate', 'S');
this.setState({
progressVisible: false
})
// AsyncStorage.setItem('customer', this.state.customername + "(" + this.state.customercode + ")" );
}
else {
AsyncStorage.setItem('customer', '');
AsyncStorage.setItem('mycust_rate', 'S');
this.setState({
progressVisible: false
})
}
this.props.navigation.navigate('Booking', { parent: 'Ratereferencesearch' });
},
},
],
{ cancelable: false },
)
}
AsyncStorage.setItem('mycust_rate', 'S');
}
onautocom() {
console.log("INSIDE THE METHOD>>>", this.state.tableData.length)
}
renderHeader = () => {
const { search } = this.state;
return (
<View style={{ padding: 20 }}>
<SearchBar
placeholder={this.state.Placeholder_Rateno}
lightTheme
inputStyle={styles.searchstyle}
inputContainerStyle={styles.searchstyle1}
containerStyle={styles.searchstyle2}
onChangeText={text => this.searchAction(text)}
autoCorrect={false}
value={search}
/>
</View>
)
}
searchAction = (text) => {
console.log("inside the search option >>>", text, text.length, this.state.tableData);
if (this.state.tableData.length != 0) {
if (text != '') {
const newData = this.state.tableData.filter(item => {
const itemData = `${item.srrno.toUpperCase()}`;
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
console.log("inside the newData option >>>", newData);
if (newData.length > 0) {
this.setState({
tableData: newData,
search: text
});
}
else {
Toast.show("No rates found");
this.setState({
tableData: this.props.navigation.state.params.tableData,
search: ''
});
// Alert.alert(
// '',
// 'No rates found',
// [
// {
// text: 'Ok',
// onPress: () => {
// this.setState({
// tableData:this.props.navigation.state.params.tableData,
// search:''
// });
// },
// },
// ],
// { cancelable: false },
// );
}
}
else {
Toast.show("Enter the rates to be Searched")
this.setState({
tableData: this.props.navigation.state.params.tableData,
search: ''
});
}
}
else {
Toast.show("No rates found");
this.setState({
tableData: this.props.navigation.state.params.tableData,
search: ''
});
// Alert.alert(
// '',
// 'No rates found',
// [
// {
// text: 'Ok',
// onPress: () => {
// this.setState({
// tableData:this.props.navigation.state.params.tableData,
// search:''
// });
// },
// },
// ],
// { cancelable: false },
// );
}
}
renderRow = (item, index) => {
return (
< View key={item.key}>
{/* {this.state.search == "N" */}
{/* {item.quotstatus == "S" || item.quotstatus == "A"? */}
{item.quotstatus == "S" || item.quotstatus == "A" || item.quotstatus == "C" ?
<TouchableOpacity
style={[styles.list, item.selectedClass]}
onPress={() => this.selectItem(item, item.quotstatus)} >
<View style={styles.assetview1}>
<View style={styles.assetview2}>
<View style={styles.assetview3} >
<Image resizeMode="contain" source={require('../Images/Asset.png')} style={styles.assetpng} />
</View>
</View>
<View style={styles.ratenoview1}>
{this.state.language != "lang_ch" ? (<Text style={styles.ratenotxt}>{lan_en[0].rateno}</Text>) :
(<Text style={styles.ratenotxt}>{lan_ch[0].rateno}</Text>)}
<Text style={styles.ratenoval}>{item.srrno}</Text>
</View>
<View style={styles.containerimg} >
<Image resizeMode="contain" source={require('../Images/container.png')} style={{ height: 30, width: 25, left: 7, tintColor: 'black' }} />
</View>
<View style={styles.eqpview}>
{this.state.language != "lang_ch" ? (<Text style={styles.eqptxt}>{lan_en[0].eqptype}</Text>) :
(<Text style={styles.eqptxt}>{lan_ch[0].eqptype}</Text>)}
<Text style={styles.eqpval}>{item.eqptype}</Text>
</View>
<View style={styles.dollarview} >
<Image resizeMode="contain" source={require('../Images/doller.png')} style={{ height: 30, width: 25, left: 7, tintColor: 'black' }} />
</View>
<View style={styles.amountview}>
{this.state.language != "lang_ch" ? (<Text style={styles.amounttxt}>{lan_en[0].amount}</Text>) :
(<Text style={styles.amounttxt}>{lan_ch[0].amount}</Text>)}
<Text style={styles.amountval}>{Math.abs(item.frieght)}</Text>
</View>
</View>
<View style={styles.midgap}>
</View>
<View style={styles.calview1}>
<View style={styles.calview2}>
<Image resizeMode="contain" source={require('../Images/calender.png')} style={{ height: 30, width: 25, left: 7, tintColor: 'black' }} />
</View>
<View style={styles.validfromview}>
{this.state.language != "lang_ch" ? (<Text style={styles.validfromtxt}>{lan_en[0].validfrom}</Text>) :
(<Text style={styles.validfromtxt}>{lan_ch[0].validfrom}</Text>)}
<Text style={styles.validfromval}>{moment([item.validfrom], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY ')} </Text>
</View>
{/* <View >
<Image resizeMode="contain" source={require('../Images/calender.png')} style={{color:'black', height: 30, width: 25, left: 7, tintColor: 'black' }} />
</View> */}
<View style={styles.validtoview}>
{this.state.language != "lang_ch" ? (<Text style={styles.validtotxt}>{lan_en[0].validto}</Text>) :
(<Text style={styles.validtotxt}>{lan_ch[0].validto}</Text>)}
<Text style={styles.validtoval}>{moment([item.validto], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY ')} </Text>
</View>
<View style={styles.currencyview}>
{this.state.language != "lang_ch" ? (<Text style={styles.currencytxt}>{lan_en[0].currency}</Text>) :
(<Text style={styles.currencytxt}>{lan_ch[0].currency}</Text>)}
<Text style={styles.currencyval}>{item.currency} </Text>
</View>
<View style={styles.statusview}>
{this.state.language != "lang_ch" ? (<Text style={styles.statustxt}>Status</Text>) :
(<Text style={styles.statustxt}>Status</Text>)}
{item.quotstatus == "A" ?
<Text style={styles.statusval}>APPROVED </Text>
: null}
{item.quotstatus == "S" ?
<Text style={styles.statusval}>SUBMITTED </Text>
:
null}
{item.quotstatus == "C" ?
<Text style={styles.statusval}>COUNTER </Text>
:
null}
</View>
<View style={styles.colimg}>
{/* <Image resizeMode="contain" source={require('../Images/menu_img/orange.png')} style={styles.orangeimg} /> */}
</View>
</View>
<View style={{ flex: 0.5, flexDirection: 'row', marginVertical: 10, marginHorizontal: 10 }}>
</View>
</TouchableOpacity>
: null}
</View>
);
}
onLogin() {
this.props.navigation.navigate('Booking', { parent: 'Booking' });
if (this.state.customername != null && this.state.customercode != null) {
AsyncStorage.setItem('customer', this.state.customername + "(" + this.state.customercode + ")");
}
else {
AsyncStorage.setItem('customer', '');
}
// AsyncStorage.setItem('eqptype','Type','eqptype1','Type','eqptype2','Type' );
// AsyncStorage.setItem('rateno','');
// AsyncStorage.setItem('rateno1','');
// AsyncStorage.setItem('rateno2','');
}
onaddbutton(item, index) {
console.log("inside the rates onaddbutton ....", item, index);
this.setState({ visible: true })
}
onremovebutton(item, index) {
this.setState({ visible: false })
}
submitrates(item, s1) {
AsyncStorage.setItem('eqptype', 'Type');
AsyncStorage.setItem('eqptype1', 'Type');
AsyncStorage.setItem('eqptype2', 'Type');
AsyncStorage.setItem('rateno', '');
AsyncStorage.setItem('rateno1', '');
AsyncStorage.setItem('rateno2', '');
console.log("inside the rates....", s1, item);
if (s1.length != 0) {
if (s1[0] == "A" || s1[1] == "A" || s1[2] == "A") {
console.log("on submit ...", this.state.customername, this.state.customercode, eqparray, ratearray)
epq = {
eqptype: eqparray,
rateno: ratearray,
itemno:itemarray
}
console.log("inside the array ...epq.eqptype", epq.eqptype[0], epq.eqptype[1] ,epq.eqptype[2], epq.rateno);
if (epq.eqptype[0] != '' && epq.eqptype[0]!=undefined) {
AsyncStorage.setItem('eqptype', epq.eqptype[0]);
}
else {
AsyncStorage.setItem('eqptype', 'Type');
}
if (epq.eqptype[1] != '' && epq.eqptype[1]!=undefined) {
AsyncStorage.setItem('eqptype1', epq.eqptype[1]);
}
else {
AsyncStorage.setItem('eqptype1', 'Type');
}
if (epq.eqptype[2] != '' && epq.eqptype[2]!=undefined) {
AsyncStorage.setItem('eqptype2', epq.eqptype[2]);
}
else {
AsyncStorage.setItem('eqptype2', 'Type');
}
if (epq.rateno[0] != ''&&epq.rateno[0]!=undefined) {
AsyncStorage.setItem('rateno', epq.rateno[0]);
}
if (epq.rateno[1] != ''&&epq.rateno[1]!=undefined) {
AsyncStorage.setItem('rateno1', epq.rateno[1]);
}
if (epq.rateno[2] != ''&&epq.rateno[2]!=undefined) {
AsyncStorage.setItem('rateno2', epq.rateno[2]);
}
if (epq.itemno != ''&&epq.itemno!=undefined) {
AsyncStorage.setItem('itemno', epq.itemno[0]);
}
// AsyncStorage.setItem('itemno', item.itemno);
AsyncStorage.setItem('mycust_rate', 'S');
AsyncStorage.setItem('nor', item.nor);
AsyncStorage.setItem('agrcust', item.custname + "(" + item.custcode + ")");
if (this.state.customername != null && this.state.customercode != null) {
AsyncStorage.setItem('customer', this.state.customername + "(" + this.state.customercode + ")");
}
else {
AsyncStorage.setItem('customer', '');
}
eqparray = [], ratearray = [], statusarray = [],itemarray=[]
this.props.navigation.navigate('Booking', { parent: 'Booking' });
}
else if (s1 == "S") {
Toast.show("Submitted Rates cannot be attached");
}
else if (s1 == "C") {
Toast.show("Counter Rates cannot be attached");
}
else {
Toast.show("Attached Rates not approved");
}
}
else {
Toast.show("Select the Rate(s)");
}
}
onfromLocation(item) {
this.setState({ isLoading: true });
console.log("inside the container rates...", this.state.autorate);
this.setState({ autorate: item })
{
this.state.autorate == Item.srrno ?
this.setState({ search: 'S' })
: null
}
}
FlatListItemSeparator = () => <View style={styles.line} />;
selectItem = item => {
console.log("inside the items...", item, item.quotstatus);
var dateetd = this.state.etdvalue.split(" ");
console.log("dateetd >>>>", dateetd[0]);
const date = new Date(dateetd[0]);
var datefrom = item.validfrom.split(" ");
console.log("Datefrom >>>>", datefrom[0]);
const start = new Date(datefrom[0]);
var dateto = item.validto.split(" ");
console.log("Dateto >>>>", dateto[0]);
const end = new Date(dateto[0]);
if (item.quotstatus == "A") {
if (date >= start && date <= end) {
console.log("In >>>>>", this.state.tableData.filter(item => item.isSelect).length);
if (this.state.tableData.filter(item => item.isSelect).length < 3) {
item.isSelect = !item.isSelect;
item.selectedClass = item.isSelect ? styles.selected : styles.list;
const index = this.state.tableData.findIndex(
item => item.id === item.id
);
// console.log("inside selected item ...",index);
// this.state.tableData[index] = item;
this.setState({
tableData: this.state.tableData,
});
console.log("inside the rates srrno...", item.srrno, item.eqptype)
// sv.getetdvalidation(this.func1.bind(this,item),item.srrno,item.eqptype);
eqparray.push(item.eqptype);
ratearray.push(item.srrno);
statusarray.push(item.quotstatus);
itemarray.push(item.itemno);
console.log("inside the array >>>>>>>>", eqparray, ratearray,itemarray);
// Toast.show("Valid ETD & ETA Terminal");
} else {
Toast.show("Maximum of 3 Rates can be Attached")
// this.submitrates(item,item.quotstatus);
// eqparray =[],ratearray =[],statusarray= []
}
}
else {
Toast.show("Invalid ETD & ETA Terminal");
}
}
else {
Toast.show("Submitted Rates cannot be attached")
}
};
// func1(response,item)
// {
// console.log("inside the func1 ...",response,item[0].validfrom,item[0].validto);
// const date = new Date('2020-10-12');
// var datefrom =item[0].validfrom.split(" ");
// console.log("Datefrom >>>>",datefrom[0]);
// const start = new Date(datefrom[0]);
// var dateto =item[0].validto.split(" ");
// console.log("Dateto >>>>",dateto[0]);
// const end = new Date(dateto[0]);
// if (date >= start && date <= end) {
// Toast.show("Valid ETD & ETA Terminal");
// } else {
// Toast.show("Invalid ETD & ETA Terminal");
// }
// }
goToStore = () => this.props.navigation.navigate("Expenses", { selected: this.state.selected, });
renderItem = data =>
<TouchableOpacity
style={[styles.list, data.item.selectedClass]}
onPress={() => this.selectItem(data)}
>
{/* <Image
source={{ uri: data.item.thumbnailUrl }}
style={{ width: 40, height: 40, margin: 6 }}
/> */}
{/* <Text style={styles.lightText}> {data.item.title + data.item.title} </Text> */}
</TouchableOpacity>
render() {
// const itemNumber = this.state.tableData.filter(item => item.isSelect).length;
// if (this.state.loading) {
// return (
// <View style={styles.loader}>
// <ActivityIndicator size="large" color="purple" />
// </View>
// );
// }
return (
<View style={{ flex: 1 }}>
{/* <Header androidStatusBarColor="#000" style={{ backgroundColor: '#112d51',height:60 }}>
<Left>
<IconM style={{ fontSize: 26, color: '#fff' }} name="arrow-back" onPress={this.onLogin.bind(this)} />
</Left>
<Body>
<Text style={{ fontSize: 20, color: '#fff', width: '200%',fontWeight:'bold'}}>Rate Search</Text>
</Body>
<Right></Right>
</Header> */}
<Header androidStatusBarColor="#112d51"
style={{
marginHorizontal: -2,
marginTop: -2,
backgroundColor: '#112d51',
height: 60,
bottom: 25
}}>
<Left>
<TouchableOpacity onPress={this.onLogin.bind(this)} style={{
position: 'relative',
width: "100%",
height: "100%",
right: "5%",
}} >
<Icon style={{ fontSize: 30, top: "20%", color: '#ffffff' }} name="arrow-back" />
</TouchableOpacity>
</Left>
<Body >
{this.state.language != "lang_ch" ? (<Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center", width: '120%', right: Platform.OS == 'ios' ? "30%" : "20%", width: "100%" }}>{lan_en[0].rates}</Text>) :
(<Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center", width: '120%', right: Platform.OS == 'ios' ? "30%" : "20%", width: "100%" }}>{lan_ch[0].rates}</Text>)}
{/* <Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center", width: '120%' ,right:15}}>RATES</Text> */}
</Body>
<Right>
</Right>
</Header>
<ProgressDialog
visible={this.state.progressVisible}
title="Loading"
message="Please, wait..."
titleStyle={{ fontFamily: 'Montserrat-Medium' }}
/>
<View style={styles.container1}>
<View style={styles.iconview1}>
<View style={styles.iconview2}>
<View style={styles.iconview3}>
<Icon1 name="user-o" style={{ color: "#ffff", fontSize: 15 }} />
</View>
</View>
<View style={styles.custnameview}>
<Text style={styles.custnametxt}>{this.state.customername} </Text>
</View>
</View>
<View style={styles.pinview1}>
<View style={styles.pinview2}>
<View style={styles.pinview3}>
<View style={{ flexDirection: 'column', }}>
<Image resizeMode="contain" source={require('../Images/menu_img/pin.png')} style={{ height: 30, width: 25, bottom: 5, tintColor: 'white' }} />
</View>
<View style={styles.plaview}>
<Text style={styles.platxt}>{this.state.pla}</Text>
</View>
</View>
</View>
<View style={{ flex: 0.5, left: 10 }}>
<Image resizeMode="contain" source={require('../Images/arrow11.png')} style={styles.arrow} />
</View>
{/* <View style={styles.pldview1}>
<View style={styles.pldview2}> */}
<View style={styles.pldview3}>
<Text style={styles.pldtxt}>{this.state.pld}</Text>
</View>
{/* </View>
</View> */}
</View>
</View>
{/* <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1}} > */}
{/* <Autocomplete
data={this.state.autorate}
valueExtractor={item => item}
minimumCharactersCount={0}
inputContainerStyle={{
zIndex: -1,
flexDirection: "row",
flexWrap: "wrap",
alignItems: "center",
fontFamily: 'Montserrat-Medium', fontSize: 15,
// paddingHorizontal: 10,
// paddingBottom: 10,
width: "100%",
borderColor: '#000000',
justifyContent: "center",
}}
containerStyle={{ position: 'absolute', top:250,alignItems:'center',justifyContent:'center',right:"5%"}}
placeholder= "Rate No."
placeholderColor='#000000'
handleSelectItem={(item, id) => this.onfromLocation(item)}
inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13 ,borderColor:'#ffff',right:10}}
initialValue={this.state.fromLocation}
/> */}
{/* </View> */}
<View style={styles.container}>
<ScrollView>
<SafeAreaView>
<FlatList
data={this.state.tableData}
ItemSeparatorComponent={this.FlatListItemSeparator}
renderItem={({ item }) => this.renderRow(item)}
keyExtractor={item => item.Key}
extraData={this.state}
ListHeaderComponent={this.renderHeader}
/>
{/* <SelectMultiple
// items={this.state.screenmap}
items={this.state.tableData}
// renderLabel={renderLabel}
renderItem={({item})=>this.renderRow(item)}
keyExtractor={item=>item.key}
ListHeaderComponent={this.renderHeader}
maxSelect={4}
selectedItems={this.state.selectedFooters}
onSelectionsChange={this.onSelectionsChange}
/> */}
{/* <View style={styles.numberBox}>
<Text style={styles.number}>{itemNumber}</Text>
</View>
<TouchableOpacity style={styles.icon}>
<View>
<Icon
raised
name="shopping-cart"
type="font-awesome"
color="#e3e3e3"
size={30}
onPress={() => this.goToStore()}
containerStyle={{ backgroundColor: "#FA7B5F" }}
/>
</View>
</TouchableOpacity> */}
</SafeAreaView>
</ScrollView>
</View>
<View style={{ flex: 0.1, flexDirection: 'column' }}>
<TouchableOpacity onPress={this.submitrates.bind(this, itemarray, statusarray)} style={{
flex: 0.5,
flexDirection: 'column',
width: '50%',
backgroundColor: '#112d51',
height: '100%',
// marginHorizontal:30,
// marginVertical:5,
left: '27%',
top: '10%',
borderRadius: 0,
alignItems: 'center',
justifyContent: 'center'
}}>
<Text style={{ fontSize: 15, color: '#ffff', backgroundColor: 'transparent', fontFamily: 'Montserrat-Bold' }}>OK</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 0.1, flexDirection: 'column' }}>
<PageFooter navigation={this.props.navigation} page={'schedule'}>
</PageFooter>
</View>
</View >
)
}
}
export default Ratereferencesearch
const ratereference = {
container: {
flex: 1,
backgroundColor: "#fff",
position: "relative"
},
title: {
fontSize: 20,
color: "#fff",
textAlign: "center",
marginBottom: 10
},
loader: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff"
},
list: {
flex: 0.85,
marginHorizontal: '2%',
// width: '90%',
marginVertical: '2%',
elevation: 5,
height: "100%",
paddingVertical: 10,
// backgroundColor: colors[index % colors.length],
backgroundColor: '#ffff',
borderRadius: 5,
// left:"2%"
},
lightText: {
color: "#f7f7f7",
width: 200,
paddingLeft: 15,
fontSize: 12
},
line: {
height: 0.5,
width: "100%",
backgroundColor: "rgba(255,255,255,0.5)"
},
icon: {
position: "absolute",
bottom: 20,
width: "100%",
left: 290,
zIndex: 1
},
numberBox: {
position: "absolute",
bottom: 75,
width: 30,
height: 30,
borderRadius: 15,
left: 330,
zIndex: 3,
backgroundColor: "#e3e3e3",
justifyContent: "center",
alignItems: "center"
},
number: { fontSize: 14, color: "#000" },
selected: { backgroundColor: "#A9A9A9" },
searchstyle: {
borderWidth: 1,
borderRadius: 5,
borderColor: "#ffff",
backgroundColor: "#ffff",
borderBottomWidth: 0,
borderTopWidth: 0,
fontFamily: 'Montserrat-Medium',
fontSize: 13
},
item: {
borderWidth: 1,
borderRadius: 5,
borderColor: "black",
backgroundColor: "white",
marginBottom: 10
},
container1: {
// alignItems: 'center',
// justifyContent: 'center',
elevation: 5,
height: "10%",
backgroundColor: "#16356a"
},
iconview1: {
flex: 0.3, flexDirection: 'row', paddingHorizontal: 10, top: 5
},
iconview2: {
flex: 0.1, alignItems: 'center', justifyContent: 'flex-start',
},
iconview3: {
width: 'auto', paddingVertical: 10
},
custnameview: {
flex: 0.75, flexDirection: 'column', paddingVertical: 7
},
custnametxt: {
fontSize: 15, fontFamily: 'Montserrat-Bold', color: 'white', marginHorizontal: -8
},
pinview1: {
flex: 0.3, flexDirection: 'row', marginVertical: 10, marginHorizontal: 15
},
pinview2: {
flex: 0.75, flexDirection: 'column', paddingHorizontal: 10
},
pinview3: {
flexDirection: 'row', paddingVertical: 13
},
plaview: {
flexDirection: 'column', marginHorizontal: 10
},
platxt: {
fontSize: 15, fontFamily: 'Montserrat-Bold', color: 'white', marginBottom: 10
},
arrow: {
height: 30, width: 50, top: 13, tintColor: 'white'
},
pldview1: {
flex: 3, flexDirection: 'column'
},
pldview2: {
flexDirection: 'row', paddingVertical: 13
},
pldview3: {
flexDirection: 'column', marginHorizontal: 10
},
pldtxt: {
fontSize: 15, fontFamily: 'Montserrat-Bold', color: 'white', marginBottom: 10
},
assetview1: { flex: 2, flexDirection: 'row', marginVertical: 1 },
assetview2: { flex: 0.5, alignItems: 'center', justifyContent: 'flex-start' },
assetview3: { width: 'auto', marginHorizontal: 10, paddingHorizontal: 5, left: 7, paddingVertical: 4, justifyContent: 'center', alignItems: 'center', backgroundColor: '#012536', borderRadius: 80 / 2, width: 40, height: 40 },
assetpng: { height: 30, width: 25, left: 1, tintColor: 'white' },
ratenoview1: { flex: 1.75, flexDirection: 'column', paddingHorizontal: 12, },
ratenotxt: { fontSize: 14, color: '#112d51', fontFamily: 'Montserrat', },
ratenoval: { fontSize: 15, color: '#112d51', fontFamily: 'Montserrat-Bold', },
containerimg: { flexDirection: 'column', paddingHorizontal: 10 },
eqpview: { flex: 0.75, flexDirection: 'column', paddingHorizontal: 10 },
eqptxt: { fontSize: 14, color: '#112d51', fontFamily: 'Montserrat', },
eqpval: { fontSize: 15, color: '#112d51', fontFamily: 'Montserrat-Bold', },
dollarview: { flexDirection: 'column', paddingHorizontal: 10, },
amountview: { flex: 0.75, flexDirection: 'column', paddingHorizontal: 10, },
amounttxt: { fontSize: 14, color: '#112d51', fontFamily: 'Montserrat', },
amountval: { fontSize: 15, color: 'red', fontFamily: 'Montserrat-Bold', },
midgap: { flex: 0.5, flexDirection: 'row', marginVertical: 1, marginHorizontal: 10 },
calview1: { flex: 1, flexDirection: 'row' },
calview2: { flexDirection: 'column', paddingHorizontal: 15 },
validfromview: { flex: 1, flexDirection: 'column', paddingHorizontal: 5 },
validfromtxt: { fontSize: 14, fontFamily: 'Montserrat', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 5 },
validfromval: { fontSize: 15, fontFamily: 'Montserrat-Bold', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 5 },
validtoview: { flex: 1, flexDirection: 'column', paddingHorizontal: 5 },
validtotxt: { fontSize: 14, fontFamily: 'Montserrat', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 7 },
validtoval: { fontSize: 15, fontFamily: 'Montserrat-Bold', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 7 },
currencyview: { flex: 1, flexDirection: 'column', paddingHorizontal: 5 },
currencytxt: { fontSize: 14, fontFamily: 'Montserrat', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 40 },
currencyval: { fontSize: 13, fontFamily: 'Montserrat-Bold', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 40 },
statusview: { flex: 1, flexDirection: 'column', paddingHorizontal: 5 },
statustxt: { fontSize: 14, fontFamily: 'Montserrat', color: '#112d51', alignItems: 'center', paddingHorizontal: 20 },
statusval: { fontSize: 15, fontFamily: 'Montserrat-Bold', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 20 },
colimg: { flex: 0.5, flexDirection: 'column', paddingHorizontal: 10 },
modal_container: {
flex: 0.85,
marginHorizontal: '2%',
// width: '90%',
marginVertical: '2%',
elevation: 5,
height: "100%",
paddingVertical: 10,
// backgroundColor: colors[index % colors.length],
backgroundColor: '#ffff',
borderRadius: 5,
// left:"2%"
},
orangeimg: {
height: '100%', right: 25, top: 15, width: '150%', tintColor: "#bfd1dd", position: 'relative'
},
searchstyle1: {
borderWidth: 1,
borderRadius: 5,
borderColor: "#ffff",
backgroundColor: "#ffff",
borderBottomWidth: 0,
borderTopWidth: 0,
elevation: 5,
marginHorizontal: 0,
padding: 0,
},
searchstyle2: {
borderWidth: 1,
borderRadius: 5,
borderColor: "#ffff",
backgroundColor: "#ffff",
borderBottomWidth: 0,
borderTopWidth: 0,
padding: 0,
},
}
const styles = createStyles(
ratereference,
maxWidth(500, {
container1: {
// alignItems: 'center',
// justifyContent: 'center',
elevation: 5,
height: "15%",
backgroundColor: "#16356a",
marginBottom: "1%"
},
title: {
fontSize: 20,
color: "#fff",
textAlign: "center",
marginBottom: 10
},
loader: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff"
},
list: {
flex: 0.85,
marginHorizontal: '2%',
// width: '90%',
marginVertical: '2%',
elevation: 5,
height: "100%",
paddingVertical: 10,
// backgroundColor: colors[index % colors.length],
backgroundColor: '#ffff',
borderRadius: 5,
shadowColor: '#000',
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.4,
shadowRadius: 3,
elevation: 10,
// left:"2%"
},
lightText: {
color: "#f7f7f7",
width: 200,
paddingLeft: 15,
fontSize: 12
},
line: {
height: 0.5,
width: "100%",
backgroundColor: "rgba(255,255,255,0.5)"
},
icon: {
position: "absolute",
bottom: 20,
width: "100%",
left: 290,
zIndex: 1
},
numberBox: {
position: "absolute",
bottom: 75,
width: 30,
height: 30,
borderRadius: 15,
left: 330,
zIndex: 3,
backgroundColor: "#e3e3e3",
justifyContent: "center",
alignItems: "center"
},
number: { fontSize: 14, color: "#000" },
selected: { backgroundColor: "#A9A9A9" },
searchstyle: {
borderWidth: 1,
borderRadius: 5,
borderColor: "#ffff",
backgroundColor: "#ffff",
borderBottomWidth: 0,
borderTopWidth: 0,
fontFamily: 'Montserrat-Medium',
fontSize: 13
},
iconview1: {
flex: 0.5, flexDirection: 'row', paddingHorizontal: 25
},
iconview2: {
flex: 0.5, alignItems: 'center', justifyContent: 'flex-start',
},
iconview3: {
width: 'auto', paddingVertical: 10
},
custnameview: {
flex: 10, flexDirection: 'column', paddingVertical: 7,
},
custnametxt: {
fontSize: 13, fontFamily: 'Montserrat-Bold', color: 'white', marginHorizontal: Platform.OS === 'ios' ? 10 : 15
},
pinview1: {
flex: 0.3, flexDirection: 'row', marginVertical: Platform.OS === 'ios' ? 5 : 1, marginHorizontal: 10
},
pinview2: {
flex: 0.5, flexDirection: 'column', paddingHorizontal: 10, paddingHorizontal: 10
},
pinview3: {
flexDirection: 'row', paddingVertical: 13
},
plaview: {
flex: 1, flexDirection: 'column', marginHorizontal: Platform.OS === 'ios' ? 5 : 7, width: "150%"
},
platxt: {
fontSize: 13, fontFamily: 'Montserrat-Bold', color: 'white', marginBottom: 1, width: "150%"
},
arrow: {
height: 30, width: 50, top: 5, tintColor: 'white',right:"30%"
},
pldview1: {
flex: 1, flexDirection: 'column'
}, pldview2: {
flexDirection: 'row', paddingVertical: Platform.OS === 'ios' ? 15 : 13
},
pldview3: {
flexDirection: 'column', marginHorizontal: 1,right:"350%",top:"3%"
},
pldtxt: {
fontSize: 13, fontFamily: 'Montserrat-Bold', color: 'white', marginBottom: Platform.OS === 'ios' ? 1 : 5
},
assetview1: { flex: 2, flexDirection: 'row', marginVertical: 5 },
assetview2: { flex: 2, alignItems: 'center', justifyContent: 'flex-start' },
assetview3: { width: 'auto', marginHorizontal: 10, paddingHorizontal: 10, left: 7, paddingVertical: 4, justifyContent: 'center', alignItems: 'center', backgroundColor: '#012536', borderRadius: 60 / 2, width: 30, height: 30 },
assetpng: { height: 30, width: 25, left: 1, tintColor: 'white' },
ratenoview1: { flex: 12, flexDirection: 'column', paddingHorizontal: 12, left: 5 },
ratenotxt: { fontSize: 10, color: '#112d51', fontFamily: 'Montserrat', paddingHorizontal: 1, left: 5 },
ratenoval: { fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', paddingHorizontal: 1, left: 4 },
containerimg: { flexDirection: 'column', paddingHorizontal: 5 },
eqpview: { flex: 9, flexDirection: 'column', paddingHorizontal: 1 },
eqptxt: { fontSize: 10, color: '#112d51', fontFamily: 'Montserrat', paddingHorizontal: 10 },
eqpval: { fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', paddingHorizontal: 10 },
dollarview: { flexDirection: 'column', paddingHorizontal: 5, },
amountview: { flex: 6, flexDirection: 'column', paddingHorizontal: 5, },
amounttxt: { fontSize: 10, color: '#112d51', fontFamily: 'Montserrat' },
amountval: { fontSize: 10, color: 'red', fontFamily: 'Montserrat-Bold', color: 'red' },
midgap: { flex: 0.5, flexDirection: 'row', marginVertical: 3, marginHorizontal: 10 },
calview1: { flex: 0.5, flexDirection: 'row' },
calview2: { flexDirection: 'column', paddingHorizontal: 1 },
validfromview: { flex: 1, flexDirection: 'column', paddingHorizontal: 5 },
validfromtxt: { fontSize: 10, fontFamily: 'Montserrat', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 5 },
validfromval: { flex: 1, fontSize: 10, fontFamily: 'Montserrat-Bold', width: '300%', color: '#112d51', alignItems: 'center', paddingHorizontal: 5 },
validtoview: { flex: 1, flexDirection: 'column', paddingHorizontal: 10 },
validtotxt: { fontSize: 10, fontFamily: 'Montserrat', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 10 },
validtoval: { flex: 1, fontSize: 10, fontFamily: 'Montserrat-Bold', width: '300%', color: '#112d51', alignItems: 'center', paddingHorizontal: 10 },
currencyview: { flex: 1, flexDirection: 'column', paddingHorizontal: 15 },
currencytxt: { fontSize: 10, fontFamily: 'Montserrat', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 15 },
currencyval: { fontSize: 10, fontFamily: 'Montserrat-Bold', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 15 },
statusview: { flex: 1, flexDirection: 'column', paddingHorizontal: 5 },
statustxt: { fontSize: 10, fontFamily: 'Montserrat', width: '180%', color: '#112d51', alignItems: 'center' },
statusval: { fontSize: 10, fontFamily: 'Montserrat-Bold', width: '500%', color: '#112d51', alignItems: 'center' },
colimg: { flex: 0.5, flexDirection: 'column', paddingHorizontal: 10 },
modal_container: {
flex: 1,
marginHorizontal: '2%',
width: '96%',
marginVertical: '3%',
elevation: 5,
height: "100%",
paddingVertical: 10,
// backgroundColor: colors[index % colors.length],
backgroundColor: '#ffff',
borderRadius: 1,
borderColor: "black"
},
container: {
flex: 1,
backgroundColor: "#fff",
position: "relative"
},
searchstyle1: {
borderWidth: 1,
borderRadius: 5,
borderColor: "#ffff",
backgroundColor: "#ffff",
borderBottomWidth: 0,
borderTopWidth: 0,
elevation: 5,
marginHorizontal: 0,
padding: 0,
},
searchstyle2: {
borderWidth: 1,
borderRadius: 5,
borderColor: "#ffff",
backgroundColor: "#ffff",
borderBottomWidth: 0,
borderTopWidth: 0,
padding: 0,
},
item: {
padding: 10,
borderWidth: 1,
borderRadius: 5,
borderColor: "#c1dec5",
marginBottom: 10
},
orangeimg: {
height: '215%', right: 1, width: '270%', tintColor: '#bfd1dd', position: 'absolute'
}
})
);
Editor is loading...