Description
import React from 'react';
import {View} from 'react-native';
import {BoxShadow, BorderShadow} from 'react-native-shadow';
function Neumorphic() {
const shadowOpt = {
width: 100,
height: 100,
color: '#000',
border: 2,
radius: 10,
opacity: 0.18,
x: 2,
y: 2,
};
const shadowOpt1 = {
width: 100,
height: 100,
color: '#fff',
border: 2,
radius: 10,
opacity: 0.18,
x: -2,
y: -2,
};
const shadowOpt2 = {
width: 100,
color: '#fff',
border: 2,
opacity: 0.18,
side: 'top',
inset: true,
};
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
backgroundColor: '#eee',
}}>
{/*
<View
style={{
width: 100,
height: 100,
backgroundColor: '#fefefe',
borderRadius: 10,
}}
/>
*/}
<BorderShadow setting={{side: 'bottom'}}>
<View
style={{
width: 100,
height: 100,
backgroundColor: '#fefefe',
borderRadius: 10,
}}
/>
);
}
export default Neumorphic;