Kimmo Hintikka Kimmo Hintikka - 2 months ago 69
Javascript Question

React Material-UI tap event issues using while using "react-tap-event-plugin": "^1.0.0"

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>
);
}

Answer

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.