I'm completely clueless in trying to implement "Neumorphism" styling in React Native

Viewed 27

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.

0 Answers
Related