Skip to content

I
InvestCustomer
Commit 226023fd by Giang Tran
Options

update code

parent 4e39bbcc
Showing with 772 additions and 127 deletions
ios/Invest.xcodeproj/project.pbxproj
......@@ -268,7 +268,7 @@
00E356EC1AD99517003FC87E /* Resources */,
50AA96423ADD3C77C5478E40 /* [CP] Embed Pods Frameworks */,
E44ED71C60298AC6A80FDE0F /* ShellScript */,
D8F1EF7A3E29C936D0C29036 /* [CP] Copy Pods Resources */,
48E22188E4EB93A4FC17957F /* [CP] Copy Pods Resources */,
);
buildRules = (
);
......@@ -292,7 +292,7 @@
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
D10F3A5D59847BD5B121672E /* [CP] Embed Pods Frameworks */,
6CC873A1E6FA7C328D7B37A9 /* ShellScript */,
73858B57FF6C3AA71ACB29F3 /* [CP] Copy Pods Resources */,
21C14CFEB343E17408732454 /* [CP] Copy Pods Resources */,
);
buildRules = (
);
......@@ -476,6 +476,7 @@
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
2986F52A2CA5D45A960EE3D4 /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
......@@ -512,6 +513,54 @@
shellPath = /bin/sh;
shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
};
48E22188E4EB93A4FC17957F /* [CP] Copy Pods Resources */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-resources.sh",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Feather.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Foundation.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
);
name = "[CP] Copy Pods Resources";
outputPaths = (
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Feather.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Brands.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Regular.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Solid.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Fontisto.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Foundation.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Ionicons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialCommunityIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Octicons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-resources.sh\"\n";
showEnvVarsInLog = 0;
};
50AA96423ADD3C77C5478E40 /* [CP] Embed Pods Frameworks */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
......@@ -559,7 +608,6 @@
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest/Pods-Invest-resources.sh\"\n";
showEnvVarsInLog = 0;
};
ACDE381B2550EE5E49E84DE8 /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
......@@ -622,54 +670,6 @@
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest/Pods-Invest-frameworks.sh\"\n";
showEnvVarsInLog = 0;
};
D8F1EF7A3E29C936D0C29036 /* [CP] Copy Pods Resources */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-resources.sh",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Feather.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Foundation.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
);
name = "[CP] Copy Pods Resources";
outputPaths = (
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Feather.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Brands.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Regular.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Solid.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Fontisto.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Foundation.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Ionicons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialCommunityIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Octicons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Invest-InvestTests/Pods-Invest-InvestTests-resources.sh\"\n";
showEnvVarsInLog = 0;
};
E44ED71C60298AC6A80FDE0F /* ShellScript */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
......
package.json
......@@ -13,7 +13,7 @@
"@react-native-community/async-storage": "^1.12.1",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.11.7",
"@react-navigation/material-top-tabs": "^5.3.14",
"@react-navigation/native": "^5.9.2",
"@react-navigation/stack": "^5.14.2",
"axios": "^0.21.1",
......@@ -28,6 +28,7 @@
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.17.1",
"react-native-tab-view": "^2.15.2",
"react-native-vector-icons": "^8.0.0",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
......
src/Screens/Account/Account.js
......@@ -7,3 +7,4 @@ const Account = (props) => {
};
export default Account;
\ No newline at end of file
src/Screens/AccountVerification/AccountVerificationView.js
import React from 'react';
import {View, Text} from 'react-native';
import HeaderBack from '../../components/Header/HeaderBack';
import BankInfor from './Tab/BankInfor';
import GeneralInfor from './Tab/GeneralInfor';
import Profile from './Tab/Profile';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {getFontXD} from '../../Config/Functions';
const Tab = createMaterialTopTabNavigator();
const AccountVerificationView = (props) => {
return (
<View>
<Text>AccountVerificationView screen</Text>
<View style={{flex: 1}}>
<HeaderBack isWhite={true} title={'Xác minh tài khoản'} />
<Tab.Navigator
initialRouteName="GeneralInfor"
tabBarOptions={{
inactiveTintColor: '#929292',
activeTintColor: '#1473E6',
labelStyle: {fontSize: getFontXD(36)},
style: {backgroundColor: 'white'},
scrollEnabled: true,
}}>
<Tab.Screen
name="GeneralInfor"
component={GeneralInfor}
options={{tabBarLabel: 'Thông tin chung'}}
/>
<Tab.Screen
name="Profile"
component={Profile}
options={{tabBarLabel: 'Hồ sơ'}}
/>
<Tab.Screen
name="BankInfor"
component={BankInfor}
options={{tabBarLabel: 'Ngân hàng'}}
/>
</Tab.Navigator>
</View>
);
};
......
src/Screens/AccountVerification/Tab/BankInfor.js 0 → 100644
import React from 'react';
import {View, Text} from 'react-native';
import TextField from '../../../components/TextField';
import TextMulti from '../../../components/TextMulti';
import PickerImg from '../../../components/Picker/PickerImg';
const BankInfor = (props) => {
return (
<View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
<TextField title={'Loại thẻ'} />
<TextField title={'Số thẻ'} />
<TextField title={'Ngày cấp'} />
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
flexWrap: 'wrap',
}}>
<PickerImg title={'Ảnh mặt trước CMND'} />
<PickerImg title={'Ảnh mặt sau CMND'} />
<PickerImg title={'Ảnh chữ ký'} />
</View>
</View>
);
};
export default BankInfor;
src/Screens/AccountVerification/Tab/GeneralInfor.js 0 → 100644
import React from 'react';
import {View, Text} from 'react-native';
import TextField from '../../../components/TextField';
import TextMulti from '../../../components/TextMulti';
const GeneralInfor = (props) => {
return (
<View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
<TextField title={'User name'} />
<TextField title={'Sponsor ID'} />
<View style={{flexDirection: 'row'}}>
<View style={{flex: 1}}>
<TextField title={'Tên'} />
</View>
<View style={{width: 20}} />
<View style={{flex: 1}}>
<TextField title={'Họ'} />
</View>
</View>
<TextField title={'Số điện thoại'} />
<TextField title={'Ngày sinh'} />
<TextMulti title={'Địa chỉ'} />
</View>
);
};
export default GeneralInfor;
src/Screens/AccountVerification/Tab/Profile.js 0 → 100644
import React from 'react';
import {View, Text} from 'react-native';
import PickerImg from '../../../components/Picker/PickerImg';
const Profile = (props) => {
return (
<View>
<Text>Profile screen</Text>
<PickerImg />
</View>
);
};
export default Profile;
src/Screens/Action/Deposit/DepositView.js
import React from 'react';
import {View, Text} from 'react-native';
import {View, Text, StyleSheet} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import TextField from '../../../components/TextField';
import TextMulti from '../../../components/TextMulti';
import Button from '../../../components/Button';
import {HEIGHTXD} from '../../../Config/Functions';
const DepositView = (props) => {
return (
<View>
<Text>DepositView screen</Text>
<View style={{flex: 1}}>
<HeaderBack title={'Nạp tiền'} />
<View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
<TextField title={'Số tiền'} />
<TextField title={'Phương thức nạp'} />
<TextMulti numberLines={3} title={'Ghi chú'} />
</View>
<View style={styles.containerBtn}>
<Button title={'Nạp tiền'} />
</View>
</View>
);
};
const styles = StyleSheet.create({
containerBtn: {
marginBottom: 15,
},
});
export default DepositView;
src/Screens/Action/Transfer/TransferView.js
import React from 'react';
import {View, Text} from 'react-native';
import {View, Text, StyleSheet} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import TextField from '../../../components/TextField';
import TextMulti from '../../../components/TextMulti';
import Button from '../../../components/Button';
import {HEIGHTXD} from '../../../Config/Functions';
const TransferView = (props) => {
return (
<View>
<Text>TransferView screen</Text>
<View style={{flex: 1}}>
<HeaderBack title={'Chuyển khoản'} />
<View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
<TextField title={'Số tiền'} />
<TextField title={'Phương thức nạp'} />
<TextMulti numberLines={3} title={'Ghi chú'} />
</View>
<View style={styles.containerBtn}>
<Button title={'Chuyển tiền'} />
</View>
</View>
);
};
const styles = StyleSheet.create({
containerBtn: {
marginBottom: 15,
},
});
export default TransferView;
src/Screens/Action/Withdraw/WithdrawView.js
import React from 'react';
import {View, Text} from 'react-native';
import {View, Text, StyleSheet} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import TextField from '../../../components/TextField';
import TextMulti from '../../../components/TextMulti';
import Button from '../../../components/Button';
import {HEIGHTXD} from '../../../Config/Functions';
const WithdrawView = (props) => {
return (
<View>
<Text>WithdrawView screen</Text>
<View style={{flex: 1}}>
<HeaderBack title={'Rút tiền'} />
<View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
<TextField title={'Số tiền'} />
<TextField title={'Phương thức nạp'} />
<TextMulti numberLines={3} title={'Ghi chú'} />
</View>
<View style={styles.containerBtn}>
<Button title={'Rút tiền'} />
</View>
</View>
);
};
const styles = StyleSheet.create({
containerBtn: {
marginBottom: 15,
},
});
export default WithdrawView;
src/assets/colors.js
......@@ -36,7 +36,7 @@ const colors = {
primary: '#0AC4BA',
secondary: '#00b33c',
tertiary: '#FFE358',
black: '#363636',
black: '#000000',
white: '#FFFFFF',
gray: '#9DA3B4',
gray3: '#C5CCD6',
......
src/assets/images.js
......@@ -29,6 +29,9 @@ const images = {
iconMethodPay: require('./images/iconMethodPay.png'),
iconDepositNoti: require('./images/iconDeposit.png'),
iconBack: require('./images/iconBack.png'),
bgBtn: require('./images/bgBtn.png'),
addImg: require('./images/addImg.png'),
};
export default images;
src/components/Button.js
import React, {Component} from 'react';
import {StyleSheet, TouchableOpacity} from 'react-native';
import {
StyleSheet,
TouchableOpacity,
View,
Text,
ImageBackground,
} from 'react-native';
import R from '../assets/R';
import {colors, sizes} from '../assets/theme';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../Config/Functions';
class Button extends Component {
render() {
const {
style,
opacity,
color,
locations,
shadow,
children,
...props
} = this.props;
const buttonStyles = [
styles.button,
shadow && styles.shadow,
color && styles[color], // predefined styles colors for backgroundColor
color && !styles[color] && {backgroundColor: color}, // custom backgroundColor
style,
];
return (
<TouchableOpacity
style={buttonStyles}
activeOpacity={opacity || 0.8}
{...props}>
{children}
</TouchableOpacity>
);
}
}
Button.defaultProps = {
opacity: 0.8,
color: colors.white,
const Button = (props) => {
const {title} = props;
return (
<TouchableOpacity
style={styles.container}
onPress={() => console.log('hello')}>
<ImageBackground
imageStyle={{
borderRadius: 20,
height: HEIGHTXD(150),
width: '100%',
}}
style={{
height: HEIGHTXD(150),
width: WIDTHXD(1005),
justifyContent: 'center',
alignItems: 'center',
borderRadius: 20,
width: '100%',
}}
source={R.images.bgBtn}>
<Text style={styles.txt}>{title}</Text>
</ImageBackground>
</TouchableOpacity>
);
};
export default Button;
const styles = StyleSheet.create({
button: {
borderRadius: sizes.radius,
height: sizes.base * 3,
container: {
height: HEIGHTXD(150),
borderRadius: 50,
justifyContent: 'center',
marginVertical: sizes.padding / 3,
alignItems: 'center',
},
shadow: {
shadowColor: colors.black,
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.1,
shadowRadius: 10,
txt: {
fontSize: getFontXD(48),
textTransform: 'uppercase',
color: R.colors.white,
fontWeight: 'bold',
},
accent: {backgroundColor: colors.accent},
primary: {backgroundColor: colors.primary},
secondary: {backgroundColor: colors.secondary},
tertiary: {backgroundColor: colors.tertiary},
black: {backgroundColor: colors.black},
white: {backgroundColor: colors.white},
gray: {backgroundColor: colors.gray},
gray2: {backgroundColor: colors.gray2},
gray3: {backgroundColor: colors.gray3},
gray4: {backgroundColor: colors.gray4},
orange: {backgroundColor: colors.orange},
lightBlue: {backgroundColor: colors.lightBlue},
});
src/components/Header/HeaderBack.js 0 → 100644
import React, {useState} from 'react';
import {
View,
Text,
Image,
StatusBar,
StyleSheet,
SafeAreaView,
ImageBackground,
TouchableOpacity,
Platform,
Button,
TouchableWithoutFeedback,
} from 'react-native';
import R from '../../assets/R';
import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux';
import {HEIGHTXD} from '../../Config/Functions';
import {useNavigation} from '@react-navigation/native';
const HeaderHome = (props) => {
const {title, isWhite} = props;
const navigate = useNavigation();
return (
<ImageBackground
style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]}
source={R.images.bgHeader}>
<StatusBar backgroundColor="transparent" translucent={true} />
<View style={styles.headerContainer}>
<TouchableOpacity onPress={() => navigate.goBack()}>
<Image source={R.images.iconBack} style={styles.imgIcon} />
</TouchableOpacity>
<Text style={styles.txtTitle}>{title}</Text>
<View />
</View>
</ImageBackground>
);
};
const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
};
export default connect(mapStateToProps, {})(HeaderHome);
const styles = StyleSheet.create({
img: {
height: Platform.OS == 'ios' ? HEIGHTXD(330) : HEIGHTXD(400),
width: '100%',
justifyContent: 'center',
alignItems: 'center',
},
headerContainer: {
height: 55,
width: '100%',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: 20,
justifyContent: 'space-between',
},
imgIcon: {
width: 30,
height: 30,
},
txtTitle: {
fontSize: getFontXD(52),
color: R.colors.white,
fontWeight: 'bold',
},
container: {
backgroundColor: 'white',
height: '100%',
width: 300,
borderRadius: 20,
},
});
src/components/Picker/PickerImg.js 0 → 100644
import React from 'react';
import {View, Text, Image, StyleSheet, TouchableOpacity} from 'react-native';
import R from '../../assets/R';
import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
import Icon from 'react-native-vector-icons/AntDesign';
const PickerImg = (props) => {
const {title} = props;
return (
<View style={{marginTop: 10, width: WIDTHXD(380)}}>
<Text style={styles.txt}>{title}</Text>
<View style={styles.container}>
<Icon name={'plus'} size={40} color={'#DBDBDB'} />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
width: WIDTHXD(350),
height: HEIGHTXD(240),
backgroundColor: R.colors.white,
borderRadius: 10,
borderWidth: 2,
borderColor: '#DBDBDB',
borderStyle: 'dashed',
justifyContent: 'center',
alignItems: 'center',
},
txt: {
fontSize: getFontXD(42),
color: R.colors.color777,
marginBottom: 5,
},
});
export default PickerImg;
src/components/PickerItem2.js 0 → 100644
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
TouchableHighlight,
Dimensions,
} from "react-native";
import ModalDropdown from "react-native-modal-dropdown";
import R from "../../assets/R";
import {WIDTHXD, getFontXD, HEIGHTXD, getHeight, WIDTHXDICON} from "../../config/Function";
const data = [];
/**
* This Function to show piker with list date (for example [{name:'Picker1'},{name:'Picker2}])
* @callback onValueChange return value of item you choice
* @param value value of picker you choice
* @param defaultIndex defaultIndex of picker you choice
* @param containerStyle custom containerStyle of view
* @param data data value of date
* @param width width of picker
* @param height height of picker
* @param date value of date you choice
* @param heightItem height of picker Item
* @param maxHeight set height of list
* @param iconDropdown to set icon for dropdown
* @param iconDropdownStyle to style icon dropdown
* other you can make minDate,maxDate... with props of libary react-native-datepicker
*/
export default class PickerItem2 extends Component {
constructor(props) {
super(props);
this._button = null;
this._buttonFrame = null;
this.state = {
value: "",
showInBottom: true,
};
}
componentDidMount() {
this._dropdown.select(0);
}
_dropdownAdjustFrame = (style) => {
const { showInBottom } = this.state;
// alert(showInBottom);
let stylez = style;
if (!showInBottom) {
stylez.height += HEIGHTXD(99) * (6 - Math.min(this.props.data.length, 6));
} else {
stylez.height += HEIGHTXD(99);
}
// stylez.left += 150;
return stylez;
};
_calcPosition() {
const { data } = this.props;
let dropdownStyle = {
// maxHeight: HEIGHTXD(99 * Math.min(data.length, 5)) + (6 - Math.min(data.length, 5)) * HEIGHTXD(105),
maxHeight: HEIGHTXD(99 * Math.min(data.length, 6) + 12),
};
const dimensions = Dimensions.get("window");
const windowHeight = dimensions.height;
const dropdownHeight = dropdownStyle.maxHeight;
const bottomSpace =
windowHeight - this._buttonFrame.y - this._buttonFrame.h;
const showInBottom =
bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y;
this.setState({ showInBottom });
}
_updatePosition() {
if (this._button && this._button.measure) {
this._button.measure((fx, fy, width, height, px, py) => {
this._buttonFrame = { x: px, y: py, w: width, h: height };
this._calcPosition();
});
}
}
render() {
const {
width,
onValueChange,
containerStyle,
height,
value,
defaultValue,
data,
defaultIndex,
iconDropdown,
iconDropdownStyle,
disabled,
isTriangle,
textStyle,
} = this.props;
return (
<View style={styles.cell}>
<TouchableOpacity
disabled={disabled}
ref={(button) => {
this._button = button;
}}
onPress={() => {
this._dropdown.show();
this._updatePosition();
}}
style={[
styles.pickerStyle,
containerStyle !== null && containerStyle,
height && { height },
width && { width },
]}
>
<Text
numberOfLines={1}
style={[
styles.dropdown_row_text,
width && { width: width - WIDTHXD(125) },
textStyle ? textStyle : {},
]}
>
{defaultValue || this.state.value}
</Text>
<Image
resizeMode="contain"
source={
iconDropdown || isTriangle
? R.images.iconDropdown
: R.images.iconDown
}
style={
iconDropdownStyle || { width: WIDTHXDICON(35), height: WIDTHXDICON(18) }
}
/>
</TouchableOpacity>
<ModalDropdown
showsVerticalScrollIndicator={false}
ref={(el) => {
this._dropdown = el;
}}
style={[styles.dropdown, width && { width }]}
defaultValue={defaultValue || "0"}
defaultIndex={defaultIndex || 0}
textStyle={styles.dropdown_text}
dropdownStyle={[
styles.dropdown_dropdown,
{ height: HEIGHTXD(420) },
width && { width },
]}
options={data !== null && data}
onSelect={(value) => {
onValueChange && onValueChange(value, data[value]);
this.setState({ value: data[value].name });
}}
renderSeparator={() => (
<View
style={{ width: "100%", height: 0.5, backgroundColor: "#E2E8F2" }}
/>
)}
renderButtonText={(rowData) => this.renderButtonText(rowData)}
renderRow={this.renderRow}
adjustFrame={(style) => this._dropdownAdjustFrame(style)}
// renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
/>
</View>
);
}
renderButtonText = () => " ";
renderRow = (rowData, rowID, highlighted) => {
const { width, heightItem, data } = this.props;
let evenRow = rowID === (data && data.length - 1);
return (
<TouchableHighlight underlayColor="cornflowerblue">
<View
style={[
styles.dropdown_row,
heightItem && { height: heightItem },
this.props.defaultValue === rowData.name && {
backgroundColor: "#e3e8f2",
},
evenRow && {
borderBottomLeftRadius: WIDTHXD(20),
borderBottomRightRadius: WIDTHXD(20),
overflow: "hidden",
},
width && { width },
]}
>
<Text
numberOfLines={1}
style={[
styles.dropdown_row_text,
{ marginHorizontal: WIDTHXD(30) },
]}
>
{`${rowData.name}`}
</Text>
</View>
</TouchableHighlight>
);
};
renderSeparator = (rowID) => {
if (rowID === data.length - 1) return [];
let key = `spr_${rowID}`;
return <View style={styles.dropdown_separator} key={key} />;
};
}
const styles = StyleSheet.create({
cell: {
flex: 0,
},
dropdown: {
alignSelf: "center",
width: WIDTHXD(960),
height: HEIGHTXD(0),
borderBottomLeftRadius: WIDTHXD(20),
borderBottomRightRadius: WIDTHXD(20),
overflow: "hidden",
},
dropdown_text: {
fontFamily: R.fonts.RobotoRegular,
fontSize: getFontXD(42),
},
dropdown_dropdown: {
flex: 1,
width: WIDTHXD(960),
height: HEIGHTXD(300),
// marginTop: -HEIGHTXD(99),
borderWidth: 0,
// borderColor: R.colors.iconGray,
// borderRadius: 3,
borderBottomLeftRadius: WIDTHXD(20),
borderBottomRightRadius: WIDTHXD(20),
// paddingBottom: HEIGHTXD(10),
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
overflow: "hidden",
elevation: 2,
},
dropdown_row: {
flexDirection: "row",
height: HEIGHTXD(100),
alignItems: "center",
},
dropdown_row_text: {
// marginHorizontal: 4,
fontFamily: R.fonts.RobotoRegular,
fontSize: getFontXD(42),
textAlignVertical: "center",
},
dropdown_separator: {
borderBottomWidth: 0.3,
borderBottomColor: R.colors.iconGray,
},
pickerStyle: {
width: WIDTHXD(960),
height: HEIGHTXD(99),
flexDirection: "row",
paddingHorizontal: WIDTHXD(30),
justifyContent: "space-between",
alignItems: "center",
alignSelf: "center",
borderWidth: 0.3,
borderColor: R.colors.iconGray,
borderRadius: WIDTHXD(20),
// marginTop: HEIGHTXD(10)
},
});
src/components/TextField.js 0 → 100644
import React from 'react';
import {View, Text, TextInput} from 'react-native';
import {HEIGHTXD, WIDTHXD, getFontXD} from '../Config/Functions';
import R from '../assets/R';
const TextField = (props) => {
const {title} = props;
return (
<View style={{marginVertical: 5}}>
<Text
style={{
fontSize: getFontXD(42),
color: R.colors.color777,
marginBottom: 5,
}}>
{title ? title : ''}
</Text>
<TextInput
style={{
height: HEIGHTXD(109),
borderRadius: 7,
borderWidth: 0.7,
borderColor: '#DBDBDB',
fontSize: getFontXD(42),
paddingVertical: 5,
paddingHorizontal: 10,
backgroundColor: 'white',
shadowColor: '#AFA9A9',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
}}
/>
</View>
);
};
export default TextField;
src/components/TextMulti.js 0 → 100644
import React from 'react';
import {View, Text, TextInput} from 'react-native';
import {HEIGHTXD, WIDTHXD, getFontXD} from '../Config/Functions';
import R from '../assets/R';
const TextField = (props) => {
const {title} = props;
return (
<View style={{marginVertical: 5}}>
<Text
style={{
fontSize: getFontXD(42),
color: R.colors.color777,
marginBottom: 5,
}}>
{title ? title : ''}
</Text>
<TextInput
multiline={true}
numberOfLines={3}
style={{
maxHeight: HEIGHTXD(259),
minHeight: HEIGHTXD(169),
borderRadius: 7,
borderWidth: 0.7,
borderColor: '#DBDBDB',
fontSize: getFontXD(42),
paddingVertical: 10,
paddingHorizontal: 10,
backgroundColor: 'white',
shadowColor: '#AFA9A9',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
}}
/>
</View>
);
};
export default TextField;
yarn.lock
......@@ -1207,13 +1207,12 @@
query-string "^6.13.6"
react-is "^16.13.0"
"@react-navigation/drawer@^5.12.4":
version "5.12.4"
resolved "https://registry.yarnpkg.com/@react-navigation/drawer/-/drawer-5.12.4.tgz#0e0f8e0f0b6b67b45ca276212a1c80b05dc3b008"
integrity sha512-0O6OCTgCVnThx0XFsHd/48i6FeV7vxNvJYxeucantcdCwQMWJb46cVMsYGFYt49VwE8VX4Yg/KMZXMPfPxn7Pg==
"@react-navigation/material-top-tabs@^5.3.14":
version "5.3.14"
resolved "https://registry.yarnpkg.com/@react-navigation/material-top-tabs/-/material-top-tabs-5.3.14.tgz#d9c8811d2859c207553ad8e9fc1433d676c57de8"
integrity sha512-Mrr/V8ZfbDKAnRreY1l6V6tzY/YKouI8YcMjZdlMl3lqPuZYBuXvk6/j60hXHTxfljHzw7CJKM3IgPcmNU9OHg==
dependencies:
color "^3.1.3"
react-native-iphone-x-helper "^1.3.0"
"@react-navigation/native@^5.9.2":
version "5.9.3"
......@@ -6073,6 +6072,11 @@ react-native-screens@^2.17.1:
resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.17.1.tgz#c3c0ac750af48741c5b1635511e6af2a27b74309"
integrity sha512-B4gD5e4csvlVwlhf+RNqjQZ9mHTwe/iL3rXondgZxnKz4oW0QAmtLnLRKOrYVxoaJaF9Fy7jhjo//24/472APQ==
react-native-tab-view@^2.15.2:
version "2.15.2"
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.15.2.tgz#4bc7832d33a119306614efee667509672a7ee64e"
integrity sha512-2hxLkBnZtEKFDyfvNO5EUywhy3f/EiLOBO8SWqKj4BMBTO0QwnybaPE5MVF00Fhz+VA4+h/iI40Dkrrtq70dGg==
react-native-vector-icons@^8.0.0:
version "8.0.0"
resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-8.0.0.tgz#deb8b344ff68ea67f4659c8de493fef8a9e717d2"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment