10 Lessons Learned Building
The delivery.com App for Android

Jesse Sessler & Bruno Barbieri

What is delivery.com?

  • E-Commerce Platform
  • Empowers the neighborhood economy
  • Customers can order online

Over 10,000 local merchants

  • Restaurants
  • Grocery Stores
  • Wine and Spirits Shops
  • Laundry and Dry Cleaning Providers

Our Quick History With RN

Started in October with version ~0.11

iOS Only - Integrated into our existing app

Our Quick History With RN

Previous Android app was Phonegap

  • January 2016 - Started Prototyping RN Android App
  • April 2016 - Project started
  • July 2016 - Beta v1 released (~300 users)
  • Today: >50% complete
  • Receiving very positive feedback

Our "Stack"

  • React Native
  • Redux
  • Android Studio
  • Fabric / Crashlytics for crash reporting
  • Google Analytics / Leanplum for tracking

Stats

  • 120 Components
  • 7 Bridged Native Modules
  • 30 Navigation Routes
  • 28 Reducers

Demo Time!

10 Lessons We've Learned Along The Way

1. Dev Environment / Setup is huge

Helpful Scripts

Other helpful links

2. Redux vs State

  • Redux for app-wide state
  • this.state for component state
  • Instance variables when it doesn't affect rendering

Structure:
Views(redux) → Components

3. Navigation Tricks

We're using the legacy Navigator
Experimental was brand new and unstable when we started

Pass navigator into every route

Use InteractionManager.runAfterInteractions for transitions to heavy scenes (docs)

Add a background color to every scene, even if it's white

The "Fake Nav Bar" Hack

4. Improving Large List Performance

Tradeoff between rows loaded & time spent

  • initialListSize: How many rows on first render pass
  • pageSize: How many rows to render per frame
  • scrollRenderAheadDistance: How early to start rendering rows
  • Tweak and find what works for you

Alternative: react-native-sglistview

5. Native Modules

Custom modules we've created:

  • Braintree SDK (Android Pay, Paypal & Venmo)
  • TagManager (GA)
  • Leanplum
  • Twitter (Sharing)

2 JAVA FILES

Your Native Module Package

Your Native Module Class

Synchronous Method

Asynchronous Method

DATATYPES

JS CODE

Import your native module

Synchronous Method

Asynchronous Method

A few things to remember:

6. Parallax and Other Scrolling Tricks

First thought: ScrollView + onScroll + setState

Choppy, setState() is too expensive

Use Animated library instead

Bypass setState, call setValue directly on Animated Values

or

More:

Programmatic scrolling is easy and performant

measureLayout + findNodeHandle (docs)

7. Orientation

8. Sharing Code With Other Platforms

Web, IOS, Android teams all now use React / React Native + Redux

Keep most non-component code in a shared Git repository, which is a dependency through npm

41% of Javascript files written for the app are shared

We're now sharing developers across teams as well!

9. IF YOU SEE SOMETHING,
SAY SOMETHING

OR EVEN BETTER... FIX IT!

If you find a bug, open a github issue

Check first if it's known, then upvote

Use stack overflow for questions (tag react-native)

Contributing

REALLY good way to learn

No need to know Obj-C or Java to contribute

We've had 5 Android contributions so far

Before submitting PRs

  • Look around issues / PRs
  • Check js.coach for existing external packages
  • If in doubt, Ask the FB group or discord first
  • Read contributing guidelines
  • Getting your code merged is
    a time consuming (but rewarding) process
  • In the meantime you can use your fork and build from source

10. Other Various Tips

Use icons over images when possible

react-native-vector-icons has been really easy to use

Fontello for custom icons

React Native moves FAST

  • Almost a new version every 2 weeks
  • Try to always be up to date
  • Expect breaking changes
  • Read release notes (it might fix your bugs)
  • Use R.C. if you wanna help to identify bugs
  • A week after the release is safe for prod. usage

Testing perfomance / animations with dev=true?

Hot reloading? Awesome (most of the time)

  • Good for creating new components and styling
  • App crashes with circular require references
  • Editing Stateless functional components will also crash the app

Test your release APK early and often

  • Android is not as consistent as iOS
  • Hundreds of devices and OS variations
  • Sometimes what you see is NOT what you get
  • Test on as many real devices as you can
  • Consider BETA program

Join our android beta program

https://play.google.com/apps/testing/com.deliverycom/

Email us at androidbetafeedback@delivery.com
and get 10% off all your beta app orders!

THANKS!

@jsessler & @brunobar79

Slides: http://bit.ly/dcom-android-rn