Raised styles on Button are applied to wrong View

Description

1. Explain what you did: When you have a button raised and with some type of spacing styling (margin or padding), the shadow created by the raised prop is attached to the wrong view inside the button.

2. What you expected to happen The border generated from the raised prop should be in the “colored” button, not in that View that happens to be the Button Implementation wrapper.

3. What actually happens example:

<Button
            title="button"
            raised
            buttonStyle={{ margin: 16 }}
          />

result:

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

Reproduction Steps and Sample Code

https://snack.expo.io/ryrxN0LVf

Solution

I know how to fix it but I need some guide dealing with snapshots because the fix actually change the snapshots, so the fix did not pass…

I actually update the snapshot tests in my branch’s fork. you can see it here: https://github.com/hhg2288/react-native-elements/commit/c8655012f0b70b3436bd564af0a581cd6c5e0fbf

I test it locally & It works correctly. If soeone can help reviewing this I can create the PR to fix it 😃

UPDATE: PR -> https://github.com/react-native-training/react-native-elements/pull/816

[horacioh]

awesome!!

I just found that problem in my use case & I wanted to help solving it 😃

hope we get a good solution I can implement & help with the project 😃

[iRoachie]

Closing as per https://github.com/react-native-training/react-native-elements/pull/816#issuecomment-359210663. If this is still a problem in v1 then ping me to reopen