Error 'nativeBackgroundAndroid' on Button

[pewh]

Hi,

I got error on Button when use master branch. Previously it's work on version 0.2.1.

import { Button } from 'react-native-material-design'
...
        <Button
          value='Login'
          raised={true}
          theme='dark'
          primary='googleRed'
          onPress={this.handleLogin.bind(this)}
        />

package.json

{
  "name": "foobar",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node_modules/react-native/packager/packager.sh"
  },
  "dependencies": {
    "apsl-react-native-button": "^2.3.0",
    "immutable": "^3.7.5",
    "moment": "^2.10.6",
    "react": "^0.14.3",
    "react-native": "^0.17.0",
    "react-native-drawer": "^1.10.1",
    "react-native-dropdown-android": "0.0.6",
    "react-native-gcm-android": "0.0.7",
    "react-native-image-picker": "^0.10.0",
    "react-native-image-progress": "^0.4.0",
    "react-native-material-design": "git+https://github.com/react-native-material-design/react-native-material-design.git",
    "react-native-modalbox": "^1.2.4",
    "react-native-progress": "^2.2.0",
    "react-native-radio-buttons": "^0.6.0",
    "react-native-redux-router": "^1.0.5",
    "react-native-simple-store": "^0.1.0",
    "react-pure-render": "^1.0.2",
    "react-redux": "^3.1.2",
    "redux": "^3.0.5",
    "redux-logger": "^2.3.1",
    "redux-thunk": "^1.0.2"
  },
  "devDependencies": {}
}

Tested with Genymotion Samsung Galaxy S3 4.1.1 API 16
OS: Win 8.1 32bit

[Ehesp]

Right so this is because I swapped out the Ripple component with the RN Ripple, which only supports API 21 upwards.

I can look at bringing it back in if I can somehow get the api version, but 16 is an old api version?

EDIT: Right so what I'll do is bring back the Ripple as a Polyfill for older versions

var {Platform} = React;

if(Platform.Version === '5.0'){
  console.log('Running on Lollipop!');
}

I need to figure out what versions run what APIs though.

[pewh]

Currently you can get android api version via Android build class or use react-native-device-info. But it will make this package installation more complicated.

api 16 is an old version, but many devices still use this version.

By the way, what is the different between Ripple component and RN Ripple? Performance?

[Ehesp]

It's okay, I can do something like this:

• Get the version using the Platform module from RN.
• Get the API level from http://developer.android.com/guide/topics/manifest/uses-sdk-element.html
• Create a helper to detect where certain "features" are supported, such as Ripple & maybe elevation.
• If it's not supported, use the Polyfil.

Performance wasn't actually as much of an issue, it was more complexity along with a few bugs. I'll bring it back though.

@pewh What happens when you create a View, and add an elevation to it? From here elevation is only available on API 21+. Does it throw an error or simply ignore it?

[pewh]

Thanks, @Ehesp

<View elevation={4}><Text>foo</Text></View> doesn't throw any error. It also render text & no warning on console.

[Ehesp]

Hi @pewh

I've just committed to master (472383d). I've tested this as best I could but I was unable to get my emulator working on API 16. Basically it checks whether the device has the correct API level for a feature, and if not returns a polyfill for it.

The Ripple pollyfill had to be changed a bit, as I also wanted to implement onLongPress and elevation too. I've implemented this on Button & Drawer.Section. Could you test whether it works for me?

A couple of things I've noticed are:

• On press, the background color isn't there, where as natively it is (I can do this, just need to find out what opacity of the ripple color the background color is).
• With native, long pressing the button also seems to trigger a normal press. This currently doesn't happen... Need to figure out the actual logic behind this, surely triggering both functions for a long press is a bad idea.

[Ehesp]

Got API 16 working... Added more fixes in, including a border on components if elevation isn't available.

[pewh]

Sorry for long delay. I've testing on several devices with API 16 and everything is work. Thanks for the great work 👍

[Ehesp]

Good to hear, I'm not sure the onLongPress is how I want it yet. I need to properly dig into the logic behind it as it seems to be functioning differently to native at the moment.