Support older Android devices

[lyahdav]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Older Android devices (e.g. Android API level 18) don't support React Native Web.

If the current behavior is a bug, please provide the steps to reproduce and
if a minimal demo of the problem via Glitch or similar (template:
https://glitch.com/edit/#!/react-native-web-playground).

1. Go to https://rnw.glitch.me/ on an Android API level 18 emulator in the stock Browser app.
2. Observe blank screen:
   

What is the expected behavior?
Renders correctly.

My understanding is that https://mobile.twitter.com uses React Native Web? It looks like it gives a warning on top directing people to upgrade:

I assume that's the recommendation here? But how does it at least seem to render something? Or is that some fallback web app that doesn't use React Native Web?

Environment (include versions). Did this work in previous versions?

• OS: Android API level 18
• Device: Galaxy Nexus emulator
• Browser: Stock Browser app
• React Native for Web (version): 0.0.119
• React (version): 15.6.1

[necolas]

Android 4.3 is not supported. And the version of Twitter you're seeing is a fallback feature phone app

[lyahdav]

For anyone who wants to try to support Android < 4.4 (but not < 4.0), we were able to get things mostly working, so I wanted to document it. There were several different issues, some related to React Native Web, some not. Here's a list of the issues we encountered in no particular order and how we fixed them (if we did):

1. no-scroll does not work. We use this package to disable vertical scrolling in a ScrollView that contains a Slider. It could be argued this should be fixed in the Slider we use, which is this one: https://github.com/jeanregisser/react-native-slider. The reason this doesn't work on < Android 4.4 is because it uses CSS calc which is only partially supported starting on 4.4. One thing which may work here is to use the ScrollView's scrollEnabled prop, we didn't try this yet.
2. Cannot use viewport sizes vh/vh. Also confirmed by this page, only started being support on Android 4.4. We worked around this by using JS window.innerHeight and window.innerWidth, or width: '100%' (where equivalent). Note the window properties don't work for server rendering. In that case you could use other tricks like position: 'absolute' with top, right, left, bottom all 0 (example). Note that margin: auto won't work on these older devices per this post.
3. Some <a> tags were not positioned correctly. In Android >= 4.4 they are displayed correctly when using Flexbox but on Android < 4.4 they weren't. The workaround was to make the <a> tags display: 'block' and add a <View> container inside them that's display: 'flex', moving any of the flexbox styles into this container.
4. Some child elements of a parent element that's using Flexbox require explicit display: 'flex' in order to layout correctly. For example a Text inside a View may require this. This may be related to the "span elements within flex-direction: column container" issue detailed here.
5. flexGrow: 1 not being respected. I'm pretty sure this is an issue in the inline-style-prefixer library that React Native Web uses. That library seems to have better support for older Flexbox spec, but only if you use the dynamic prefixer. But even then, it seems to have a bug with flexGrow: 1 not working on these older Android devices. I fixed it in a fork of inline-style-prefixer. Then I had to fork React Native Web to include that fork and use Dynamic prefixer.
6. CSS animations not working. Per this page the -webkit prefix is required for older Android devices. For example, we had to change @keyframes to @-webkit-keyframes. Example of animations using the prefix.
7. flexShrink: 1 not being respected. The fix required CSS like -webkit-box-flex: 1. Because of inline-style-prefixer we could just use flex: 1.
8. SVG icon not rendering. This happened for an SVG inside a View that's flexDirection: 'row'. That View also had alignItems: 'center' which was superfluous. Removing the alignItems fixed it.
9. SVG icon not being centered in container View. Fixed by conditionally adding a paddingTop: 7 if < Android 4.4. Super hacky, I know.
10. ScrollView incorrectly resetting when render dependends on scroll position. See https://stackoverflow.com/questions/48971640/scroll-view-in-react-incorrectly-resetting-to-top-on-android-stock-browser-when. Similarly if any component inside a ScrollView requires re-rendering it can reset the ScrollView's position. Wasn't able to resolve these issues yet, so had to disable them.
11. Some JS features aren't available. Examples we ran into:
    • Object.values. An example of an alternative is: Object.keys(obj).forEach(keys => { const value = obj[key]; ... })
    • Array.prototype.findIndex. Used polyfill.
    • String.prototype.startsWith. Used polyfill.
    • window.requestAnimationFrame and window.cancelAnimationFrame. Used polyfill.

Some helpful links:

1. How to detect stock Android browser - in case you need to branch your code
2. Flexbox gotchas for Android 2.1 – 4.3 (stock browser)

[necolas]

Thanks for writing that up. I opened an issue upstream for inline-style-prefixer if you want to share any more info there robinweser/inline-style-prefixer#153.

The ScrollView issues appear to be the most significant compatibility issue. If you find time to debug exactly what's happening on scroll in Android Browser 4.3, I'd be curious to hear about what you find and to see if we can't do something about it.

6. CSS animations not working

The latest version supports defining css animations and should handle this for you now

react-native-web/packages/react-native-web/src/exports/StyleSheet/createKeyframesRules.js

Line 13 in 998e275

const prefixes = ['-webkit-', ''];

[lyahdav]

Thanks for opening that issue on inline-style-prefixer.

The animation issue was within an internal React web component we are using that's not aware of React Native Web, so unfortunately it's not something React Native Web could fix.

I will try to reproduce the ScrollView issue in vanilla React if I find time, I suspect it's not React Native Web related (which would mean React doesn't support the older Android browser?).