Nested TouchableOpacity in a FlatList is not working properly

[YASH6004]

Description

I want to create custom Dropdown without using library so, I have created a FlatList of TouchableOpacity cards with a Kebab(ThreeDots) dropdown but the dropDown menu is not clicking properly.

Working: i have created a touchable flatlist for cards and nested another touchable for the kebab dropdown which get enable on the basis of id check and render on the basis of checks DropDown menu is not clicking if it moves out from the card area View.

The code : card.js

import {
  FlatList,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Image,
  TouchableWithoutFeedback,
  Pressable,
  SafeAreaView,
} from 'react-native';
import React, {useState, useEffect} from 'react';

const Card = () => {
  const [sideBar, setSideBar] = useState({
    visibility: false,
    id: '',
  });

  const dropDown = (item, index) => {
    setSideBar({
      visibility: !sideBar.visibility,
      id: item.id,
    });
  };

  const renderItem = ({item, index}) => {
    return (
      <TouchableOpacity
        style={[
          sideBar.id === item.id
            ? {
                backgroundColor: '#fff',
              }
            :  {
                // backgroundColor: '#123456',
              },
          {
            // flex: 1,
            borderWidth: 1,
            height: 70,
            marginVertical: 8,
            marginHorizontal: 16,
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            borderRadius: 10,
          },
        ]}
        onPress={(item, index) => {
          setSideBar({
            visibility: !sideBar.visibility,
            id: item.id,
          });
        }}>
        {/* TITLE */}
        <View
          style={{
            flexDirection: 'row',
            flex: 1,
            justifyContent: 'space-between',
            alignItems: 'center',
            marginVertical: 5,
            marginHorizontal: 6,
          }}>
          <Text style={styles.title}>{item.title}</Text>
        </View>

        {/*ADDRESS */}
        <View>
          <Text style={{fontSize: 12}}>1339 Arling Drive ODGEN, UT 84403</Text>
        </View>

        {/*ThreeDOTS */}
        <TouchableOpacity
          // style={{justifyContent:'flex-end',alignItems:'flex-end'}}
          onPress={() => dropDown(item, index)}>
          <Image
            style={{width: 30, height: 30}}
            source={require('../../assets/dots-vertical-512.webp')}
          />
        </TouchableOpacity>
          {sideBar.visibility && sideBar.id === item.id ? (
            <View
              style={{
                position: 'absolute',
                width: 190,
                top: 50,
                right: 10,
                borderWidth: 1,
                alignItems: 'flex-end',
                backgroundColor:'red',
              }}>
              {/*DropDown 1 */}
              <TouchableOpacity
                onPress={() => alert('D!!!')}
                style={{
                  flexDirection: 'row',
                  height: 30,
                  width: '86%',
                  justifyContent: 'space-evenly',
                  alignItems: 'center',
                  marginBottom: 5,
                  borderRadius: 15,
                  backgroundColor: '#abcdef',
                }}>
                <Text
                  style={{
                    fontSize: 13,
                    fontWeight: 'normal',
                    color: '#000000',
                    alignSelf: 'center',
                  }}>
                  Send Text Message
                </Text>
                <Image
                  style={{width: 20, height: 20}}
                  source={require('../../assets/chat.png')}
                />
              </TouchableOpacity>
              {/*DropDown 1 */}
              <TouchableOpacity
                onPress={() => alert('D!!!')}
                style={{
                  flexDirection: 'row',
                  height: 30,
                  width: '86%',
                  justifyContent: 'space-evenly',
                  alignItems: 'center',
                  marginBottom: 5,
                  borderRadius: 15,
                  backgroundColor: '#abcdef',
                }}>
                <Text
                  style={{
                    fontSize: 13,
                    fontWeight: 'normal',
                    color: '#000000',
                    alignSelf: 'center',
                  }}>
                  Send Text Message
                </Text>
                <Image
                  style={{width: 20, height: 20}}
                  source={require('../../assets/chat.png')}
                />
              </TouchableOpacity>
              {/* DropDown 1 */}
              <TouchableOpacity
                onPress={() => alert('D!!!')}
                style={{
                  flexDirection: 'row',
                  height: 30,
                  width: '86%',
                  justifyContent: 'space-evenly',
                  alignItems: 'center',
                  marginBottom: 5,
                  borderRadius: 15,
                  backgroundColor: '#abcdef',
                }}>
                <Text
                  style={{
                    fontSize: 13,
                    fontWeight: 'normal',
                    color: '#000000',
                    alignSelf: 'center',
                  }}>
                  Send Text Message
                </Text>
                <Image
                  style={{width: 20, height: 20}}
                  source={require('../../assets/chat.png')}
                />
              </TouchableOpacity>
            </View>
          ) : null}
      </TouchableOpacity>
    );
  };

  const DATA = [
    {
      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
      title: 'First Item',
      isMenuOpen: false,
    },
    {
      id: '1',
      title: 'Second Item',
      isMenuOpen: true,
    },
    {
      id: '2',
      title: 'Third Item',
      isMenuOpen: false,
    },
    {
      id: '3',
      title: 'Third Item',
      isMenuOpen: false,
    },
    {
      id: '4',
      title: 'Third Item',
      isMenuOpen: false,
    },
    {
      id: '5',
      title: 'Third Item',
      isMenuOpen: false,
    },
    {
      id: '6',
      title: 'Third Item',
      isMenuOpen: false,
    },
    {
      id: '7',
      title: 'Third Item',
      isMenuOpen: false,
    },
    {
      id: '8',
      title: 'Third Item',
      isMenuOpen: false,
    },
    {
      id: '9',
      title: 'Third Item',
      isMenuOpen: false,
    },
  ];

  return (
    // <SafeAreaView>
    <View
      style={[
        sideBar.visibility && sideBar.id
          ? {
              backgroundColor: '#808080',
            }
          : {
              backgroundColor: '#fff',
            },
      ]}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
    // </SafeAreaView>
  );
};

