visibility hidden on react native not working, to take space even not shown?

Update


React Native's StyleSheet now supports toggling visibility using display: 'none' and display:flex.


Not all CSS are supported in React Native, that include visibility: hidden or display:none.

To hide a component, not to render it at all, render empty View or null. Or you want to switch a component visibility, verify react's state



<View>
   { !showClear && (
      <TouchableOpacity
         onPress={() => this.props.clearCompleted()}>
         <Text>Clear Completed</Text>
      </TouchableOpacity>
   }
</View>

showClear is kept in state


In my case, I needed to use the element, so I did something like this:

<TextInput style={{opacity: 0, height: 0}} {...props} />

I hope this works for someone else with my problem.

Tags:

React Native