title: How to create 3D button with gradient colour - React Native?
body: <p>In React Native how would you build a button like the below?</p>
  <p><a href="https://i.stack.imgur.com/4Eyzw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Eyzw.png" alt="button example" /></a></p>
  <p>I have managed to get this far:</p>
  <p>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.</p>
  <p><a href="https://i.stack.imgur.com/FHd1m.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FHd1m.jpg" alt="brokenbutton" /></a></p>
  <pre><code>
  import React, { useState} from &quot;react&quot;;
  import {ImageBackground, StyleSheet, View, Text, TouchableOpacity } from &quot;react-native&quot;;
  import { LinearGradient } from 'expo-linear-gradient';
  
  const styles = StyleSheet.create({
    container: {
           flex: 1,
    flexDirection: &quot;column&quot;
    
   
    },
     marginContainer: {
           flex: 1,
    flexDirection: &quot;column&quot;,
    margin:20
   
    },
     
    
     buttonContainer:{
     
     flex:3,
     justifyContent: 'center',
     alignContent: &quot;center&quot;,
     alignItems:&quot;center&quot;
     },
    
     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:&quot;row&quot;,
     justifyContent: 'center',
      alignItems: 'center',
     width:&quot;100%&quot;,
     height:&quot;100%&quot;
  
     }
  
     
  });
  
  
  function SelectModeScreen() {
  
  return(
  &lt;View style={styles.container}&gt;
  
      &lt;View style={styles.marginContainer}&gt;
  
        &lt;View style={[styles.buttonContainer,{  backgroundColor: &quot;darkorange&quot; }]} &gt;
        &lt;LinearGradient  colors={['#5be9aa',  '#09949d']} style={styles.modeButton}&gt;
        &lt;TouchableOpacity style={styles.pressableArea}   &gt;
        
          &lt;/TouchableOpacity&gt;
          &lt;/ LinearGradient&gt;
        &lt;/View&gt;
  
  
  &lt;/View&gt;
  &lt;/View&gt;
  )
  }```
  </code></pre>