Join in as Kurtis Kemple, Tech Lead @MLS, takes us through the choppy waters of React Native Navigation. See how MLS evaluated the options and see which they chose in the end and why.

1. NAVIGATING REACT NATIVE NAVIGATION

2. Tech Lead @ MLS
: @kurtiskemple
: @kurtiskemple
: @kkemple

3. A LITTLE BACK STORY

4. IN 2017 WE WANTED TO RETHINK
OUR UI STRATEGY

5. WE WANTED TO BRING
CONSISTENCY TO OUR FANS
ACROSS PLATFORMS

6. WHILE REDUCING DUPLICATION
AND NUMBER OF TEAMS NEEDED

8. WHY NOT TRY IT ON MOBILE?

9. WE DECIDED TO TACKLE THE
TOUGHEST FEATURES

11. WHERE WE THOUGHT WE
WOULD FIND OUR BIGGEST
HURDLES WE FOUND OUR
BIGGEST SUCCESSES

12. 😍😍😍😍😍😍😍😍😍😍😍

13. UNTIL WE GOT TO NAVIGATION

14. NAVIGATION IS A TOUGH PROBLEM

15. FACEBOOK DECIDED TO LEAVE
IT TO THE COMMUNITY

16. TOUGH PROBLEMS (LIKE
NAVIGATION) TEND TO HAVE
MANY SOLUTIONS

17. ROUGHLY 137 OF THEM

18. SO HOW DO WE CHOOSE?

20. WE ENDED UP ROLLING OUR OWN*

21. JUST FOR THE PROTOTYPE

22. WE KNEW WE WOULD NEED TO CIRCLE
BACK AND REALLY EVALUATE OPTIONS

23. “LOOKS LIKE WE ACTUALLY HAVE TO
DO SOME WORK…”

24. DEFINING OUR NEEDS

25. CROSS PLATFORM

26. FLEXIBLE

27. GREAT DEVELOPER EXPERIENCE

28. STRONG COMMUNITY

29. STABLE

30. SUPPORTS DEEP LINKING

32. NATIVE NAVIGATION REACT NAVIGATION REACT ROUTER

33. NATIVE NAVIGATION

35. PROS

36. FEELS VERY… NATIVE

37. EASY SETUP

38. import Navigation from 'native-navigation';
import ForecastRoute from './src/routes/forecast';
import DayRoute from './src/routes/day';
Navigation.registerScreen('Forecast', () => ForecastRoute);
Navigation.registerScreen('Day', () => DayRoute);

39. VIEW AND TAB NAVIGATION

40. SHARED ELEMENT TRANSITIONS 😍😍
https://github.com/airbnb/native-navigation/blob/master/docs/
guides/shared-element-transitions.md

41. <SharedElementGroup id={poster.id}>
<Touchable onPress={onPress(poster.id)}>
<SharedElement type=“poster" typeId={poster.id}>
<Image source={{ uri: poster.url }} />
</SharedElement>
</Touchable>
</SharedElementGroup>

42. {/* ... */}
<SharedElement type=“poster" typeId={poster.id}>
<Image source={{ uri: poster.url }} />
</SharedElement>
{/* ... */}

43. CUSTOM NAVIGATION
IMPLEMENTATIONS
https://github.com/airbnb/native-navigation/blob/master/docs/guides/
custom-navigation-implementations.md

44. INTEGRATES WITH EXISTING
NATIVE APPS

45. CONS

46. INSTALLATION IS ROUGH
https://github.com/airbnb/native-navigation/blob/master/
docs/installation.md

47. pod 'native-navigation', :path => '../node_modules/native-navigation'
pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork',
'RCTWebSocket',
'RCTAnimation',
'RCTImage',
'RCTNetwork'
]

49. BYE BYE `REACT-NATIVE LINK`

51. NAVIGATION OPTIONS
https://github.com/airbnb/native-navigation/blob/master/docs/guides/
custom-navigation-implementations.md

