React-native-web: Help point me in right direction: TouchableHighlight not working

[chase-metzger]

The problem

Anytime I use a TouchableHighlight or use a library that uses one, my web version of my app crashes and throws the following error and warning:

Uncaught Invariant Violation: Touchable child must either be native or forward setNativeProps to a native component

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

How to reproduce

Simplified test case: https://codesandbox.io/s/m4v39k3k09 (Not reproduced here but what kind of code I'm trying to run)

Steps to reproduce:

1. Download or look at my repo: https://github.com/chase-metzger/cmTimer-hybrid/
2. run yarn install in the root directory and make sure the latest expo-cli is installed on your system
3. navigate to the packages/web directory and run yarn start

Expected behavior

I was expecting a TouchableHighlight to be able to render and behave like as described in the docs of React Native (and thus React Native for Web since it's supported).

For my particular app:

1. On a long press of the TimerView, the large red view when the app launches, should turn green and then start a countdown when released.
2. While the countdown is running, if another long press is applied the timer will start. (this is when the app crashes)

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.11.2
• React (version): 16.8.3
• Browser: Chrome and Safari (running the latest versions on Windows and macOS)

I'm not sure if this has to do with my monorepo setup or if I'm using incompatible versions of react/-native/-dom? I am using a version of RN not technically supported by RNW because I wanted to continue using hooks as in my original native only version of this app. This is the only error I've received that I cannot resolve the differences between native and web.

TouchableOpacity does work in both the web and native versions of the app but libraries like react-native-elements use TouchableHighlight by default and in some places, I don't think I can override the component used.

Thanks for any help.

[EyMaddis]

Touchables can not wrap everything, hence the error

Uncaught Invariant Violation: Touchable child must either be native or forward setNativeProps to a native component

In your code:
https://github.com/chase-metzger/cmTimer-hybrid/blob/master/packages/common/src/components/TimerView.js#L77
You include a CountdownView which is a functional component. Functional Components do not support refs and therefor the Touchable cannot do ref.setNativeProps(...).
You can solve this by using React.forwardRef with CountdownView and pass the ref down to the underlying view here.

Otherwise just do

<TouchableHighlight ...>
  <View>
    <YourComponent />
  </View>
</TouchableHighlight>

[necolas]

Answer is posted above. Thanks