This document summarizes a presentation about Goibibo's use of React Native for their mobile apps and mobile web. It discusses how React Native allows them to share code between platforms, improve velocity, and maximize engineering bandwidth. It also overviewed some of the challenges of routing, handling webp images, and component lifecycles when supporting both mobile and web. The presentation concluded by discussing Goibibo's plans to open source their React Native codebase.

1. UNBOXING
WEB WITH
REACT
NATIVE
JUNE 29, 2019
REACT NATIVE
REACTJS BANGALORE
Anusheel Singh - @ImAnusheel
Front-end Developer @goibibo_tech

2. AGENDA
Quick introduction of React Native @Goibibo
Marketing vs Product
Quick demo
Architecture Overview
Challenges faced & solved
What’s next?

3. Why we started using
react native?
S A M E U S E R F L O W
N O P L A T F O R M S P E C I F I C U S E - C A S E
H I G H P R O D U C T V E L O C I T Y
E N G I N E E R I N G B A N D W I D T H

4. Marketing
vs Product
App - most
converting
platform with
repeating users
Mobile web - an
entry to new
customers
Know your
platform
challenges

5. QUICK DEMO
O L D V S N E W

6. APP
ARCHITECTURE

7. REACT NATIVE
CODEBASE

8. ABSTRACTION IS KEY

9. Goibibo's React Native (+ Mobile Web)

10. Routing
Challenges
M A K E U R L S
Screen name to url
Next screen props
Take data from store
Make url and push route
L O A D U R L S
First thing first, even
before components get
mounted.
Parse url and update
store.
Store is the source of
truth
U P D A T E U R L S
Emit event
Make url and replace

11. webp image browser
support
A P P F I R S T
Components always import
webp images.
W E B P A C K L O A D E R
Output webp image with
fallback format.
E X T E N D I M A G E
C O M P O N E N T
Use webp image is support
otherwise use fallback
format.

12. Rethink
Lifecycle &
Store
C O M P O N E N T W I L L M O U N T
Server side rendering - no async
call please.
A P P R O U T E S T A C K V S W E B
R O U T E
Data management is important.
W E B R E L O A D I S P A I N F U L
App flow is controlled but in web
user can just reload at any point in
time. So urls are the source of
truth for the state of your app.

13. Component
challenges
ALERT API
Custom implementation using react
native signature and window.alert
SENSITIVE
TOUCHABLE
COMPONENTS
Hack it with onClick
IMAGE COMPONENT
Add support of webp and non-webp
handling.

14. Take aways
M A K E P R O D U C T F O R A L L
U S E R S
M O R E Y O U R E U S E M O R E
S C A L A B L E I S T H E S O L U T I O N
W I T H G R E A T P O W E R C O M E S
G R E A T R E S P O N S I B I L I T Y

15. YES! Soon To Be
Open Sourced.
W H E R E W E A I M T O B E

16. THANK YOU
Q&A
A N U S H E E L S I N G H
@ImAnusheel | @goibibo_tech