I am fairly new to overall app development. I am stuck with this issue.
My objective here is to fetch user data from database and show user's email on "My profile screen".
I am able fetch data from MongoDB using FirebaseID which I already sent during sign up process. I can see it succesfully logged on console. However it doesnt automatically re-renders on the page. I spent 4 days trying to figure out on multiple platforms but I am completely stuck.
Thank you for any kind of help to get me there.
import { Button, StyleSheet, Text, TextInput, View, ScrollView, Image, FlatList} from 'react-native';
import React, {useState, useEffect} from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { auth } from '../firebase';
import * as profilePageAction from '../redux/actions/profilePageAction';
const MyProfileScreen = () => {
const [email, setEmail] = useState('');
const user = auth.currentUser;
const dispatch = useDispatch();
const FirebaseID = user.uid;
console.log("firebaseID", FirebaseID);
const {profilePages} = useSelector(state => state.profilePage);
const myProfile = {...profilePages};
useEffect(() =>{
dispatch(profilePageAction.fetchOwnProfile(FirebaseID))
.then((response) => {
console.log("response: ", response)
setEmail(response.Email);
})
.catch(err => console.log(err));
}, [dispatch]);
return (
<View style={styles.container}>
<View style={styles.list}>
<Text style={styles.email}>text</Text>
<Text style={styles.email}>{myProfile.Email}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
list:{
shadowColor: 'black',
shadowOpacity: 0.25,
shadowOffset: {width: 0 , height: 2},
shadowRadius: 8,
borderRadius: 10,
backgroundColor: 'white',
elevation: 5,
height: 300,
width: 200,
margin: 10
},
email: {
fontSize: 30,
color: '#000000',
margin: 10
},
});
export default MyProfileScreen;