0

I am passing onLongPress on a Component that has the same function as onClick. I have used useState for both. When I long press the item it opens the menu but again if I Long press the menu stays open.

  
     const resetNavItems = () => {
            setIsFirstComponentOpen(false);
            setIsSecondComponentOpen(false); 
        }

    const onClickItem = useCallback(index => {
        resetNavItems();
        
        if (index === 2) {
            setIsFirstComponentOpen(!FirstComponentOpen);    
        } else if (index === 3) { 
            setIsSecondComponentOpen(!SecondComponentOpen);    
        }
    });

    <TouchableOpacity onLongPress={onClickItem} />
Curious_guy
  • 161
  • 11

1 Answers1

0

Your opposite of !isMembersTrayOpen and !isMoreTrayOpen will always be true because your resetNavItems is called to always set it to false. You could try:

const [FirstComponentOpen, setIsFirstComponentOpen] = useState(false)
const [SecondComponentOpen, setIsSecondComponentOpen] = useState(false)

const onClickItem = useCallback(index => {
  index === 2 ? setIsFirstComponentOpen(true) : setIsFirstComponentOpen(false)
  index === 3 ? setIsSecondComponentOpen(true) : setIsSecondComponentOpen(false)
})

<TouchableOpacity onLongPress={onClickItem} />

if you remove resetNavItems then your original conditions would likely work:

const onClickItem = useCallback(index => {
  if (index === 2) setIsFirstComponentOpen(!FirstComponentOpen);    
  if (index === 3) setIsSecondComponentOpen(!SecondComponentOpen);    
}
DᴀʀᴛʜVᴀᴅᴇʀ
  • 7,681
  • 17
  • 73
  • 127