Element that listen press event inside touchable element

Question

I have an element that listens for press events. How can I wrap this in a touchable element and have my custom element continue listening to events?

I've structure like this

<TouchableOpacity
    onPress={(e) => { console.log(e.nativeEvent); }}
    style={{ flex: 1 }}
>
    <EpubDocumentReader
        toggleEditHighlightModal={this.toggleEditHighlightModal}
        onPress={(cfi, contents) => { console.log(cfi); }}
        styleWidthBook={styleWidthBook}
    />
</TouchableOpacity>

Now TouchableOpacity catches press events but it doesn't invoke the event on child elements.

Answer 1

What are yo trying to achieve?

Your custom component's onPress will never be invoked. Only the TouchableOpacity's onPress will be invoked.

What you can do is that you can setState on the component and on the next render cycle you can pass the event to your EpubDocumentReader.

<TouchableOpacity
    onPress={(e) => {
        console.log(e.nativeEvent);
        this.setState({
            event: e
        })
    }}
    style={{ flex: 1 }}
>
    <EpubDocumentReader
        event={this.state.event}
        toggleEditHighlightModal={this.toggleEditHighlightModal}
        onPress={(cfi, contents) => {
            console.log(cfi);
        }}
        styleWidthBook={styleWidthBook}
    />
</TouchableOpacity>

of course you in your constructor you need to have the initialState set up.

constructor(props){
  super(props)
  this.state = {
    event: null
  }
}