Transparent prop not working with Button.

Transparent prop not working with button.

Hi, I am in middle of updating my project, and when I’ve installed newest version of native-base, buttons with transparent prop loose their transparency. For debug purposes I’ve created a fresh project with native-base only, but behaviour stays the same, they are broke.

node, npm, react-native, react and native-base version, expo version if used, xcode version

node: 8.5.0 npm: 6.10.3 react: 16.8.6 react-native: 0.60.5 native-base: 2.13.7 expo: not using test platform: Android, API 21, 25

Expected behaviour

Buttons with transparent prop should have transparent background (with only text visible) same as on https://docs.nativebase.io/Components.html#button-transparent-headref

Actual behaviour

Some of buttons aren’t working well with transparency. Success, Info, Warning, Danger and Dark are filled with color. Screenshot from app

Steps to reproduce

Just create empty project react-native init MyAwesome with react-native version 0.60.5 and then add newest native-base (currently version 2.13.7). Import import {Content, Button, Text} from 'native-base';. Paste code to your main view and run it on device:

<Content>
    <Button transparent light style={{margin: 10}}>
        <Text>Light</Text>
    </Button>
    <Button transparent style={{margin: 10}}>
        <Text>Primary</Text>
    </Button>
    <Button transparent success style={{margin: 10}}>
        <Text>Success</Text>
    </Button>
    <Button transparent info style={{margin: 10}}>
        <Text>Info</Text>
    </Button>
    <Button transparent warning style={{margin: 10}}>
        <Text>Warning</Text>
    </Button>
    <Button transparent danger style={{margin: 10}}>
        <Text>Danger</Text>
    </Button>
    <Button transparent dark style={{margin: 10}}>
        <Text>Dark</Text>
    </Button>
</Content>

Is the bug present in both iOS and Android or in any one of them?

I encountered it on Android device. I don’t have any iOS so i can’t tell if behaviour is similiar.

Any other additional info which would help us debug the issue quicker.

NA

[sankhadeeproy007]

That’s something we’ll need to look at. However if you change the order of the props, ie success transparent instead of transparent success, it should work as expected.

[lindboe]

I had the same issue on iOS with a primary button. In my case the attributes had been in the order transparent primary, but switch it to primary transparent made it transparent again.