Touchableopacity Not Working Inside an Absolute Positioned View

TouchableOpacity not working inside an absolute positioned View

Importing TouchableOpacity from "react-native-gesture-handler" worked for me

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

Touchablehighlight not clickable if position absolute

Solution was to change the order of the components.

What i originally had:

<TouchableHighLight><Text>Click me</Text></TouchableHighlight>
<View> .... </View>

This was the fix:

<View>...</View>
<TouchableHighLight><Text>Click me</Text></TouchableHighlight>

TouchableOpacity / Pressable Not working on view with position absolute even with position relative React Native

For those who still have trouble I found out about TouchableWithoutFeedback and used instead of onPress i used onPressIn the only downside of this one is that it is only for a single react child for example like this

<View>
   <TouchableWithoutFeedback onPressIn={youFunctionHere}>
       <Image />
   </TouchableWithoutFeedback>

</View>

but if you use it like this

<View>
   <TouchableWithoutFeedback onPressIn={youFunctionHere}>
       <Image />
       <Text></Text>
   </TouchableWithoutFeedback>

</View>

This will not work. Hope it helps you guys

React Native TouchableOpacity not working with position absolute

Resolved this by dynamically adjusting the container height so that the touchableOpacity is within the container. The issue was I positioned the list outside of the parent (as intended by styling) but for onPress to work it has to be inside the parent.

  let autocompleteHeight = autoCompleteValues.length * 65

<View style={[styles.container, {height: autocompleteHeight}]}>

TouchableOpacity outside parent View in absolute positive not works react native

Using TouchableOpacity from react-native-gesture-handler solves the issue of absolute position touches. However, it leads to some styling issues such as the overflow "visible" property not working.

So what you can do is that, for the parent TouchableOpacity you can use react-native's TouchableOpacity and for children you can use react-native-gesture-handler's TouchableOpacity to get the touch to work even when positioned absolutely.

This is the updates code. Please note the imports.

import { useState } from 'react';
import {View, StyleSheet, Text, TouchableOpacity as TouchableRN} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler'

    const App = () => {
        const data = [2, 3, 4, 23]
        const [isOpen, setIsOpen] = useState(false);
        return (
          <View style={{ flex: 1, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center' }}>
            <TouchableRN 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>
                )
              }
            </TouchableRN>
          </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'
        }
      })
    
      export default App;
      

React Native - TouchableOpacity not working on container with position: absolute

I just found the problem, in my App.js I just changed the order of the components.
The Alert component was placed before de NavigationContainer, placing after the NavigationContainer it worked as expected.

Before:

export const App = () => (
  <>
    <StatusBar backgroundColor={theme.background} barStyle="dark-content" />
    <ThemeProvider theme={theme}>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <Alert />
          <Socket>
            <NavigationContainer>
              {...}
            </NavigationContainer>            
          </Socket>
        </PersistGate>
      </Provider>
    </ThemeProvider>
  </>
);