Upgrade to Pro — share decks privately, control downloads, hide ads and more …

From React to React Native Web

From React to React Native Web

Yuanhsiang Cheng

November 20, 2019
Tweet

More Decks by Yuanhsiang Cheng

Other Decks in Programming

Transcript

  1. 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'

  2. 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
  3. Problems we met • Device detection • Cookie • Header

    • Flexbox • Flex: 1 vs flexGrow: 1
  4. 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)
  5. MAX

  6. MAX

  7. MAX

  8. MAX

  9. MaiCoin • Rails backend • GraphQL API gateway • React

    native app • React native web app (for mobile only) • https://maicoin.com
  10. React Native Web • Pros • Codebase consistent • Development

    experience • No more CSS methodology • Cons • Upstream bugs • Cross platform testing
  11. Special Thanks • MaiCoin Frontend Team • a9 • chunghe

    • evelyn • MaiCoin QA Team • MaiCoin & MAX users