CODEWITHSUNDEEP
reactjsreact-nativetextviewshow-hide
Anilkumar iOS Developer
Anilkumar iOS Developer

Reputation: 3755

Text/View is not hiding in react native

I am trying to hiding the Text/View based on flag value in my react native. But, Its not hiding.

Here is my code

Class.js file

     componentDidMount() {
        this.setState({
          isHidden: true
        });
      }

      constructor(props) {
        super(props);
        this.state = {
          isHidden: false,
    };
      }

render() {
    console.log('renderer');
    const { isHidden } = this.state;
        return (
          <View style={styles.container}>
            <View style={styles.container}>
              //some other objects showing
                  <Text style={styles.Text} hide={isHidden}>
                    Date is Jan 02
                  </Text>
                //some other objects showing
                  <Text style={styles.Text} hide={isHidden}>
              </View>
              </View>
            );
          }
        }

But, Its not hiding even the flag value is true. Am I missing something here?

Upvotes: 0

Views: 2778

Answers (3)

Mounir Dhahri
Mounir Dhahri

Reputation: 214

React-Native Text doesn't have a hide prop. You can get the desired effect this way {!this.state.isHidden}<Text>....</Text>

I took a look at your code and I have some remarks.

It's adviced always to Prevent usage of setState in componentDidMount (no-did-mount-set-state). Calling setState() in this method will trigger an extra rendering, but it is guaranteed to flush during the same tick. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state.

So it causes no visible side-effects.

Use this pattern with caution because it often causes performance issues. So Unless you are, doing server-rendering, anything that requires a browser environment must go in componentDidMount, since that runs client-only, but componentWillMount runs on both client and server.

Upvotes: 0

Lokesh Kumar Meena
Lokesh Kumar Meena

Reputation: 501

Try this if this helps. React does not have any hide attribute so you have to condtionally render the text field on the basis of isHidden variable

 (!isHidden)?<Text style={styles.Text}>Date is Jan 02</Text>: ''

Upvotes: 0

tombraider
tombraider

Reputation: 1167

I'm not a React Native developer, however, from the looks of the documentation the Text component does not have a hide prop. If you were to approach this from a standard React point-of-view, you would either add the appropriate functionality to your component (which I presume you cannot do), or change your render method:

class Test extends Component {
    render() {
        return (
            {!this.state.isHidden && <Text style={styles.text}>Exciting copy...</Text>}
        )
    }
}

Upvotes: 4

Related Questions