unknown situation: can not click when AuxiliaryPreview near the bottom

[fukemy]

Hi, I dont know how to explain to you my problem, but the problem seem easy to reproduce, just define view near the bottom, then show context menu with AuxiliaryPreview in bottom, then the area near bottom is unable to click.

You can see my video here: https://streamable.com/sm3487 ( too big so I upload to video host). You can see the video when is done uploading.

In the video, I can not click into 2nd row emoji, but the first row can click normally, I need to show keyboard to clickable to this 2nd row

[dominicstop]

hi, i'm going to try and make a repro first before i can try and fix the bug asfgsahcsfjsdgjldfjgldfj

[fukemy]

hi, did u reproduced this problem? I got same issue for same situation: 1 . Make ScrollView 2. Make sure data need to scroll to get bottom of view 3. Got same problem

https://user-images.githubusercontent.com/8202437/193491713-0e362fe1-19c7-44ce-bf2e-294749a6c590.mov

[fukemy]

Here is my class to show auxiliaryPreview if u need:

import React, { useContext } from 'react'
import { Image, TouchableOpacity, View } from 'react-native'
import { ThemeContext } from '../../context/ThemeContext'
import { groupArrayOfObjects } from '../../utils/apputils/AppUtils'
import { getReactionIcon } from '../../utils/apputils/message/MessageUtils'
import { LinkMsgReactionType } from '../../utils/apputils/TypeConstant'
import * as Animatable from 'react-native-animatable'
import FastImage from 'react-native-fast-image'
import uuid from 'react-native-uuid'
import Animated, { BounceInUp, FadeInDown, Layout, LightSpeedInLeft } from 'react-native-reanimated'
import { MasterInfoContext } from '../../context/MasterInfoContext'


export const CommentChooseReact = ({ cmt, handleChoosenMessageReaction, dismiss}) => {
    const { theme } = useContext(ThemeContext)
    const { masterInfo } = useContext(MasterInfoContext)
    
    const reactions = cmt.Reactions
    const reactByCurrentUser = reactions.filter(r => r.ReactBy === masterInfo.user.id)
    const allReactionsTypeByYou = Object.keys(groupArrayOfObjects(reactByCurrentUser, 'Type'))
    console.log('reactByCurrentUser', reactByCurrentUser)
    console.log('allReactionsTypeByYou', allReactionsTypeByYou)

    const renderReactionButton = (type) => {
        // return <Animated.View
        //     entering={LightSpeedInLeft}
        //     exiting={FadeInDown}
        //     layout={Layout.springify()}>
           return <TouchableOpacity                 
                onLongPress={null}
                onPressOut={null}
                onPressIn={null}
                onPress={() => {
                    dismiss()
                    console.log('choose reaction', type)
                    setTimeout(() => {
                        handleChoosenMessageReaction(cmt, type, allReactionsTypeByYou.includes(`${type}`))
                    }, 0);//context menu bug flickering by change data state when view is dismissing
                }}
                style={{
                    width: 36,
                    height: 36,
                    borderRadius: 18,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: allReactionsTypeByYou.includes(`${type}`) ? theme.lightBlue : '#FFFFFF40',
                    margin: 8
                }}>
                <FastImage
                    source={getReactionIcon(type)}
                    style={{
                        width: 24,
                        height: 24
                    }} />
            </TouchableOpacity>
        //</Animated.View>
    }
    return(
        <View style={{
            // paddingTop: 5,
            // paddingBottom: 5,
        }}>
            <View style={{
                flexDirection: 'row'
            }}>
                {renderReactionButton(LinkMsgReactionType.Like)}
                {renderReactionButton(LinkMsgReactionType.Dislike)}
                {renderReactionButton(LinkMsgReactionType.Love)}
                {renderReactionButton(LinkMsgReactionType.Broken)}
            </View>
            <View style={{
                flexDirection: 'row'
            }}>
                {renderReactionButton(LinkMsgReactionType.Funny)}
                {renderReactionButton(LinkMsgReactionType.Sad)}
                {renderReactionButton(LinkMsgReactionType.Surprise)}
                {renderReactionButton(LinkMsgReactionType.Angry)}
            </View>
        </View>
    )
}

reactions.zip

[dominicstop]

Hello, the reason why it's not receiving any touch events is because the aux. view is offscreen (i'm just nudging it by some offset so it appears inside of the screen).

Here's the full explanation:

Any portion of subview that is outside of its superview's bounds won't receive touch events. Touch events will only be passed along and recognized by portions of the subview that are within the bounds of its superview.

I'm not really sure how to fix it yet, unfortunately

[fukemy]

hi, did u try this solution? https://stackoverflow.com/a/41256403/1308590

[fukemy]

I saw this tutorial can fixed it's already in native side, but I dont know how to apply with aux view when received it from brigde https://zendesk.engineering/ios-how-to-capture-touch-events-outside-uiview-bounds-bc7461970788

[fukemy]

i think we can override method

pointInside:withEvent:

inside aux. parent view

[fukemy]

@dominicstop thanks for update. https://github.com/dominicstop/react-native-ios-context-menu/commit/684e1e18310947cce90b70ba29933521f122465b