React-native-elements: marginTop on Button creates a shadow in iOS

[hazmah0]

Description

1. Explain what you did
   Added a button and gave it some styles via buttonStyle prop.

<Button title="Onwards!" raised buttonStyle={{ marginTop: 15 }} />

1. What you expected to happen
   The margin should be added on top of the button.

2. What actually happens
   Button gets "extended" with a transparent background, but retains border and shadow styles.
   See screenshot below:

Also please include the version of react-native-elements that you are using.
0.12.2

Reproduction Steps and Sample Code

We highly recommend that you try to reproduce your bug on https://snack.expo.io/ and provide a link.

If you can't reproduce the bug on Snack, provide an example of your code and briefly explain what the code is suppose to be doing.

Solution

Can you suggest a possible fix that would address this issue? Ideally, you should be able to submit a PR to fix it. See our contributing guide for more details.

[filiphosko]

@hazmah0 Hi, this happens because buttonStyle applies styling to the inner View and since elevation (shadow) is applied to the outer View, this way you basically create a 'padding' in the outer View. Try using containerViewStyle prop instead of buttonStyle. On the other hand I think having the API this way is confusing and I'll try to look into it.

[Monte9]

@hazmah0 did @filiphosko's suggestion work for you?

[hazmah0]

@Monte9, @filiphosko solution worked perfectly!