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