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

Hi,

when I’m trying to wrap my custom component by TouchableOpacity

        <TouchableOpacity onPress={this._goToThreadDetail}>
          <CommonThreadRow {...item} />
        </TouchableOpacity>

so application falls with error: Invariant Violation: Touchable child must either be native or forward setNativeProps to a native component

How to solve this? Thank you.

[vjeux]

The problem with those two components, is that they reach in the internals of the child via setNativeProps and POPAnimationMixin.startAnimation. In the meantime, you can wrap your children into a <View> and it should work fine.

I’m working on a larger proposal that would address those two problems.

The React way is to pass down updated values on every frame as prop and let the child component update on every frame. The issue is that if you don’t implement shouldComponentUpdate in your child component (which is highly likely) then you’re going to re-render large parts of your app and the animation or update will be really slow.

So, in order to “fix” this, what we do is to take the underlying node and set the values directly. This works when you are passing native components such as View or Image, but if you are passing composite components it falls apart. This is a really unfortunate situation as the biggest strength of React is that you can build your app with those composite components.

My idea is to pass down the current opacity as the style prop as usual, and let it any composite component in between manipulate it and thread it through an eventual native component. Then, the trick is to record on what native element and what style attribute it was eventually applied to.

If you can store this information as metadata of the style value, then anytime you want to update it, you can just list all the affected elements and set their value directly.

In order to make this work, you need the value to be opaque, meaning that all the composite components (which are implemented using arbitrary js) can only move it around but not be able to inspect the value. Thankfully for style, this isn’t an issue in practice as all the objects returned from StyleSheet.create are already opaque.

You’ll likely hear more from this crazy idea in the next few weeks 😃

[gsklee]

@vjeux So, umm, where is this crazy idea…? I’m still getting this same error after 2 years…