React Native UI Component Wrap in Touchable

Question

I'm trying to detect when a user presses on a custom UI component I have written (it displays a video feed). I've tried using all the touchable components, and would ideally want to use the TouchableWithoutFeedback component, but none of them detect presses on my component. Additionally, when I select my component with the inspector, I get the error Expected to find at least one React renderer but I'm not sure how to set up my component correctly to have a renderer.

The native UI component:

public class DroneVideoFeedManager extends SimpleViewManager<DroneVideoFeed> {

  @Override
  public String getName() {
    return "DroneLiveVideo";
  }

  @Override
  public DroneVideoFeed createViewInstance(ThemedReactContext context) {
    return new DroneVideoFeed(context, null);
  }
}

My UI component Javascript wrapper is as follows:

import PropTypes from 'prop-types';
import {
  requireNativeComponent,
  ViewPropTypes,
} from 'react-native';

const iface = {
  name: 'DroneLiveVideo',
  propTypes: {
    resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch']),
...ViewPropTypes, // include the default view properties
  },
};

module.exports = requireNativeComponent('DroneLiveVideo', iface);

And my attempt to detect a press:

<TouchableWithoutFeedback
  onPress={() => console.log('pressed!')}
>
  <DroneLiveView
    style={{
      width: '100%',
      height: '100%',
    }}
  />
</TouchableWithoutFeedback>

This is the first time I have attempted to implement a native UI component in React Native, so apologies in advance if I am doing things incorrectly.

Answer 1

I found a solution, it's perhaps a little convoluted and not the best way of doing things but it works!

I changed my javascript wrapper to return a view with my native UI component, and another view above it (using absolute positioning). This view appears to handle touches and allows touchables to work with my component.

My changed UI component wrapper is as follows:

import React, {
  Component,
} from 'react';

import {
  requireNativeComponent,
  View,
} from 'react-native';

class DroneVideo extends Component<{}> {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View
        {...this.props}
      >

        <View
          style={{
            width: '100%',
            height: '100%',
            position: 'absolute',
            zIndex: 2,
          }}
        ></View>

        <DroneVideoNative
          style={{
            width: '100%',
            height: '100%',
            position: 'absolute',
            zIndex: 1,
          }}
        />

      </View>

    );
  }
}

let DroneVideoNative = requireNativeComponent('DroneLiveVideo', DroneVideo);

export default DroneVideo;