How to clear Text component using ref in React Native

Question

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...

I don't think text component has clear() method, it's actually for TextInput. You can easily tackle this issue by using state. — PrivateOmega
– PrivateOmega, Commented Apr 4, 2019 at 10:49

avani kothari · Accepted Answer · 2019-04-04 10:50:27Z

2

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:""});

answered Apr 4, 2019 at 10:50

avani kothari

7376 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jaydeep Galani · Accepted Answer · 2019-04-04 10:47:26Z

1

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.

answered Apr 4, 2019 at 10:47

Jaydeep Galani

4,9713 gold badges31 silver badges48 bronze badges

Collectives™ on Stack Overflow

How to clear Text component using ref in React Native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related