.

AppNavigation.js

@@ -41,6 +41,7 @@ import RegisterSuccess from './screens/Public/RegisterSuccess';
 import SendEmailScreen from './screens/Public/SendEmailScreen';
 import ProfileScreen from './screens/Private/ProfileScreen/ProfileScreen';
 import ChangePasswordScreen from './screens/Private/ProfileScreen/ChangePasswordScreen';
+import EditProfileScreen from './screens/Private/ProfileScreen/EditProfileScreen';
 
 const defaultNavigationOptions = {
 	headerStyle: [
@@ -78,6 +79,7 @@ const ProfileStack = createStackNavigator(
 	{
 		Profile: ProfileScreen,
 		ChangePassword: ChangePasswordScreen,
+		EditProfile: EditProfileScreen,
 	},
 	{
 		headerLayoutPreset: 'center',

reduxStore/actions/cerrentUserAction.js

@@ -24,24 +24,52 @@ export const getCurrentUserAction = (
 });
 
 export const getCurrentUser = user => async dispatch => {
-	const { displayName, email, emailVerified, phoneNumber, uid } = user;
+	const { displayName, email, emailVerified, uid } = user;
 	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,
+			currentUserData.phoneNumber,
 			uid,
-			currentUserData.firstname,
-			currentUserData.surname
+			currentUserData.firstName,
+			currentUserData.lastName
+		)
+	);
+};
+
+export const updateUser = userData => async (dispatch, getState) => {
+	const { currentUserReducer } = getState();
+	const { displayName, email, emailVerified, uid, profileImg } = currentUserReducer;
+	const ref = fireStore.collection('user').doc(uid);
+	const newUserData = {
+		firstName: userData.firstName,
+		lastName: userData.lastName,
+		phoneNumber: userData.phoneNumber,
+	};
+
+	try {
+		dispatch(
+			getCurrentUserAction(
+				displayName,
+				email,
+				emailVerified,
+				userData.phoneNumber,
+				uid,
+				userData.firstName,
+				userData.lastName,
+				profileImg
 			)
 		);
+		await ref.update(newUserData);
+	} catch (error) {
+		console.log('Update user failed!', error);
+	}
 };

screens/Private/ProfileScreen/EditProfileScreen.js

+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { connect } from 'react-redux';
+import { HeaderButtons, Item } from 'react-navigation-header-buttons';
+import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
+import { theme, color } from '../../../constants/Styles';
+import { TextInput } from 'react-native-gesture-handler';
+import { Button } from 'native-base';
+import Modal from 'react-native-modalbox';
+import { width, height } from '../../../constants/Layout';
+import { updateUser } from '../../../reduxStore/actions/cerrentUserAction';
+
+class EditProfileScreen extends React.Component {
+	static navigationOptions = ({ navigation }) => {
+		return {
+			title: 'Profile',
+			headerLeft: (
+				<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
+					<Item title="back" iconName="ios-arrow-back" onPress={() => navigation.goBack()} />
+				</HeaderButtons>
+			),
+		};
+	};
+
+	state = {
+		confirmModal: false,
+		profileImg: this.props.profileImg,
+		firstName: this.props.firstName,
+		lastName: this.props.lastName,
+		phoneNumber: this.props.phoneNumber,
+	};
+	toggleModal = value => {
+		this.setState({ confirmModal: value });
+	};
+	handleSave = () => {
+		const { firstName, lastName, phoneNumber } = this.state;
+		const data = { firstName: firstName, lastName: lastName, phoneNumber: phoneNumber };
+		this.toggleModal(false);
+		this.props.navigation.navigate('Profile');
+		this.props.updateUser(data);
+	};
+
+	render() {
+		const { profileImg, firstName, lastName, phoneNumber, confirmModal } = this.state;
+		return (
+			<View style={theme.container}>
+				<Text style={[theme.normalText, theme.textDark, theme.mt2, { marginLeft: 20 }]}>Edit Profile</Text>
+				<View style={{ backgroundColor: color.white, padding: 20, ...theme.mt2 }}>
+					<Text style={theme.description}>First name</Text>
+					<TextInput
+						value={firstName}
+						onChangeText={text => this.setState({ firstName: text })}
+						style={styles.inputStyle}
+					/>
+					<View style={styles.seperator} />
+					<Text style={theme.description}>Last name</Text>
+					<TextInput
+						value={lastName}
+						onChangeText={text => this.setState({ lastName: text })}
+						style={styles.inputStyle}
+					/>
+					<View style={styles.seperator} />
+					<Text style={theme.description}>Phone number</Text>
+					<TextInput
+						value={phoneNumber}
+						placeholder="e.g. 081-234-5678"
+						onChangeText={text => this.setState({ phoneNumber: text })}
+						style={styles.inputStyle}
+						keyboardType="phone-pad"
+					/>
+				</View>
+				<Button full style={styles.saveBtn} onPress={() => this.toggleModal(true)}>
+					<Text style={[theme.smallTitle, theme.textWhite]}>SAVE</Text>
+				</Button>
+				<Modal
+					isOpen={confirmModal}
+					backdropPressToClose={false}
+					swipeToClose={false}
+					coverScreen
+					style={styles.modalContainer}
+				>
+					<Text style={[theme.smallTitle, theme.textDark, theme.centerText, { marginHorizontal: 40 }]}>
+						Are you sure you want to edit your profile?
+					</Text>
+					<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+						<Button transparent onPress={() => this.toggleModal(false)} style={styles.modalBtn}>
+							<Text style={[theme.smallTitle, { color: color.grey }]}>CANCEL</Text>
+						</Button>
+						<Button onPress={this.handleSave} style={[styles.modalBtn, { backgroundColor: color.primary }]}>
+							<Text style={[theme.smallTitle, theme.textWhite]}>SAVE</Text>
+						</Button>
+					</View>
+				</Modal>
+			</View>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	seperator: {
+		marginVertical: 10,
+		height: StyleSheet.hairlineWidth,
+		backgroundColor: '#d0d0d6',
+	},
+	inputStyle: {
+		...theme.smallTitle,
+		...theme.mt1,
+		...theme.textDark,
+	},
+	saveBtn: {
+		backgroundColor: color.primary,
+		marginHorizontal: 20,
+		marginTop: 40,
+		borderRadius: 100,
+	},
+	modalContainer: {
+		width: width * 0.9,
+		height: height / 4,
+		borderRadius: 20,
+		alignItems: 'center',
+		justifyContent: 'space-evenly',
+	},
+	modalBtn: {
+		flex: 1,
+		marginHorizontal: 20,
+		justifyContent: 'center',
+		borderRadius: 100,
+	},
+});
+
+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 = {
+	updateUser,
+};
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(EditProfileScreen);

screens/Private/ProfileScreen/ProfileScreen.js

@@ -25,9 +25,11 @@ class ProfileScreen extends React.Component {
 				name="settings"
 				type="SimpleLineIcons"
 				style={{ color: color.white, fontSize: 20, marginRight: 15 }}
+				onPress={() => navigation.navigate('EditProfile')}
 			/>
 		),
 	});
+
 	render() {
 		const { email, phoneNumber, firstName, lastName, profileImg } = this.props;
 		return (