Skip to content
This repository has been archived by the owner on Oct 27, 2021. It is now read-only.

Latest commit

 

History

History
62 lines (41 loc) · 1.43 KB

REACT_NATIVE_WEB.md

File metadata and controls

62 lines (41 loc) · 1.43 KB

React Native Web

Getting Started with RNW

The quickest way to get started with React Native Web (assuming you already have a project setup) is to create a folder called routing (or something similar) and then create two files in there. Routing.web.js and Routing.native.js

Then you can use the following code:

Routing.web.js:

export {
  BrowserRouter as Router,
  Link,
  Switch,
  Route,
  Redirect,
} from 'react-router-dom';

Routing.native.js

export { NativeRouter as Router, Link, Redirect } from 'react-router-native';

export { Navigation as Switch, Card as Route } from 'react-router-navigation';

And then in your App.js

import { Router, Switch, Route } from './routing/Routing';

class MyApp extends Component {
  ...

  render(){
    return (
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
        <Route path="/:user" component={User}/>
        <Route component={NoMatch}/>
      </Switch>
    )
  }   
}

And that would enable you to use routing as you would normally use it in any REACT app with React-Router-Dom

Bonus

Here is a starter repo for React Native web that includes the routing out of the box:

https://github.com/joefazz/react-native-web-starter/tree/navigation-react-router