Quantcast
Channel: Active questions tagged touchablewithoutfeedback - Stack Overflow
Viewing all articles
Browse latest Browse all 46

TouchableOpacity outside parent View in absolute positive not works react native

$
0
0

I was making Picker component but what I found is Touchable Opacity in absolute positions outside from it's parent view not works.

const App = () => {  const data = [2, 3, 4, 23]  const [isOpen, setIsOpen] = useState(true);  return (<View style={{ flex: 1, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center' }}><TouchableOpacity style={styles.container} onPress={setIsOpen.bind(null, true)} disabled={isOpen}><Text>3</Text><Image source={require('./assets/downArrow2.png')} />        {          isOpen && (<View style={styles.optionsContainer}>              {                data.map((number, index) => (<View key={index}> <TouchableOpacity onPress={() => { setIsOpen(false) }}><View style={{ padding: 10, paddingRight: 40 }}><Text>{number}</Text></View></TouchableOpacity><View style={{ height: 1, width: '100%', backgroundColor: 'white' }} /></View>                ))              }</View>          )        }</TouchableOpacity></View>  )}const styles = StyleSheet.create({  container: {    width: 48,    paddingVertical: 8,    paddingRight: 5,    paddingLeft: 8,    borderWidth: 1,    borderColor: 'grey',    flexDirection: 'row',    justifyContent: 'space-between',    alignItems: 'center',    position: 'relative'  },  optionsContainer:     position: 'absolute',    top: -1,    left: -1,    backgroundColor: 'grey'  }})

So, There is outer TouchableOpacity Component & inside we are mapping many TouchableOpacity Component where children are in Absolute View.

TouchableOpacity inside it's parent's view works, but not Works outside Parent View with absolute position. Is their someOne to help me out with it???

It even Not works with TouchableNativeFeedback


Viewing all articles
Browse latest Browse all 46

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>