React-router: React Native integration

[dabit3]

Version

4.x

Any ideas on how the initial import API for a React Native integration would look? If so, can we discuss?

I would love to start building something out for this, and to have a single place for React routing for both Web / Native.

@grabbou

[dabit3]

Proposed initial api:

import React, { Component } from 'react'
import { Router, Link, Match, Miss } from 'react-router/native'
import About from './About'
import Contact from './Contact'
import NotFound from './NotFound'

export const App = () => (
  <Router>
    <Match pattern='/' component={Home}  initialRoute={true} />
    <Match pattern='/about' component={About} />
    <Match pattern='/contact' componnet={Contact} />
    <Miss component={NotFound} />
  </Router>
)

const Home = () => (
  <View>
    <Text>Home</Text>
    <Link to='/about' />
  </View>
)

[timdorr]

I haven't tested it, but can't you just use a <MemoryRouter> and have it all work?

[dabit3]

Tim any chance you can elaborate on how this would look?

On Saturday, November 19, 2016, Tim Dorr [email protected] wrote:

I haven't tested it, but can't you just use a and have it
all work?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/ReactTraining/react-router/issues/4203#issuecomment-261730808,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABxXAiz38ai7CP8ATWiGGI4rpsQyDk9Lks5q_z-6gaJpZM4K2GiK
.

Nader Dabit
@dabit3 https://twitter.com/dabit3
601-812-8166

[grabbou]

Just keep in mind there's already quite a few routing solutions in React Native available, including ex-navigation and NavigationExperimental. There's advanced work being taken now by Exponent / Facebook and other outside collaborators on coming up with a completely new router building on top of the ones that I mentioned. And so, I'd say it's better for us to collaborate with them and optionally build an interface on top of it. There's no need to duplicate efforts, esp. that native has way more things than web we have to take into account.

[dabit3]

I agree. Looking to have a duplicate API for web developers already versed
and familiar with React Router that can jump into react Native routing
without another API to learn.

On Saturday, November 19, 2016, Mike Grabowski [email protected]
wrote:

If you decide to work on this, just keep in mind there's already quite a
few routing solutions in React Native available, including ex-navigation by
Exponent. There's advanced work being taken now by Exponent / Facebook and
other outside collaborators on coming up with a completely new router
building on top of these all. And so, I'd say it's better for us to
collaborate with them and optionally build an interface on top of it.
There's no need to duplicate efforts, esp. that native has way more things
than web we have to take into account.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ReactTraining/react-router/issues/4203#issuecomment-261744109,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABxXAubvlfYG4hPN7gqvJn4k1_tNRwVjks5q_3jMgaJpZM4K2GiK
.

Nader Dabit
@dabit3 https://twitter.com/dabit3
601-812-8166

[hopglascock]

Currently using v4 in my rn project. Have tried many many solutions and have found that rrv4 works best for me.
@dabit3 This is cut from my App.js
``` import { AppState, AsyncStorage } from 'react-native';
import { Match, MemoryRouter as Router } from 'react-router';
import { Provider } from 'react-redux';
import { Main } from './containers';
import React, { Component } from 'react';
import store from './store';

export default class App extends Component {
render() {
return (



);
}
}
```

Still working out some things. Feel free to ask questions.

[tylermcginnis]

@grabbou @dabit3 I'd agree with you if we weren't talking about React Router here. From my experience routing tends to be one of the bigger issue for new devs in React Native and by being able to use a router they're already familiar with (react router), you essentially solve that problem. Not saying I don't support React Navigation but I don't think trying to improve the React Router experience on native causes anyone harm.

[Andreyco]

@tylermcginnis @hopglascock When using RR4 in RN project do you get experience similar to native one? Are you able to push/pop screen, ... with screen transitions (and so on). I've never tried RR4 with RN, I think I should explore it.

While I agree having familiar API for web and native would be win, I put native experience on higher position when developing native apps. Native routing patterns differ from web. Right now, RN navigation is not ideal but as mentioned above guys from Facebook & Exponent are going great job with ex-navigation (and ex-navigator before). Also, I believe in AirBnb (and in their soon to be released native navigation) here...

Bringing native behaviour into RR does not make sense for me. RR should solve one thing and solve it well.

[tuckerconnelly]

Just tossing this guy in here: https://github.com/tuckerconnelly/react-stack-nav

Works on both web and native :) And the API is the same as web's pushState.

[hopglascock]

@Andreyco

RR should solve one thing and solve it well.

100% agree

When using RR4 in RN project do you get experience similar to native one? Are you able to push/pop screen, ... with screen transitions (and so on).

Yes... However I have done a fair bit of work to get animation to work properly and feel natural. My app uses lots of custom transitions and I found ex-navigation hard to customise.

The way i'm currently doing it is with a route config and HOC for animation. Here is a slice from my route config.

```{
pattern: 'registration',
animation: Pager,
component: RegistrationContainer,
routes: [
{
pattern: 'verify-account',
animation: PagerCard,
component: VerifyAccountScreen,
},
{
pattern: 'create-profile',
animation: PagerCard,
component: CreateProfileScreen,
},
{
pattern: 'account-security',
animation: PagerCard,
component: SecureProfileScreen,
},
],
},

Before I export the route config I map over it and wrap the components if they have an animation

if(route.animation) {
return {
...route,
animated: true,
component: route.animation(route.component),
routes: route.routes ? route.routes.map(mapAnimComponentsRecursively) : null,
};
}
```

The animation Components listen for match and location changes and handle the animation.

I have done quite a lot of work on this and am considering creating a package for some of these animation HOC or blog describing them in more detail...

If y'all would be interested in something like that?

[Andreyco]

@hopglascock this is very interesting. Definitely interested in your solution. Be it package, or blog post... or both!

[dabit3]

@hopglascock This looks really cool, I've been trying to figure something like this out and you def seem to be on to something..

[dabit3]

@ryanflorence check out this animation implementation, seems legit

[tylermcginnis]

@hopglascock I would LOVE to hop on a video call and get a walk through of your implementation so far. We're super interested in making v4 work great on native and I'd love to pick your brain. Would you mind DMing me on Twitter and we can set something up?

[dabit3]

Looks like this is already coming along good https://twitter.com/ryanflorence/status/804855843048943616 🔥 so I'll go ahead and close this for now.