How to create 3D button with gradient colour - React Native? - css

Question

In React Native how would you build a button like the below?
I have managed to get this far:
However there is an issue with the border. As you can see there is a gap between the border radius and the linear gradient component. This seems to be an issue caused by using LinearGradient as it does not exist if the Linear Gradient component is replaced with a button component for example.
import React, { useState} from "react";
import {ImageBackground, StyleSheet, View, Text, TouchableOpacity } from "react-native";
import { LinearGradient } from 'expo-linear-gradient';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column"
},
marginContainer: {
flex: 1,
flexDirection: "column",
margin:20
},
buttonContainer:{
flex:3,
justifyContent: 'center',
alignContent: "center",
alignItems:"center"
},
modeButton:{
width:300,
height:100,
borderRadius:20,
borderRightWidth: 1,
borderLeftWidth:1,
borderBottomWidth: 14,
borderColor: '#024e51',
elevation:30,
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowOpacity: 0.8,
elevation: 30,
shadowRadius: 15 ,
shadowOffset : { width: 1, height: 13},
},
pressableArea:{
flexDirection:"row",
justifyContent: 'center',
alignItems: 'center',
width:"100%",
height:"100%"
}
});
function SelectModeScreen() {
return(
<View style={styles.container}>
<View style={styles.marginContainer}>
<View style={[styles.buttonContainer,{ backgroundColor: "darkorange" }]} >
<LinearGradient colors={['#5be9aa', '#09949d']} style={styles.modeButton}>
<TouchableOpacity style={styles.pressableArea} >
</TouchableOpacity>
</ LinearGradient>
</View>
</View>
</View>
)
}```

Answer 1

Here is the Working Example: Expo Snack
import React, { useState } from 'react';
import {
ImageBackground,
StyleSheet,
View,
Text,
TouchableOpacity,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
buttonGrad: {
height: 50,
width: 200,
borderRadius: 10,
position: 'absolute',
bottom: 5,
},
buttonParent: {
height: 50,
width: 200,
borderRadius: 10,
backgroundColor: '#024e51',
},
});
function SelectModeScreen() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => console.log('btn pressed')}>
<View style={styles.buttonParent}>
<LinearGradient
colors={['#5be9aa', '#09949d']}
style={styles.buttonGrad}></LinearGradient>
</View>
</TouchableOpacity>
</View>
);
}
export default SelectModeScreen;

Answer 2

if you want to add shadow around the button add below style properties to above answer buttonParent style
...
buttonParent: {
...
shadowColor: 'black',
shadowOpacity: 1,
shadowOffset: {width: 2, height: 2},
shadowRadius: 10,
elevation: 8,
}
And by this properties you can make any type of elevated view