Menu
I have TouchableOpacity in a space between flex container that I want to take space even not shown,
My code:
<TouchableOpacity
style={showClear && { visibility: 'hidden' }}
onPress={() => this.props.clearCompleted()}>
<Text>Clear Completed</Text>
</TouchableOpacity>
display: none works but it doesn't take space, the code above dont work but does in web?
568
Custom HideableView Component import React from 'react'; import PropTypes from 'prop-types'; import { View } from 'react-native'; const HideableView = (props) => { const { children, hide, style } = props; if (hide) { return null; } return (<View {... this. props} style={style}>{ children }</View>); }; HideableView.
Is there a display none equivalent in React Native? There is no direct equivalent of display none in React Native - this is because React Native shows and hides elements based on your application state. So rather than setting an elements visibility directly, you would show or hide an element based on a state value.
import React, { Component } from 'react' import { AppRegistry, View, Text, TouchAbleOpacity } from 'react-native' class Example extends Component { removeView(){ // what should I do here? } render(){ return ( <View> <View> // View to be removed <TouchAbleOpacity onPress={() => this.
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.
108
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
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
