Successful Web & React Native Code Sharing Strategies

82% code reused

Scoping

react-xp, react-primitives, react-native-web, react-native-dom are not used

react-native-web is the best option among them. Pretending web to be React Native is not the right option

In-house solution is decided good for flexibility, control of abstractions and performance.

Monorepo

Project structure

1
2
3
4
5
6
7
8
9
10
11
12
13

app/
  components/
  model/
  utils/
  hooks/
  ...
  package.json
native/
  ios/
  android/
  package.json
web/
  package.json

Files

1
2
3
4
5

index.js
index.web.js
index.native.js
index.ios.js
index.android.js

Tooling config

1
2
3
4
5
6

- Babel
- Webpack / Metro
- Flow
- Jest
- ESLint
- Prettier

Shared Styling

In-house abstraction layer

Styles are separated, constants are shared

https://github.com/Nozbe/zacs

Shared Components

Base UI components

Abstraction layer based on concrete host components

1
2
3
4

<Touchable />
<Icon />
<Image />
<TextInput />

Resolving platform differences

1
2
3

if (platform.isWeb) {
} else {
}

// utils/getTargetValue/index.web.js

1
2

const getTargetValue = (e): string => e.target.value
export default getTargetValue

// utils/getTargetValue/index.native.js

1
2

const getTargetValue = (e): string => e.nativeEvent.text
export default getTargetValue

Future work

More sharing between CSS and StyleSheet

Animation

Webpack vs Metro

List virtualization

Drag & drop

Navigation

WYSIWYG (Gutterberg from WordPress)

e2e testing: Cypress vs Detox

nozbe, web code sharing

This information is presented at Sep 7, 2019, check it out from Youtube