react-native-elements, button margin not taking effect - react-native

Question

I had an issue where there was a white shadow above the button after applying the marginTop: 15 property.
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.
I was expecting for it to be resolved in the following manner as you see below:
import React, { Component } from "react";
import { View, Text, ScrollView, Dimensions } from "react-native";
import { Button } from "react-native-elements";
const SCREEN_WIDTH = Dimensions.get("window").width;
class Slides extends Component {
renderLastSlide(index) {
if (index === this.props.data.length - 1) {
return (
<Button
title="Onwards!"
raised
buttonStyle={styles.buttonStyle}
containerViewStyle={{ marginTop: 15 }}
onPress={this.props.onComplete}
/>
);
}
}
renderSlides() {
return this.props.data.map((slide, index) => {
return (
<View
key={slide.text}
style={[styles.slideStyle, { backgroundColor: slide.color }]}
>
<Text style={styles.textStyles}>{slide.text}</Text>
{this.renderLastSlide(index)}
</View>
);
});
}
render() {
return (
<ScrollView horizontal style={{ flex: 1 }} pagingEnabled>
{this.renderSlides()}
</ScrollView>
);
}
}
const styles = {
slideStyle: {
flex: 1,
justifyContent: "center",
alignItems: "center",
width: SCREEN_WIDTH
},
textStyles: {
fontSize: 30,
color: "white",
textAlign: "center"
},
buttonStyle: {
backgroundColor: "#0288D1"
}
};
export default Slides;
But the marginTop: 15 is having no effect on the button now. I am not sure what else to do here.

Answer 1

You can try View
<View style={{marginTop: 15}}}>
<Button
title="Onwards!"
raised
buttonStyle={styles.buttonStyle}
onPress={this.props.onComplete}
/>
<View>

Answer 2

Instead of using "style" to apply the style to the React Native Elements component, use containerStyle.
Here is the reference to the documentation where it is indicated:
https://reactnativeelements.com/docs/customization/
An example:
// A React Native Elements button
<Button
containerStyle={styles.button} // apply styles calling "containerStyle"
title="Sign up"
/>
// On the StyleSheet:
const styles = StyleSheet.create({
button: {
color: '#C830CC',
margin: 10,
},
});