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
1k
Rethink React in Elm
yhsiang
0
1k
開源與工程師的自我修養
yhsiang
0
180
Sayit in Taiwan
yhsiang
0
130
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
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
140
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
180
衛星の軌道をWeb地図上に表示する
sankichi92
0
250
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
320
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
0
250
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
240
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
140
「兵法」から見る質とスピード
ickx
0
200
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.1k
抽象データ型について学んだ
ryounasso
0
210
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.6k
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.6k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Rails Girls Zürich Keynote
gr2m
94
13k
Embracing the Ebb and Flow
colly
85
4.7k
Agile that works and the tools we love
rasmusluckow
329
21k
Making Projects Easy
brettharned
116
6.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Unsuck your backbone
ammeep
671
58k
It's Worth the Effort
3n
184
28k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
82
Visualization
eitanlees
146
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 • yhsiang@maicoin.com