2

Facing an issue with React Tab events with mobile devices. I am getting an error below. My main issue is that I am not sure should I still use react-tao-event-plugin or is there some react native way to deal with this?

I have "react-tap-event-plugin": "^1.0.0" installed as npm package. I am also calling the tap event seem my, main.js, app.js and route.js files. 

Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. 
    in button (created by EnhancedButton)
    in EnhancedButton (created by RaisedButton)
    in div (created by Paper)
    in Paper (created by RaisedButton)
    in RaisedButton (created by MaterialButton)
    in MaterialButton (created by Home)
    in div (created by Home)
    in div (created by Home)
    in div (created by Home)
    in Home (created by Connect(Home))
    in Connect(Home) (created by RouterContext)
    in div (created by App)
    in MuiThemeProvider (created by App)
    in App (created by RouterContext)
    in RouterContext
    in Provider

Main.js -->

import 'whatwg-fetch';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { Router, browserHistory } from 'react-router';
import injectTapEventPlugin from 'react-tap-event-plugin';
import configureStore from './store/configureStore';
import getRoutes from './routes';


// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

const store = configureStore(window.INITIAL_STATE);

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory} routes={getRoutes(store)}/>
  </Provider>,
  document.getElementById('app')
);

App.js --> 

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Header from './Header';
import Footer from './Footer';

class App extends React.Component {
  render() {
    return (
      <MuiThemeProvider>
        <div>
          <Header/>
          {this.props.children}
          <Footer/>
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

Routes.js -->

import React from 'react';
import { IndexRoute, Route } from 'react-router';
import App from './components/App';
import Home from './components/Home';
import Contact from './components/Contact';
import NotFound from './components/NotFound';
import Login from './components/Account/Login';
import Signup from './components/Account/Signup';
import Profile from './components/Account/Profile';
import Forgot from './components/Account/Forgot';
import Reset from './components/Account/Reset';

export default function getRoutes(store) {
  const ensureAuthenticated = (nextState, replace) => {
    if (!store.getState().auth.token) {
      replace('/login');
    }
  };
  const skipIfAuthenticated = (nextState, replace) => {
    if (store.getState().auth.token) {
      replace('/');
    }
  };
  const clearMessages = () => {
    store.dispatch({
      type: 'CLEAR_MESSAGES'
    });
  };
  return (
    <Route path="/" component={App}>
      <IndexRoute component={Home} onLeave={clearMessages}/>
      <Route path="/contact" component={Contact} onLeave={clearMessages}/>
      <Route path="/login" component={Login} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
      <Route path="/signup" component={Signup} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
      <Route path="/account" component={Profile} onEnter={ensureAuthenticated} onLeave={clearMessages}/>
      <Route path="/forgot" component={Forgot} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
      <Route path='/reset/:token' component={Reset} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
      <Route path="*" component={NotFound} onLeave={clearMessages}/>
    </Route>
  );
}
Kimmo Hintikka
  • 13,472
  • 7
  • 34
  • 63
  • Linked to http://stackoverflow.com/questions/24335821/can-i-fastclick-reactjs-running-in-cordova/34015469#34015469 ,but I am not sure if the answer there is still correct or if I misunderstand it. – Kimmo Hintikka Sep 26 '16 at 14:23
  • Have you tried importing it and invoking it specifically where it is needed instead of only at a top level? I only say this because the example has it in the component where the onTouchTap is actually being used. – ajmajmajma Sep 26 '16 at 15:00
  • Actually, I haven't as this way worked in one other app I worked with. Anyway, I am going to test that now. – Kimmo Hintikka Sep 26 '16 at 15:05
  • I have no idea if it will work, I don't use material UI myself. Just looking at the difference between the SO you linked and your stuff. – ajmajmajma Sep 26 '16 at 15:06
  • 1
    @ajmajmajma just add that as the answer and I accept. Just tested in the home view that is using the MaterialButton. Bit silly of me. My last app this just worked when initiated in main.js for the whole app, but looks like I now have to import, initiate it for each component where it's needed. That said need for the whole plugin seems to be going away as chrome and safari mobile browsers now support onClick event properly. It's only needed for users running old versions of the browsers – Kimmo Hintikka Sep 26 '16 at 15:16
  • Glad it worked! added an answer for you. – ajmajmajma Sep 26 '16 at 15:23

1 Answers1

4

Try adding the 

import injectTapEventPlugin from 'react-tap-event-plugin'; 
injectTapEventPlugin();

in the components where it is being used, instead of on the top main.js level.

ajmajmajma
  • 13,712
  • 24
  • 79
  • 133