React-native View quantity of comments in real time

I am working on an apk in react-native however I can not make it show the amount of comments that are stored in firebase.

Here I leave my code:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {firebaseDatabase,firebaseAuth} from './firebase';

export default class ArtistBox extends Component<Props> {

  state={
    liked:false,
    likeCount:0,
    commentCount:0

  }

  componentWillMount(){
    const {uid} = firebaseAuth.currentUser
    this.getArtistRef().on('value',snapshot => {
      const artist = snapshot.val()
      if (artist){
        this.setState({
          likeCount: artist.likeCount,
          commentCount: artist.commentCount,
          liked: artist.likes && artist.likes[uid]
        })
      }
    });
  }


  handlePress = () => {
    this.toggleLike(!this.state.liked)
  }

  getArtistRef = () => {
    const {id} = this.props.artist
    return firebaseDatabase.ref("artist/" + id)
  }

  toggleComment = () =>{
    const {uid} = firebaseAuth.currentUser
    this.getArtistRef().transaction(function(artist) {
      if (artist) {
        if (artist.comments && artist.comments[uid]) {
          artist.commentCount--;
          artist.comments[uid] = null;
        } else {
          artist.commentCount++;
          if (!artist.comments) {
            artist.comments = {};
          }
          artist.comments[uid] = true;
        }
      }
      return artist || {
        commentCount:1,
        comments:{
          [uid]:true
        }
      };
    });
  }

  toggleLike = (liked) =>{
    const {uid} = firebaseAuth.currentUser
    this.getArtistRef().transaction(function(artist) {
      if (artist) {
        if (artist.likes && artist.likes[uid]) {
          artist.likeCount--;
          artist.likes[uid] = null;
        } else {
          artist.likeCount++;
          if (!artist.likes) {
            artist.likes = {};
          }
          artist.likes[uid] = true;
        }
      }
      return artist || {
        likeCount:1,
        likes:{
          [uid]:true
        }
      };
    });
  }

  render() {

    const{name,image,likes,comments} = this.props.artist
    const likeIcon = this.state.liked?
        <Icon name="favorite" size={25} color="#e74c3c"/>:
          <Icon name="favorite-border" size={25} color="lightgray"/>
    const {likeCount} = this.state
    const {commentCount} = this.state
    return (
      <View style={styles.artistbox}>
        <Image style={styles.image} source={{uri:image}}/>
        <View style={styles.info}>
          <Text style={styles.name}>{name}</Text>
          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <TouchableOpacity onPress={this.handlePress}>
                {likeIcon}
              </TouchableOpacity>
              <Text>{likeCount}</Text>
            </View>
            <View style={styles.iconContainer}>
              <Icon name="comment" size={25} color="lightgray"/>
              <Text>{commentCount}</Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({

  image:{
    width:110,
    height:110,
  },
  artistbox:{
    backgroundColor:'white',
    flexDirection:'row',
    margin:10,
    elevation:10,
  },
  info:{
    flex:1,
    alignItems:'center',
    flexDirection:'column',
    justifyContent:'center',
  },
  name:{
    fontSize:20,
    marginTop:10,
  },
  row:{
    flexDirection:'row',
    justifyContent:'space-between',
    marginHorizontal:70,
    marginTop:12,
  },
  iconContainer:{
    flex:1,
    alignItems:'center',
  },
});

The number of comments does not appear