52. <View style={...}>
<Config
title=“...”
titleColor=“...”
screenColor=“...”
backgroundColor=“...”
/>
<Spacer />
<DayView weatherData={data} />
</View>

53. NOT QUITE STABLE YET*

54. REACT NAVIGATION

56. PROS

57. EASY TO SET UP

58. import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import ForecastRoute from './src/routes/forecast';
import DayRoute from './src/routes/day';
const App = StackNavigator({
Forecast: { screen: ForecastRoute },
Day: { screen: DayRoute },
});
AppRegistry.registerComponent('WeatherReactNavigation', () => App);

59. CROSS PLATFORM

60. VIEW, TAB, AND DRAWER NAVIGATION

61. SCREEN TRACKING
https://reactnavigation.org/docs/guides/screen-tracking

62. HON (HIGHER ORDER NAVIGATION)
https://medium.com/@ericvicenti/playing-with-react-navigation-and-
airbnbs-native-navigation-4e49fc765489

63. TLDR: APPS BUILT WITH REACT
NAVIGATION WILL BE ABLE TO RUN ON
AIRBNB’S NATIVE-NAVIGATION WITHOUT
INVASIVE CHANGES.

64. CONS

65. SCREEN TRANSITIONS CAN LAG*

66. LONG TITLES OVERLAP

67. NAVIGATION OPTIONS
https://reactnavigation.org/docs/navigators/navigation-options

68. export default class ForecastRoute extends Component {
static navigationOptions = {
title: 'Forecast',
header: {
tintColor: ‘...’,
style: {
backgroundColor: ‘...’,
},
},
};
/* ... */
}

69. REACT ROUTER

71. PROS

72. EASY TO SET UP

73. import React from 'react';
import {
NativeRouter as Router,
Switch, Route, Redirect
} from 'react-router-native';
import ForecastRoute from './routes/forecast';
import DayRoute from './routes/day';
export default () => (
<Router>
<Switch>
<Route exact path="/forecast/:type" component={ForecastRoute} />
<Route exact path="/day/:index" component={DayRoute} />
<Redirect to="/forecast/today" />
</Switch>
</Router>
)

74. CROSS PLATFORM

75. DECLARATIVE API

76. IT’S JUST COMPONENTS

77. REDIRECTS🔥 🔥

78. import React from 'react';
import {
NativeRouter as Router,
Switch, Route, Redirect
} from 'react-router-native';
import ForecastRoute from './routes/forecast';
import DayRoute from './routes/day';
export default () => (
<Router>
<Switch>
<Route exact path="/forecast/:type" component={ForecastRoute} />
<Route exact path="/day/:index" component={DayRoute} />
<Redirect to="/forecast/today" />
</Switch>
</Router>
)

79. CONS

80. ROLL YOUR OWN TRANSITIONS
https://reacttraining.com/react-router/native/guides/animation

81. ROLL YOUR OWN ANDROID
BACK SUPPORT

82. export default class ForecastRoute extends Component {
onBack = () => {
const { history: { goBack } } = this.props;
goBack();
}
componentWillMount() {
if (Platform.OS === 'android') {
AndroidBack.addEventListener('hardwareBackPress', this.onBack);
}
}
componentWillUnmount() {
if (Platform.OS === 'android') {
AndroidBack.removeEventListener('hardwareBackPress', this.onBack);
}
}
}

83. Native Navigation React Navigation React Router
Cross Platform
Flexible
Developer
Experience
Strong
Community
Stable
Deep Linking
App Integration

84. OTHER OPTIONS OF NOTE

85. REACT NATIVE NAVIGATION

86. “THERE IS NO BEST NAVIGATION
OPTION, ONLY THE BEST OPTION
GIVEN YOUR REQUIREMENTS”
@kurtiskemple

87. EXAMPLE APPS REPO
https://github.com/kkemple/navigating-react-native-navigation

88. : @kurtiskemple
: @kurtiskemple
: @kkemple