Blur on border in react native

user_14345928 0
Viewed 2353

How can i do blur on border such like this in ReactNative on IOS:

Image

I tried to do it with shadow:

borderRadius: 7, paddingVertical: 10, paddingHorizontal: 14, shadowColor: 'black', shadowOffset: { width: 0, height: 0 }, shadowRadius: 2, shadowOpacity: 0.2, backgroundColor: 'white'

But it does not have the same result

react-native blur border
1 Answers

Apply style

dropShadow:{
      shadowColor: '#000',
      shadowOpacity: 0.5,
      shadowRadius: 5,
      elevation: 2,
    }

Working example Link: https://snack.expo.io/@msbot01/referencefor

Full code:

import React, { Component} from 'react';
import { View, Text, StyleSheet} from 'react-native';


class App extends Component {
    constructor(props) {
        super(props);
    } 


    render() {
        return(
            <View style={styles.container}>
              <View style={[{height:100, width:100, borderWidth:0, borderRadius:10},styles.dropShadow]}>

              </View>
                
               
            </View>
        )       
}}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        justifyContent:'center', 
        alignItems:'center'
    },
    dropShadow:{
      shadowColor: '#000',
      shadowOpacity: 0.5,
      shadowRadius: 5,
      elevation: 2,
    }
});



export default App;
user_98398250
Related