OutsidePressHandler automatically getTriggered in ios

Question

This is my react native code.

This is working fine on android but not in ios. When I click on one of the child, onOutsidePress is get triggered.

<OutsidePressHandler
        onOutsidePress={() => {
            console.log("Pressed outside the box!");
            closePopup();
        }}
    >
        <TouchableOpacity
            onPress={() => {
                navigation.navigate(routes.PROFILE);
                closePopup();
            }}
        >
            <View
                style={{
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between",
                    gap: 10,
                    paddingVertical: 5,
                    paddingHorizontal: 10,
                    borderBottomColor: "#eeeeef",
                    borderBottomWidth: 1,
                }}
            >
                <Text style={{ color: "#000", fontSize: 16 }}>{t("profile")}</Text>
            </View>
        </TouchableOpacity>
        
        <TouchableOpacity
            onPress={() => {
                navigation.navigate(routes.MY_STRATUM);
                closePopup();
            }}
        >
            <View
                style={{
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between",
                    gap: 10,
                    paddingVertical: 5,
                    paddingHorizontal: 10,
                    borderBottomColor: "#eeeeef",
                    borderBottomWidth: 1,
                }}
            >
                <Text style={{ color: "#000", fontSize: 16 }}>
                    {t("my_stratum")}
                </Text>
            </View>
        </TouchableOpacity>

</OutsidePressHandler>

For solution I replaced TouchableOpacity with View and replaced onPress with onTouchStart. Then it's working fine.

But I have another case where the data is dynamic and more data than these two child, so when I try to scroll it doesn't work. It takes the value on touch.

Answer 1

Hi @Devendra Singh you can go through the below solution

1. Use TouchableWithoutFeedback to handle touch events more precisely.

2. Wrap the dynamic content in a ScrollView to handle scrolling.

   import React from 'react';
   import { View, Text, ScrollView, TouchableWithoutFeedback } from 'react-native';
   import { useNavigation } from '@react-navigation/native';
   
   const YourComponent = ({ data, closePopup, t, routes }) => {
     const navigation = useNavigation();
   
     const handlePress = (route) => {
       navigation.navigate(route);
       closePopup();
     };
   
     return (
       <OutsidePressHandler
         onOutsidePress={() => {
           console.log("Pressed outside the box!");
           closePopup();
         }}
       >
         <ScrollView>
           {data.map((item, index) => (
             <TouchableWithoutFeedback
               key={index}
               onPress={() => handlePress(item.route)}
             >
               <View
                 style={{
                   flexDirection: "row",
                   alignItems: "center",
                   justifyContent: "space-between",
                   gap: 10,
                   paddingVertical: 5,
                   paddingHorizontal: 10,
                   borderBottomColor: "#eeeeef",
                   borderBottomWidth: 1,
                 }}
               >
                 <Text style={{ color: "#000", fontSize: 16 }}>{t(item.label)}</Text>
               </View>
             </TouchableWithoutFeedback>
           ))}
         </ScrollView>
       </OutsidePressHandler>
     );
   };
   
   export default YourComponent;