Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
From React to React Native Web
Search
Yuanhsiang Cheng
November 20, 2019
Programming
0
170
From React to React Native Web
Yuanhsiang Cheng
November 20, 2019
Tweet
Share
More Decks by Yuanhsiang Cheng
See All by Yuanhsiang Cheng
How to rebuild a websocket service by golang and redis
yhsiang
0
1.1k
Rethink React in Elm
yhsiang
0
1.1k
開源與工程師的自我修養
yhsiang
0
180
Sayit in Taiwan
yhsiang
0
140
LY sayit
yhsiang
0
120
Webpack pack your web
yhsiang
17
12k
2015 Summer of ?
yhsiang
0
280
How to be a good wan-jun
yhsiang
1
140
Experience in building isomorphic app
yhsiang
11
740
Other Decks in Programming
See All in Programming
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
180
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
550
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
210
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
120
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
980
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
230
効率的な開発手段として VRTを活用する
ishkawa
1
180
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
210
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
400
コーディングエージェント概観(2025/07)
itsuki_t88
0
100
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Designing for Performance
lara
610
69k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Why Our Code Smells
bkeepers
PRO
337
57k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
GraphQLとの向き合い方2022年版
quramy
49
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Designing Experiences People Love
moore
142
24k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Statistics for Hackers
jakevdp
799
220k
Transcript
From React to React Native Web LY Cheng @ Maicoin
HQ 2019.11.20
Agenda • React Native Web introduction • Why React Native
Web • How MaiCoin use RNW
React Native • March 26, 2015 • Learn once, write
anywhere.
Expo • A framework and a platform for universal React
applications
RN Code example
React Native Web • Author: Nicolas https://github.com/necolas • July 6,
2015 • Write once, render anywhere.
Who use RNW • Twitter, Major League Soccer, Flipkart, Uber,
The times, DataCamp • MaiCoin!
Twitter use RNW
Twitter use RNW
Twitter use RNW
RNW Setup • npm install react react-dom react-native-web • webpack.config.js
RNW Setup • Babel module-resolver: alias: "^react-native$": "react-native-web" • Jest
preset: "react-native-web" • Flow module.name_mapper='^react-native$' -> 'react-native-web'
RNW Code example
Problems we met • Shim modules • Native only: Alert
-> window.alert • Web only: 3rd library • Platform workaround • TouchableOpacity: onPress -> onClick • React navigation • Screen Path -> URL query string
Problems we met • Device detection • Cookie • Header
• Flexbox • Flex: 1 vs flexGrow: 1
UI Abstraction
UI Abstraction • State disable onPress
UI Abstraction • Style textColor backgroundColor
UI Abstraction • Theme colors set
UI Abstraction • Renderer
UI Abstraction
MAX • Rails backend • React native app • React
Redux • Progressive React native web app • Assets page (https://max.maicoin.com/funds) • History page (https://max.maicoin.com/history/orders) • Trading page (https://max.maicoin.com/trades/btctwd)
MAX
MAX
MAX
MAX
MaiCoin • Rails backend • GraphQL API gateway • React
native app • React native web app (for mobile only) • https://maicoin.com
MaiCoin
MaiCoin
MaiCoin
React Native Web • Pros • Codebase consistent • Development
experience • No more CSS methodology • Cons • Upstream bugs • Cross platform testing
Special Thanks • MaiCoin Frontend Team • a9 • chunghe
• evelyn • MaiCoin QA Team • MaiCoin & MAX users
We Are Hiring • Frontend Engineer React, React Native, React
Native Web GraphQL, React Redux, Rails •
[email protected]