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

user_10719501 0
Viewed 1054

In React Native how would you build a button like the below?

button example

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.

brokenbutton


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>
)
}```
react-native css
2 Answers

Here is the Working Example: Expo Snack

enter image description here

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;
user_56691200

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

user_133424990
Related