Touchable not working

[VinceBT]

Whenever I use TouchableOpacity or TouchableHighlight, I get this error in the console :

bundle.js:707 Warning: Unknown props `onStartShouldSetResponder`, `onResponderTerminationRequest`, `onResponderGrant`, `onResponderMove`, `onResponderRelease`, `onResponderTerminate` on <button> tag. Remove these props from the element.

The page display properly but the onPress event is not fired when I click.

Environment (include versions)

OS: Windows 10
Device:
Browser: Chrome
React Native for Web (version): 0.0.49
React (version): 15.4.0

[necolas]

Any example code? How are you importing components? It looks like the ResponderEventPlugin hasn't been injected.

[VinceBT]

// @flow

import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

export default class Button extends Component {

  _handlePress: Function = () => {
    alert('clicked');
  }

  render() {
    return (
      <TouchableOpacity onPress={this._handlePress}>
        <Text>Click Me !</Text>
      </TouchableOpacity>
    );
  }

}

[necolas]

I can't reproduce the issue on codepen - https://codepen.io/necolas/pen/aBpeMB?editors=0011 - or in the official examples.

[VinceBT]

I downloaded the react-native-web-starter example and tried to use TouchableOpacity and got the same error

[wcastand]

hi, i have the same problem, my config is:

• OSX Sierra 10.12.1
• Browser: Chrome v54.0.2840.98
• react: 15.4.0
• react-native: 0.37.0
• react-native-web: 0.0.50

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
} from 'react-native'

import { observer } from 'mobx-react/native'

const styles = StyleSheet.create({
  home: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  }
});

class Home extends Component {
  render() {
    const { store } = this.props;

    return (
      <View style={styles.home}>
        <Text>Home {store.counter}</Text>
        <TouchableHighlight onPress={() => store.up()}>
          <Text>Up</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={() => store.down()}>
          <Text>Down</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={() => store.reset()}>
          <Text>Reset</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

export default observer(Home)

[wcastand]

I resolved the issue by downgrading to 0.0.49.
i also needed to downgrade react and react-dom to 15.3.1

[brianneisler]

Same as @wcastand. Might be a result of the react 15.4.0 release. They moved a bunch of classes around that RNW directly depends upon.

The issue I'm encountering is that even if I peg react to 15.3.2, react-native-web declares this dependency

"react-dom": "^15.3.2",

which is satisfied by 15.4.0 and seems to be incompatible with react-native-web at the moment.

[necolas]

Yeah this looks like a [email protected] issue (see #255). Was confusing because your reports state that you're using [email protected]

[zubko]

Hi, can you check pls this fork of React Native for Web: Playground?
http://codepen.io/zubko/pen/OWvdXR
Seems that TouchableHighlight isn't working again.
I guess for some other reason, but I'm not sure if it worth making a new GH issue.
This time the error is "Uncaught TypeError: Cannot read property 'setNativeProps' of undefined."

[toannd92]

Hi, go to web index.js and replace ReactDOM.render.... by ReactNative.render(, document.getElementById('root'));