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.