não limpa o TextInput | React Native parte 1: Criando apps nativas com JavaScript e React

Somente no emulador do iPhone é que da problema. O Android funcionou perfeitamente. Por algum motivo ele não limpa o TextInput. Alguém tem alguma ideia do motivo?

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    FlatList,
    TouchableOpacity,
    Dimensions,
    TextInput
  } from 'react-native';


type Props = {};
export default class Post extends Component<Props> {
    constructor(props){
        super(props);
        this.state = {
            foto: this.props.foto,
            valorComentario: ''
        }
    }

    carregaIcone(likeada) {
        return likeada ? require('../../resources/img/s2-red.png') : 
                         require('../../resources/img/s2-white.png');
    }
    like() {
        const { foto } = this.state;

        let novalista = [];
        if (!foto.likeada) {
            novalista = [...foto.likers,
                        {login:'Belclei'}];
        } else {
            novalista = foto.likers.filter(liker => {
                return liker.login !== 'Belclei'
            })
        }

        const fotoAtualizada = {
            ...foto, 
            likeada: !foto.likeada,
            likers: novalista
        }
        this.setState({foto: fotoAtualizada});
    }

    exibeLikes(likers){
        if (likers <= 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: 'Belclei',
            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: foto.urlPerfil}} style={styles.avatar}/>  
                    <Text>{foto.loginUsuario}</Text>
                </View>
                <Image source={{uri: foto.urlFoto}} style={styles.foto}/>    
                <View style={styles.rodape}>
                    <TouchableOpacity onPress={ this.like.bind(this) }>
                        <Image source={this.carregaIcone(foto.likeada)} 
                                                      style={styles.botaoDeLike}/>    
                    </TouchableOpacity> 
                    {this.exibeLikes(foto.likers)}
                    {this.exibeLegenda(foto)}

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

        );
    }
}

Opa,

Também encontrei o mesmo problema. Por algum motivo ele ocorre apenas no iOS. Parece ser um problema do React, ainda sem solução.

De todo modo, o que fiz foi o seguinte:

Retirei o parâmetro ref do TextInput
Adicionei o parâmetro value ao TextInput
Alterei o valor do id no método que realiza a ação de adicionar o comentário (afim de evitar alertas de IDs repetidos caso o usuário digite 2x a mesma coisa)

addComent() {
    if (this.state.commentValue === '') {
      return;
    }

    const newList = [...this.state.item.comentarios, {
      id: this.state.item.comentarios+1,
      login: 'Gerson',
      texto: this.state.commentValue
    }];

    const updatedItem = {
      ...this.state.item,
      comentarios: newList
    }

    this.setState({item: updatedItem, commentValue: ''})
 }

render() {
    //...
    <TextInput style={styles.input}
        placeholder='Adicione um comentário...'
        underlineColorAndroid='transparent'
        value={this.state.commentValue}
        onChangeText={text => this.setState({commentValue: text})} />
    //...
}

Estou começando a trabalhar com o React Native. Caso esta não seja a solução ideal, sinta-se a vontade para aprimora-la. :)

Abraços!

Mergulhe em programação