How we share code between React web applications and our React Native app.

1. MUSEFIND &
REACT NATIVE
WWW.MUSEFIND.COM
How we share code between web and mobile

2. WHAT
IS MUSEFIND?
A SAAS platform designed to help brands collaborate with social
media influencers for marketing campaigns
02

3. OUR PLATORMS
Brand Influencer Admin
Influencer

4. THE PLAN:
TO SHARE AS MUCH
CODE AS POSSIBLE
AKA be as lazy as we can
04

5. SASS for styles
Native web elements
Not optimized to use mobile UI
elements
THE PROBLEM WITH
COMPONENTS
05

6. PLAN A:
SHARE JUST THE STATE +
CONFIGURATION LOGIC
AKA our ChatStore
06

8. PROBLEM 1:
WEBSOCKETS
AKA why does nothing just work
08

9. PROBLEM 2:
DESKTOP
NOTIFICATIONS
AKA missing the DOM
09

10. POTENTIAL
PROBLEMS
WITH REACT
-> REACT
NATIVE
-developing for web == assuming a
web environment
- your code (or dependency code)
can rely on that assumption
- solution: build with React Native
in mind
10

11. PLAN B:
SEPARATE PLATFORM-
SPECIFIC FROM PLATFORM-
AGNOSTIC CODE
AKA it finally works
11

12. common styling (styled-components)
common native elements AKA View
instead of div
(ReactXP, react-native-web)
mobile-first approach
THE FUTURE OF
COMPONENT SHARING
12

13. MOBILE FIRST? Find ways to share your
JSX with web, along with everything else
WEB FIRST? Focus on sharing state and
configuration logic, and rebuilding
optimized mobile UIs.
HOW TO SHARE CODE
13

14. THANK
YOU!
QUESTIONS?
Reach out!
Twitter: @scottdomes @themusefind
Medium: @scottdomes engineering.musefind.com
scott@musefind.com
WWW.MUSEFIND.COM