CODEWITHSUNDEEP
react-nativez-indexstylesheetabsolutetouchableopacity
Avinash Kumar Ranjan
Avinash Kumar Ranjan

Reputation: 414

TouchableOpacity inside 'absolute' positioned view

I have following view

  <FlatList
      style={{marginTop: 5,
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      borderRadius: 5, backgroundColor: ACTIVITY_BACKGROUND_COLOR}}
      keyboardShouldPersistTaps={'always'}
      extraData={this.state.suggestions}
      listKey={(item, index)=>index.toString()}
      showsHorizontalScrollIndicator={false}
      horizontal={false}
      data={this.state.suggestions}
      keyExtractor={(index)=>index}
      renderItem={({item, index}) => {
           return (
                 <TouchableOpacity
                 onPress={()=>console.log('pressed')}
                 style={{paddingHorizontal: 10,
                 paddingTop: 5}}>
                       <Text
                       style={[styles.labelText, {
                              color: PRIMARY_COLOR,
                              marginVertical: 5,
                              backgroundColor:ACTIVITY_BACKGROUND_COLOR}]}>{item.description}</Text>
                       </TouchableOpacity>
                      );}}
     />

TouchableOpacity dosen't seem to work inside 'absolute' positioned Flatlist in Android. How ever it works on IOS. I have tried adding zIndex and all but it has no effect and TouchableOpacity is not clickable. Any reason for this behaviour?

Upvotes: 0

Views: 596

Answers (1)

Paweł Lidwin
Paweł Lidwin

Reputation: 1

I had the same problem. Try using react-native-geasture-handler. It worked for me.

import { TouchableOpacity } from 'react-native-gesture-handler';

Upvotes: 0

Related Questions