CODEWITHSUNDEEP
javascriptreactjsreact-native
Saqy G
Saqy G

Reputation: 806

How to clear Text component using ref in React Native

I wanted to clear Text Component using ref on timeout but can't find. 

<Text style={{ color: "#fff" }} ref={text => this._text = text}>
              {isKeyValid === undefined
                ? null
                : isKeyValid
                ? "Key is been verified."
                : "Your key is invalid or expired."}
</Text>

clearErrorMessages = () => {
   setTimeout(() => {
   //something like that here which i have no idea  
   this._text.clear() 
   }, 2000);
}

Any idea about this guys thanks...

Upvotes: 1

Views: 847

Answers (2)

avani kothari
avani kothari

Reputation: 739

There is no method to clear text in a <Text> component. You can do this: take whatever value you want to display in state variable and set it to empty string when required.

in constructor:

this.state={
  value:"myvalue",
}

in render

<Text>{this.state.value}</Text>

then on any action/function you want to clear the text do this:

this.setState({value:""});

Upvotes: 2

Jaydeep Galani
Jaydeep Galani

Reputation: 4961

You can approach, different method then refs,

take one state and make it false by default in a constructor, and set it to true after time out. Also, use it in your a condition see this,

<Text style={{ color: "#fff" }} ref={text => this._text = text}>
              {isKeyValid === undefined && this.state.isCleared
                ? null
                : isKeyValid
                ? "Key is been verified."
                : "Your key is invalid or expired."}
</Text>

clearErrorMessages = () => {
   setTimeout(() => {
   //something like that here which i have no idea  
   this.setState({isCleared:true});
   }, 2000);
}

Don't forget to initialize it in constructor.

Upvotes: 1

Related Questions