Touchable Opacity is not working with HeaderComponent

[WenLonG12345]

Thanks for this awesome library!

I had a custom header component but no idea why TouchableOpacity is not working.

Here is the screenshot.

<ImageView
        images={imageModalUrl}
        imageIndex={0}
        visible={showImageModal}
        onRequestClose={_closeImageModal}
        swipeToCloseEnabled
        HeaderComponent={({imageIndex}) => <ImageModalHeader/>}
/>

const ImageModalHeader = ({ appModel, dispatch }) => {

    const closeImageModal = () => {
        console.log('CLOSE');
        dispatch({
            type: 'appModel/updateState',
            payload: {
                showImageModal: false,
                imageModalUrl: [],
            }
        });
    };

    return (
        <View style={styles.container}>
            <TouchableOpacity> <-- not working
                <DownloadIcon
                    style={{ marginRight: 10 }}
                />
            </TouchableOpacity>
            <TouchableOpacity onPress={closeImageModal}>. <-- not working 
                <CloseIcon />
            </TouchableOpacity>
        </View>
    );
};

Is there any mistake I made? Please give me some hint in implementing custom header component. 💯

[Aryan6290]

Facing the same problem, any solution?

[ishaba]

Does something from here solves your problem? https://stackoverflow.com/questions/53548361/react-native-touchableopacity-onpress-not-working-on-android

[Aryan6290]

No no, even though the Pressable appears the onPress method does nothing, i think its a problem with this library

[ShahoodHussain77]

For any one looking for solution
I wrap the touchableopacity inside of the view, and pass the zIndex in styles on view tag.

const imageHeader = () => { return( <View style={{zIndex:999}}> <TouchableOpacity onPress={()=>alert('working')}> </TouchableOpacity> </View> ) }