I have a 5 tab react native application. The fifth tab is the profile screen. Here is the profile tab code, I removed a lot of the stuff because this focuses on component did mount:
class Profile extends React.Component {
constructor(props) {
super(props)
this.state = {
user: this.props.user,
bio: "",
storage_image_uri: '',
postCount: 0,
followerCount: 0,
followingCount: 0,
isLoading: true,
navigation: this.props.navigation,
userUID: Firebase.auth().currentUser.uid,
}
this.firestoreRef =
Firebase.firestore()
.collection('posts')
.doc(this.state.userUID)
.collection('posts')
.orderBy("date_created", "desc");
}
componentDidMount() {
console.log("querying the db again")
this.pullUserInfo()
this.unsubscribe = this.firestoreRef.onSnapshot(this.getCollection);
}
componentWillUnmount(){
this.unsubscribe();
}
pullUserInfo = async() => {
await Firebase.firestore()
.collection('users')
.doc(this.state.userUID)
.get()
.then(function(doc){
if (doc.exists) {
this.setState({
postCount: doc.data().postCount,
followerCount: doc.data().followerCount,
followingCount: doc.data().followingCount,
storage_image_uri: doc.data().profilePic,
bio: doc.data().bio,
isLoading: false
})
} else {
console.log("No such document!");
}
}.bind(this))
}
gotToSettings() {
this.state.navigation.navigate('Settings')
}
renderListHeader = () => {
... deleted, just rendering this information
}
render() {
const { navigation } = this.props;
const renderItem = ({ item }) => (
<CurrentUserPostCell
..deleted, unnecessary for this question
/>
);
if(this.state.isLoading){
return(
<View styles = {styles.container}>
<ActivityIndicator size="large" color="#9E9E9E"/>
</View>
)
}
return (
<View>
<FlatList
data={this.state.userPostsArray}
renderItem={renderItem}
keyExtractor={item => item.key}
ListHeaderComponent={this.renderListHeader}
contentContainerStyle={{ paddingBottom: 50 }}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
/>
</View>
)
}
}
However, when I create a new post, follow a new user, or even change the bio from the settings page, the component does not query the db again. I added console.log("querying the db again") in the componentDidMount(), but it only prints when I click on the profile tab for the first time, and never again.
I have tried componentDidUpdate() but that doesn't fix anything either. How can I fix the issue of the component only mounting the first time I click on the tab, and never again?
EDIT: added settings page on request
class Settings extends React.Component {
constructor(props) {
super(props)
this.state = {
user: this.props.user,
oldBio: "",
newBio: "",
profilePic: "",
isLoading: false,
}
}
componentDidMount() {
this.pullBio()
}
//Pull bio from the db, save it to state
pullBio = async() => {
await Firebase.firestore()
.collection('users')
.doc(Firebase.auth().currentUser.uid)
.get()
.then(function(doc) {
if (doc.exists) {
this.setState ({
oldBio: doc.data().bio
})
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}.bind(this));
}
changeBio = async() => {
this.setState({ isLoading: true })
// This should take us to the right place, adding a temp uid where we need it
await Firebase.firestore()
.collection('users')
.doc(Firebase.auth().currentUser.uid)
.set({
bio: this.state.newBio
}, { merge: true })
.then(() => this.setState ({
oldBio: this.state.newBio,
isLoading: false
}))
.catch(function(error) {
console.error("Error storing and retrieving image url: ", error);
});
}
render() {
if(this.state.isLoading){
return(
<View styles = {styles.container}>
<ActivityIndicator size="large" color="#9E9E9E"/>
</View>
)
}
return (
<View style={styles.container}>
<TouchableOpacity
onPress={this.logOut}>
<Text>Sign out ??{this.state.user.username}</Text>
</TouchableOpacity>
<TextInput
style={styles.inputBox}
value={this.state.newBio}
onChangeText={newBio => this.setState({ newBio })}
placeholder={this.state.oldBio}
autoCapitalize='none'
/>
<TouchableOpacity onPress={() => { this.changeBio() }}>
<Text>Change Bio</Text>
</TouchableOpacity>
</View>
)
}
}