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
160
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
270
How to be a good wan-jun
yhsiang
1
140
Experience in building isomorphic app
yhsiang
11
730
Other Decks in Programming
See All in Programming
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
230
Benchmark
sysong
0
270
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
560
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
160
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
480
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
450
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
160
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
450
GraphRAGの仕組みまるわかり
tosuri13
8
490
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
810
Featured
See All Featured
Code Review Best Practice
trishagee
68
18k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
GitHub's CSS Performance
jonrohan
1031
460k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Being A Developer After 40
akosma
90
590k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
It's Worth the Effort
3n
185
28k
Agile that works and the tools we love
rasmusluckow
329
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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]