adicionaComentario()

Olá, quando coloco o input e tento enviar, ou seja quando chamo a função adicionaComentario, por algum motivo o qual eu não consegui identificar ainda , o texto não é adicionado para os comentários da foto.

Segue o codigo

class Post extends Component {
  constructor(props){
    super(props);
    this.state = {
      foto:this.props.foto,
      valorComentario:'',
    }
  }

  carregaIcone(likeada){
    return likeada ? require('../assets/heart.png') : require('../assets/emptyHeart.png');
  }

  like(){
    const { foto } = this.state;
    let novaLista = []
    if(!foto.likeada){
        novaLista = [
          ...foto.likers,{login:'meuUsuario'}
          ]
    }else{
      novaLista = foto.likers.filter(liker=>{
        return liker.login !== 'meuUsuario'
      })
    }
    const fotoAtualizada = {
      ...foto,
      likeada: !foto.likeada,
      likers: novaLista

    }
    this.setState({foto: fotoAtualizada})
  }
  exibeLikes(likers) {
    if(likers.length <= 0)
        return;

    return (
        <Text style={styles.likes}>
            {likers.length} {likers.length > 1 ? 'curtidas' : 'curtida'}
        </Text>
    );
}
  exibeLegenda(foto) {
    if(foto.comentario === '')
      return;
    return (
      <View style={styles.comentario}>
        <Text style={styles.tituloComentario}>{foto.loginUsuario}</Text>
        <Text>{foto.comentario}</Text>
      </View>
    )
  }
  adicionaComentario(){
    if (this.state.valorComentario === '')
     return; 
    const novaLista = [...this.state.foto.comentarios,{
      id: this.state.valorComentario,
      login: 'meuUsuario',
      texto: this.state.valorComentario,
    }];
    const fotoAtualizada = {
      ...this.state.foto,
      comentarios:novaLista,
    }
    this.setState({foto:fotoAtualizada, valorComentario:''})
    this.inputComentario.clear();

  }


  render() {
    const { foto } = this.state
    return (
      <View>
      <View style={styles.cabecalho}>
        <Image source={{uri:this.props.foto.urlPerfil}}
          style={styles.fotoPerfil} />  
        <Text>{this.props.foto.loginUsuario}</Text>
      </View>
      <Image source={{uri:this.props.foto.urlFoto}}
          style={{width: width, height: width}} />
      <TouchableOpacity onPress={this.like.bind(this)}>  
        <View style={styles.rodape}>
          <Image style={styles.botaoLike} source={this.carregaIcone(foto.likeada)}/>
        </View>     
      </TouchableOpacity>   
      {this.exibeLikes(foto.likers)}
      {this.exibeLegenda(foto)}

      {foto.comentarios.map(comentario =>{
        <View style={styles.comentario} key={comentario.id}>
          <Text style={styles.tituloComentario}>{comentario.login}</Text>
          <Text>{comentario.texto}</Text>    
    </View>  
      })}
      <View style={styles.novoComentario}>
        <TextInput onChangeText={texto=> this.setState({valorComentario:texto})}ref={input => this.inputComentario = input}placeholder="Adicione um comentário" style={styles.input}/>
      <TouchableOpacity onPress={this.adicionaComentario.bind(this)}>
        <Image style={styles.icone} source={require('../assets/sent.png')}/>
      </TouchableOpacity>    
      </View>  
    </View>
    );
  }
}

Alguém poderia me ajudar ? Obrigado !