add profile, remove device icon border, increase icon size

AppNavigation.js

@@ -39,11 +39,13 @@ import LoginScreen from './screens/Public/LoginScreen';
 import RegisterScreen from './screens/Public/RegisterScreen';
 import RegisterSuccess from './screens/Public/RegisterSuccess';
 import SendEmailScreen from './screens/Public/SendEmailScreen';
+import ProfileScreen from './screens/Private/ProfileScreen/ProfileScreen';
 
 const defaultNavigationOptions = {
 	headerStyle: {
 		backgroundColor: color.primary,
 		borderColor: 'transparent',
+		height: 80,
 	},
 	headerTintColor: '#fff',
 	headerTitleStyle: {
@@ -65,6 +67,16 @@ const HomeStack = createStackNavigator(
 	}
 );
 
+const ProfileStack = createStackNavigator(
+	{
+		Profile: ProfileScreen,
+	},
+	{
+		headerLayoutPreset: 'center',
+		defaultNavigationOptions,
+	}
+);
+
 const SmartMeterStack = createStackNavigator(
 	{
 		// SmartMeter: SmartMeterScreen,
@@ -237,6 +249,7 @@ const WithBottomTabStack = createBottomTabNavigator(
 const MainStack = createStackNavigator(
 	{
 		Home: HomeStack,
+		Profile: ProfileStack,
 		WithBottomTab: WithBottomTabStack,
 		Camera: CameraStack,
 		McbLink: McbStack,

reduxStore/actions/cerrentUserAction.js

+import { fireStore } from '../../firebase';
+
 export const GET_CURRENT_USER = 'GET_CURRENT_USER';
 
-export const getCurrentUserAction = (displayName, email, emailVerified, phoneNumber, uid) => ({
+export const getCurrentUserAction = (
+	displayName,
+	email,
+	emailVerified,
+	phoneNumber,
+	uid,
+	firstName,
+	lastName,
+	profileImg
+) => ({
 	type: GET_CURRENT_USER,
 	displayName,
 	email,
 	emailVerified,
 	phoneNumber,
 	uid,
+	firstName,
+	lastName,
+	profileImg,
 });
 
-export const getCurrentUser = user => dispatch => {
+export const getCurrentUser = user => async dispatch => {
 	const { displayName, email, emailVerified, phoneNumber, uid } = user;
-	dispatch(getCurrentUserAction(displayName, email, emailVerified, phoneNumber, uid));
+	const currentUser = await fireStore
+		.collection('user')
+		.doc(uid)
+		.get();
+
+	const currentUserData = await currentUser.data();
+	console.log('current user', currentUserData.firstname, currentUserData.surname);
+
+	dispatch(
+		getCurrentUserAction(
+			displayName,
+			email,
+			emailVerified,
+			phoneNumber,
+			uid,
+			currentUserData.firstname,
+			currentUserData.surname
+		)
+	);
 };

reduxStore/reducers/currentUserReducer.js

@@ -6,6 +6,9 @@ const initState = {
 	emailVerified: '',
 	phoneNumber: '',
 	uid: '',
+	firstName: '',
+	lastName: '',
+	profileImg: '',
 };
 
 const currentUserReducer = (state = initState, action) => {
@@ -18,6 +21,9 @@ const currentUserReducer = (state = initState, action) => {
 				emailVerified: action.emailVerified,
 				phoneNumber: action.phoneNumber,
 				uid: action.uid,
+				firstName: action.firstName,
+				lastName: action.lastName,
+				profileImg: action.profileImg,
 			};
 		default:
 			return state;

screens/Private/ProfileScreen/ProfileScreen.js

+import React from 'react';
+import { Text, Card, Icon, Button, ActionSheet } from 'native-base';
+import { View, StyleSheet } from 'react-native';
+import { HeaderButtons, Item } from 'react-navigation-header-buttons';
+import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
+import { theme, color } from '../../../constants/Styles';
+import { connect } from 'react-redux';
+import { hidden } from 'ansi-colors';
+import { width } from '../../../constants/Layout';
+import { isIphoneX } from '../../../utils/isPhoneX';
+
+const BUTTONS = ['Logout', 'Cancel'];
+const DESTRUCTIVE_INDEX = 0;
+const CANCEL_INDEX = 1;
+
+class ProfileScreen extends React.Component {
+	static navigationOptions = ({ navigation }) => ({
+		title: 'Profile',
+		headerLeft: (
+			<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
+				<Item title="back" iconName="ios-arrow-back" onPress={() => navigation.navigate('SmartMeter')} />
+			</HeaderButtons>
+		),
+		headerRight: (
+			<Icon
+				name="settings"
+				type="SimpleLineIcons"
+				style={{ color: color.white, fontSize: 20, marginRight: 15 }}
+			/>
+		),
+		headerStyle: styles.headerStyle,
+	});
+	render() {
+		const { email, phoneNumber, firstName, lastName, profileImg } = this.props;
+		return (
+			<View style={theme.container}>
+				<View style={styles.headerStyle2}>
+					<Card style={styles.imgProfileContainer}>
+						{profileImg ? (
+							<></>
+						) : (
+							<Icon
+								name="grin-tongue-wink"
+								type="FontAwesome5"
+								style={{ color: '#5b5b5b', fontSize: 65 }}
+							/>
+						)}
+					</Card>
+				</View>
+				<View style={styles.infoContainer}>
+					<Text style={theme.description}>Name</Text>
+					<Text style={styles.textInfo}>{firstName + ' ' + lastName || '-'}</Text>
+					<View style={styles.seperator} />
+					<Text style={theme.description}>Email</Text>
+					<Text style={styles.textInfo}>{email || '-'}</Text>
+					<View style={styles.seperator} />
+					<Text style={theme.description}>Phone No.</Text>
+					<Text style={styles.textInfo}>{phoneNumber || '-'}</Text>
+				</View>
+				<View
+					style={[styles.infoContainer, theme.mt2, theme.rowContainer, { justifyContent: 'space-between' }]}
+				>
+					<Text style={styles.textInfo}>Change Password</Text>
+					<Icon name="chevron-thin-right" type="Entypo" style={{ fontSize: 20, color: color.grey }} />
+				</View>
+				<Button
+					full
+					rounded
+					style={styles.logoutBtn}
+					onPress={() => {
+						ActionSheet.show(
+							{
+								options: BUTTONS,
+								cancelButtonIndex: CANCEL_INDEX,
+								destructiveButtonIndex: DESTRUCTIVE_INDEX,
+								title: 'Are you sure want to log out?',
+							},
+							async buttonIndex => {
+								if (buttonIndex === 0) {
+									this.props.navigation.navigate('Login');
+									await AsyncStorage.clear();
+								}
+							}
+						);
+					}}
+				>
+					<Text style={[theme.smallTitle, theme.textWhite]}>LOGOUT</Text>
+				</Button>
+			</View>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	headerStyle: {
+		backgroundColor: color.primary,
+		borderColor: 'transparent',
+		borderBottomWidth: 0,
+		shadowOffset: { height: 0, width: 0 },
+		shadowOpacity: 0,
+		elevation: 0,
+	},
+	headerStyle2: {
+		backgroundColor: color.primary,
+		height: 100,
+		borderBottomLeftRadius: 60,
+	},
+	imgProfileContainer: {
+		borderRadius: 100,
+		width: 120,
+		height: 120,
+		alignSelf: 'center',
+		bottom: -35,
+		alignItems: 'center',
+		justifyContent: 'center',
+	},
+	infoContainer: {
+		backgroundColor: color.white,
+		marginTop: 90,
+		padding: 20,
+	},
+	textInfo: {
+		...theme.normalText,
+		...theme.textDark,
+	},
+	seperator: {
+		marginVertical: 10,
+		height: StyleSheet.hairlineWidth,
+		backgroundColor: '#d0d0d6',
+	},
+	logoutBtn: {
+		backgroundColor: color.primary,
+		width: width - 40,
+		alignSelf: 'center',
+		paddingVertical: 15,
+		bottom: isIphoneX() ? 45 : 10,
+		position: 'absolute',
+	},
+});
+
+const mapStateToProps = state => ({
+	email: state.currentUserReducer.email,
+	phoneNumber: state.currentUserReducer.phoneNumber,
+	firstName: state.currentUserReducer.firstName,
+	lastName: state.currentUserReducer.lastName,
+	profileImg: state.currentUserReducer.profileImg,
+});
+
+const mapDispatchToProps = {};
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(ProfileScreen);

screens/Private/SmartMeterScreen/McbLinkScreen.js

@@ -443,11 +443,13 @@ const styles = StyleSheet.create({
 		marginLeft: 10,
 		alignItems: 'center',
 		justifyContent: 'center',
+		borderWidth: 0,
+		borderColor: 'transparent',
 	},
 	electronicIcon: {
 		tintColor: color.primary,
-		width: 24,
-		height: 24,
+		width: 30,
+		height: 30,
 		resizeMode: 'contain',
 		marginBottom: 10,
 	},

screens/Private/SmartMeterScreen/SmartMeterScreen.js

 import React, { PureComponent } from 'react';
-import { Text } from 'native-base';
+import { Text, Icon } from 'native-base';
 import { FlatList, View, StyleSheet, RefreshControl } from 'react-native';
 import { theme, color } from '../../../constants/Styles';
 import MeterCard from '../../../components/MeterCard';
@@ -13,6 +13,14 @@ import { SearchBar } from 'react-native-elements';
 class SmartMeterScreen extends PureComponent {
 	static navigationOptions = ({ navigation }) => ({
 		title: 'Home',
+		headerLeft: (
+			<Icon
+				name="user"
+				type="AntDesign"
+				style={{ color: color.white, fontSize: 20, marginLeft: 15 }}
+				onPress={() => navigation.navigate('Profile')}
+			/>
+		),
 		headerRight: (
 			<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
 				<Item