export default Card;

const styles = StyleSheet.create({
  // item: {
  //   flex: 1,
  //   borderWidth: 1,
  //   height: 70,
  //   marginVertical: 8,
  //   marginHorizontal: 16,
  //   flexDirection: 'row',
  //   justifyContent: 'space-between',
  //   alignItems: 'center',
  //   borderRadius: 10,
  // },
  title: {
    fontSize: 17,
    fontWeight: 'bold',
  },
});

Version

0.68.2

Output of npx react-native info

info Fetching system and libraries information... System: OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish) CPU: (4) x64 Intel(R) Core(TM) i5-4570S CPU @ 2.90GHz Memory: 5.62 GB / 15.54 GB Shell: 5.1.16 - /bin/bash Binaries: Node: 16.17.1 - /usr/bin/node Yarn: 1.22.19 - /usr/bin/yarn npm: 8.15.0 - /usr/bin/npm Watchman: Not Found SDKs: Android SDK: API Levels: 23, 28, 29, 30, 31, 32 Build Tools: 19.1.0, 20.0.0, 21.1.2, 22.0.1, 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.1, 28.0.2, 28.0.3, 29.0.0, 29.0.1, 29.0.2, 29.0.3, 30.0.0, 30.0.1, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0, 33.0.0 System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-30 | Wear OS 3 - Preview Intel x86 Atom, android-30 | Google TV Intel x86 Atom, android-30 | Google APIs Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom, android-31 | Intel x86 Atom_64, android-31 | Google TV Intel x86 Atom, android-31 | Google Play Intel x86 Atom_64, android-Tiramisu | Google APIs Intel x86 Atom_64 Android NDK: Not Found IDEs: Android Studio: Not Found Languages: Java: 17.0.2 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.68.2 => 0.68.2 npmGlobalPackages: *react-native*: Not Found

Steps to reproduce

create new project add this Card.js in app.js

Snack, code example, screenshot, or link to a repository

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.