I am trying to implement shadow effect on button using react native but did not work can any one help me?

0
votes

custom button class import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View, Button,TouchableOpacity} from 'react-native';

export default class FlatButton extends Component { state={ backgroundColor : '#f01d71', backgroundColor2: '#f01d71', pressed: false, };

changeColor(){ if(!this.state.pressed){ this.setState({ pressed: true,backgroundColor: 'rgb(60,32,140)', backgroundColor2: '#f01d71'}); } else { this.setState({ pressed: false,backgroundColor: '#f01d71', backgroundColor2: '#f01d71'}); } } render() { return ( <View style={{

      justifyContent: 'center',
      alignItems: 'center',
     
      }}>
      <TouchableOpacity
    style={{
    backgroundColor:this.state.backgroundColor, 
    borderRadius: 10,
    padding: 10,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 5,
    shadowOpacity: 1.0
    }}
          onPress={()=>this.changeColor()}
            >
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableOpacity>
  </View>
);

} }

const styles = StyleSheet.create({ text:{ color:'white' }, buttonText: { color : 'white', fontWeight : 'bold', fontSize : 16, justifyContent: 'center', }, });

Second component where i am rendering import React , {useState, useEffect} from 'react'; import {Text, View , StyleSheet,Button, Dimensions} from 'react-native'; import FlatButton from '../shared/FlatButton' const CustomizationView=()=>{ return( 

        </View>
        <View style= {styles.btnflex}>
             <FlatButton text="Crop" />
            <FlatButton text="Crop" />
            <FlatButton text="Crop" />
        </View>
       
    </View>
);

};

const styles=StyleSheet.create({ container : { flex :1, // borderWidth : 5, // borderColor : 'black', paddingHorizontal : 10,

},
btnflex : {
     flexDirection :'row',
     marginTop: 5,
       padding : 5,
     justifyContent : 'space-between',
     borderWidth : 5,
    borderColor : 'red'
},

});

export default CustomizationView;

output is out put is this

2
react-native

2 Answers

1
votes

You have to pass the property:

backgroundColor: 'some color here'

If you don't pass the shadow will not work properly.

Try this on your TouchableOpacity style:

style={{
    backgroundColor: this.state.backgroundColor || '#fff', 
    borderRadius: 10,
    padding: 10,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 5,
    shadowOpacity: 1.0
    }}

when you use the || the background of your button will always be white in case you don't pass the parameter this.state.backgroundColor, as you did here when you called your component.

 <FlatButton text="Crop" />
0
votes

use elevation property also

        <View style={{

            justifyContent: 'center',
            alignItems: 'center',
            padding:5
            }}>
            <TouchableOpacity
            style={{
            backgroundColor:'#ff0000', 
            borderRadius: 10,
            padding: 10,
            shadowColor: '#000000',
            shadowOffset: {
            width: 0,
            height: 3
            },
            shadowRadius: 10,
            shadowOpacity: 1.0,
            elevation: 5,
            }}>
              <Text style={styles.buttonText}>{"new button"}</Text>
            </TouchableOpacity>
          </View>