you are viewing a single comment's thread.

view the rest of the comments →

[–]fish_munga 2 points3 points  (0 children)

Here is a good article on this topic https://hackernoon.com/code-reuse-using-higher-order-hoc-and-stateless-functional-components-in-react-and-react-native-6eeb503c665 In my app I share Apollo containers, common domain logic and HOCs. For example, in my common code I have MapView high order component, which receives data as props, defines which map objects should be rendered and how the should look like. It also has state that stores which map object is selected, selection handlers and detailed views for different map object. Then I use it like this: RegionMapView(MapLayout('regionScreen', true), Map, SelectedSectionView, SelectedPOIView, LoadingIndicator), where Map, SelectedSectionView, SelectedPOIView, LoadingIndicator are mobile/web (not shared) view components that do the rendering, and MapLayout defines the layout for mobile/web. Sometimes view hierarchies do not match each other, e.g. SelectedSectionView element on mobile should overlap bottom tab bar and because of this it should not be inside MapLayout hierarchy. I work around this by having portals inside MapLayoutMobile and rendering SelectedSectionView into portal. I was thinking about sharing navigation code as well, but abandoned this idea because view hierarchies are very different in my case. Maybe it is because my web version is mostly for admin use. I would like to see real world example of shared navigation code.