Neumorphism UI

import React, { Component, ComponentProps } from 'react';
import { Text, View, StyleSheet, StyleProp } from 'react-native';
import PropTypes from 'prop-types';

interface NeumorphismProps {
    children: ComponentProps,
    size: Number,
    style: StyleProp
}

export default class Neumorphism extends Component<NeumorphismProps> {
    static propTypes = {
        children: PropTypes.node,
        size: PropTypes.number,
        style: PropTypes.object
    }

    static defaultProps = {
        children: <View />,
        size: 40,
        style: {}
    }

    render() {
        const { children, size, style } = this.props;
        return (
            <View style={styles.topShadow}>
                <View style={styles.bottomShadow}>
                    <View style={[
                        styles.inner,
                        { width: size, height: size, size, borderRadius: size / 2 },
                        style
                    ]}>
                        {children}
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    inner: {
        backgroundColor: '#DEE9F7',
        alignContent: 'center',
        justifyContent: 'center',
        borderColor: '#E2ECFD',
        borderWidth: 1
    },
    topShadow: {
        shadowOffset: {
            width: -6,
            height: -6
        },
        shadowOpacity: 1,
        shadowRadius: 6,
        shadowColor: '#FBFFFF'
    },
    bottomShadow: {
        shadowOffset: {
            height: 6,
            width: 6
        },
        shadowOpacity: 1,
        shadowRadius: 6,
        shadowColor: "#B7C4DD"
    }
})