React Native <0.43 support

[atticoos]

Issue: Builds were broken for React Native versions <0.43. (#1553)

What I did

Swapped out SectionList for ListView. This will be deprecated in the future (I don't believe anytime soon/immediate), so ideally we may want to export a List component that interfaces with whichever underlying ListView / SectionList implementation is supported. For now, this simply unbreaks <0.43 builds.

There are two additional regressions: StyleSheet.absoluteFillObject and the use of maxWidth in a style. For ease of use moving forward, I added a polyfills/ directory to address these head on.

StyleSheet.absoluteFillObject

This is only supported in recent versions. It's simply a preset style for a full screen absolutely positioned element.

MinMaxViewPolyfill

The min/max width/height features of styles are not available on earlier versions of React Native. This adds a Higher Order Component that can declaratively (through props) apply these bounding rules to any child component.

How to test

Run the react-native-vanilla project and verify all continues to work.

Proof

Closes #1553

[codecov]

Codecov Report

Merging #1555 into master will decrease coverage by 0.32%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master    #1555      +/-   ##
==========================================
- Coverage   20.46%   20.14%   -0.33%     
==========================================
  Files         241      244       +3     
  Lines        5243     5327      +84     
  Branches      649      660      +11     
==========================================
  Hits         1073     1073              
- Misses       3678     3744      +66     
- Partials      492      510      +18

Impacted Files	Coverage Δ
...tive/src/preview/components/StoryListView/style.js	0% <ø> (ø)	⬆️
...-native/src/preview/components/OnDeviceUI/style.js	0% <0%> (ø)	⬆️
...tive/src/preview/components/StoryListView/index.js	0% <0%> (ø)	⬆️
...ive/src/preview/components/polyfills/MinMaxView.js	0% <0%> (ø)
...t-native/src/preview/components/polyfills/index.js	0% <0%> (ø)
...ive/src/preview/components/polyfills/StyleSheet.js	0% <0%> (ø)
addons/knobs/src/components/types/Boolean.js	11.62% <0%> (ø)	⬆️
lib/ui/src/modules/ui/configs/handle_keyevents.js	33.33% <0%> (ø)	⬆️
addons/knobs/src/components/types/Object.js	5.81% <0%> (ø)	⬆️
...ponents/left_panel/stories_tree/tree_decorators.js	30.88% <0%> (ø)	⬆️
... and 21 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e3bcd4d...73ac57e. Read the comment docs.

[rmevans9]

This looks good to me. I personally dislike having to "go backwards" but I understand the need.

[atticoos]

I just realized I hand't audited other components. Verifying StatusBar is supported in 0.27

[atticoos]

StatusBar is supported in 0.27. I think we're all good here.

I should pull this into my 0.27 project and verify that it all works as expected prior to merging.

[shilman]

LGTM! Tested (but not on old RN)

[atticoos]

Testing RN 0.27 right now. Will report back shortly

[atticoos]

Have some minWidth and maxWidth problems:

WIP

[atticoos]

Ran into two additional backward incompatibilities. For ease of use moving forward, I added a polyfills/ directory to address these head on.

StyleSheet.absoluteFillObject

This is only supported in recent versions. It's simply a preset style for a full screen absolutely positioned element.

MinMaxViewPolyfill

The min/max width/height features of styles are not available on earlier versions of React Native. This adds a Higher Order Component that can declaratively (through props) apply these bounding rules to any child component.

Made additional changes

[atticoos]

38ef3f6 moves the polyfill implementations into react-native-compat

[rmevans9]

👍

How far back do we want to support? I understand we want to make sure that we support older versions of React Native but there has to be a limit to how far back we go.

[atticoos]

How far back do we want to support? I understand we want to make sure that we support older versions of React Native but there has to be a limit to how far back we go.

It's all about finding the proper balance. Storybook itself doesn't require much UI, so with minimal effort we're able to keep folks on earlier versions supported. If there's any drawback, I think it'll be on the contributor and reviewer side to keep those requirements communicated and enforced.

We currently support >=0.27, so for this release at the very least, we want to make sure we continue to satisfy that requirement without regressions.

I don't think this is the proper thread to make a formal decision, but it is something to consider moving forward with the compatibility support in, and observe how things go in future reviews.

[shilman]

LGTM and tested