Shadow in button in react native - react-native

Question

I wanna achieve button with shadow in react native with no border and spread, I have tried something like this,
{
shadowColor: 'black',
shadowOpacity: 0.8,
elevation: 6,
backgroundColor : "#0000",
shadowRadius: 15 ,
shadowOffset : { width: 56, height: 13},
borderWidth:0,
borderRadius:0,
}
But the shadow is not spreading and offset is not also working as expected. I want to achieve something like this,
Codepen

Answer 1

Tried adding it directly on Button but no luck. You can try this way by using TouchableOpacity.
import React, { Component } from 'react';
import { View, StyleSheet, Button, TouchableOpacity } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button}>
<Button title="Submit" />
</TouchableOpacity>
<TouchableOpacity style={styles.buttonHover}>
<Button title="Submit" />
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
button: {
borderRadius:25,
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 50,
paddingRight: 50,
backgroundColor: '#FFFFFF',
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowOpacity: 0.8,
elevation: 6,
shadowRadius: 15 ,
shadowOffset : { width: 1, height: 13},
},
buttonHover: {
marginTop: 10,
borderRadius:25,
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 50,
paddingRight: 50,
shadowColor: 'rgba(46, 229, 157, 0.4)',
shadowOpacity: 1.5,
elevation: 8,
shadowRadius: 20 ,
shadowOffset : { width: 1, height: 13},
backgroundColor: '#2EE59D',
color: '#FFFFFF'
}
});