중첩된 TouchableOpacity 에서 onPress 이벤트 감지

이슈 내용

프로필 사진 영역을 선택하면, handleOpenGallery를 호출하여 사진을 가져올 수 있게 하려 했으나, handleOpenGallery 함수를 호출할 TouchableOpacity가 감싸고 있는 프로필 사진 뷰어 영역의 TouchableOpacity 컴포넌트의 onPress가 호출되는 현상

 

React hook form의 Controller 컴포넌트를 사용하고 있고, PickerImage 컴포넌트 내부에서 TouchableOpacity 컴포넌트를 사용하고 있다.

            <Controller
              rules={{
                required: {
                  message: '프로필 사진은 필수입니다..',
                  value: true,
                },
              }}
              control={control}
              render={({ field: { onChange, value } }) => {
                return (
                  <View>
                    <TextLabel>프로필 사진 첨부</TextLabel>
                    <TouchOpacity
                      margin={{ top: '6px', bottom: '8px' }}
                      onPress={() => handleOpenGallery(onChange)}>
                      <PickerImage
                        handleDelete={() => onChange('')}
                        deleteOption={true}
                        pickedImage={value}
                      />
                    </TouchOpacity>
                    <TextCaution>
                      ・ 프로필 사진은 반드시 본인 사진으로 등록해주세요.
                      부적절한 사진은 통보 없이 변경될 수 있습니다.
                    </TextCaution>
                    <TextError>{errors['profileImage']?.message}</TextError>
                  </View>
                );
              }}
              name={'profileImage'}
            />

 

import Image from 'component/atoms/Image';
import TouchOpacity from 'component/atoms/TouchOpacity';
import View from 'component/atoms/View';

const PickerImage = props => {
  const { pickedImage, deleteOption, handleDelete } = props;

  return (
    <View size={{ width: '100px', height: '100px' }}>
      <TouchOpacity size={{ width: '100px', height: '100px' }}>
        <Image
          border={{ width: '0px', radius: '10px' }}
          resizeMode="contain"
          background={{ color: 'white' }}
          size={{ width: '100%', height: '100%' }}
          source={
            pickedImage
              ? { uri: pickedImage }
              : require('assets/img/default.png')
          }
        />
      </TouchOpacity>
      {deleteOption && pickedImage && (
        <TouchOpacity
          position={{ type: 'absolute', bottom: '70px', right: '0px' }}
          padding={{ y: '10px', x: '10px' }}
          onPress={handleDelete}
          size={{ width: '32px', height: '32px' }}>
          <Image
            resizeMode="contain"
            size={{ width: '12px', height: '12px' }}
            source={require('assets/icon/delete-icon.png')}
          />
        </TouchOpacity>
      )}
    </View>
  );
};

export default PickerImage;

 

 

해결 방법

프로필 뷰어의 TouchOpacity를 제거하고 View 컴포넌트로 대체하여 사용