I'm completely new in React Native and I wanted to try out implementing "Neumorphism" on one of my View components for a practice project. I've looked at some youtube videos for quite a while, however I haven't been able to achieve it. Here's my code...
import { Text, View } from 'react-native';
import taskDisplayStyles from '../styles/taskDisplayStyles';
const TaskDisplay = () => {
return (
<View style={taskDisplayStyles.taskContainer}>
<View style={taskDisplayStyles.taskDisplayHeaderTopShadow}>
<View style={taskDisplayStyles.taskDisplayHeaderBottomShadow}>
<Text>
Content
</Text>
</View>
</View>
</View>
);
}
export default TaskDisplay;
and here's my styles javascript code
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
taskDisplayHeaderTopShadow: {
borderRadius: 10,
shadowOffset: {width: -10, height: -10},
shadowColor: '#FBFFFF',
shadowOpacity: 1,
shadowRadius: 6,
shadowRadius: 18,
},
taskDisplayHeaderBottomShadow: {
borderRadius: 10,
shadowOffset: {width: 10, height: 10},
shadowColor: '#000',
shadowOpacity: 1,
shadowRadius: 6,
shadowRadius: 18,
}
});
I'd deeply appreciate it, thank you.