Ref warning when using component for the content

[Saikedo]

trafficstars

I am using the library for my React-Native-Web project and when I try to use a component for the content of the toolTip, the Chrome console throws an error when the ToolTip appears for the first time. For this code

const ToolTipContent = () => {
    return (
        <View style={{ width: 100, height: 100, backgroundColor: '#ff0000' }} />
    );
};

<Tooltip
    isVisible={isToolTipVisible}
    content={<ToolTipContent />}
    placement="top"
    onClose={() => setIsToolTipVisible(false)}
>
    <TouchableHighlight
        style={{ width: 100, height: 40, backgroundColor: '#0000ff', borderRadius: 8 }}
        onPress={() => setIsToolTipVisible(true)}
    >
        <Text>Press me</Text>
    </TouchableHighlight>
</Tooltip>

It shows an error saying Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?. Check the render method of 'TouchableWithoutFeedback'.

Hovewer if I replace the content with just <View style={{ width: 100, height: 100, backgroundColor: '#ff0000' }} /> it works fine. I tried just remporarily replacing the TouchableWithoutFeedback components inside the react-native-walkthrough-tooltip library with TouchableOpacity and the error was gone.

Any ideas on how we can avoid this warning currently? Should I make a push and change the TouchableWithoutFeedback component with TouchableOpacity and set ActiveOpacity to 1?

Thank you.

[Saikedo]

Wrapping the component in React.forwardRef also seems to fix the issue for some reason.

Basically change ToolTipContent to

const ToolTipContent = React.forwardRef(() => {
  return (
    <View style={{ width: 100, height: 100, backgroundColor: '#ff0000' }} />
  );
});

So I guess another solution will be to do the following inside react-native-walkthrough-tooltip

Declare a function like this const GetContentAsForwardRef = React.forwardRef(() => this.props.content);

And then replace this

<TouchableWithoutFeedback
  onPress={onPressContent}
  accessible={this.props.accessible}
>
  {this.props.content}
</TouchableWithoutFeedback>

with this

<TouchableWithoutFeedback
  onPress={onPressContent}
  accessible={this.props.accessible}
>
  <GetContentForwardRef/>
</TouchableWithoutFeedback>

I can make a push addressing the issue by either method 1 that I mentioned above or with this ForwardRef method mentioned here. Please let me know if that will be helpful.

[gregfenton]

Seems like a reasonable approach, but I have not played with react-native-web enough to be sure.

[Saikedo]

@gregfenton I realized that this is not really specific to React Native Web actually. Also it seems like the correct way to fix this would be to do the const ToolTipContent = React.forwardRef... solution instead of what I proposed originaly.