brh55 / react-native-masonry

:raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions.
MIT License
1.32k stars 157 forks source link

0.4.0 breaks when onPress is attached #48

Closed srameshr closed 7 years ago

srameshr commented 7 years ago
Error: Touchable child must either be native or forward setNativeProps to a native component
    at invariant (index.ios.bundle?platform=ios&dev=true&minify=false:1672)
    at ensureComponentIsNative (index.ios.bundle?platform=ios&dev=true&minify=false:45144)
    at Object.componentDidUpdate (index.ios.bundle?platform=ios&dev=true&minify=false:45006)
    at measureLifeCyclePerf (index.ios.bundle?platform=ios&dev=true&minify=false:21786)
    at index.ios.bundle?platform=ios&dev=true&minify=false:21989
    at CallbackQueue.notifyAll (index.ios.bundle?platform=ios&dev=true&minify=false:22299)
    at ReactNativeReconcileTransaction.close (index.ios.bundle?platform=ios&dev=true&minify=false:22318)
    at ReactNativeReconcileTransaction.closeAll (index.ios.bundle?platform=ios&dev=true&minify=false:21590)
    at ReactNativeReconcileTransaction.perform (index.ios.bundle?platform=ios&dev=true&minify=false:21564)
    at ReactUpdatesFlushTransaction.perform (index.ios.bundle?platform=ios&dev=true&minify=false:21559)
index.ios.bundle?platform=ios&dev=true&minify=false:12993 Unhandled JS Exception: Touchable child must either be native or forward setNativeProps to a native component
reactConsoleErrorHandler @ index.ios.bundle?platform=ios&dev=true&minify=false:12993
console.error @ index.ios.bundle?platform=ios&dev=true&minify=false:46242
logToConsole @ index.ios.bundle?platform=ios&dev=true&minify=false:16707
logIfNoNativeHook @ index.ios.bundle?platform=ios&dev=true&minify=false:16690
__callFunction @ index.ios.bundle?platform=ios&dev=true&minify=false:4863
(anonymous) @ index.ios.bundle?platform=ios&dev=true&minify=false:4700
__guard @ index.ios.bundle?platform=ios&dev=true&minify=false:4834
callFunctionReturnFlushedQueue @ index.ios.bundle?platform=ios&dev=true&minify=false:4699
(anonymous) @ debuggerWorker.js:72
2index.ios.bundle?platform=ios&dev=true&minify=false:12985 Touchable child must either be native or forward setNativeProps to a native component

This is in version 0.4.0

Here is my component code:

<Masonry
          bricks={[
            uri: 'some-image-url',
            onPress: () => this.props.navigator.push({ screen: 'myScreen' }), // It breaks if I add this onPress
          ]}
          columns={2}
          sorted
          imageContainerStyle={{ }}
        />

It worked fine on 0.3.0

srameshr commented 7 years ago

I figured it out. The child for <TouchableHighlight> should be a immediate native component and can have only one child. Il send a PR.

srameshr commented 7 years ago

Il keep it in reopened state, until its been merged. https://github.com/brh55/react-native-masonry/pull/49