How to Create Card with Box Shadow in React Native ?

// Filename - App.js

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

const App = () => {
    return (
        <View style={styles.container}>
        
            {/* Card */}
            <View style={styles.card}>
            
                {/* Header */}
                <View style={styles.header}>
                    <Text style={styles.title}>
                        Welcome To Geeksforgeeks!!
                    </Text>
                    <Text style={styles.subtitle}>
                        React Native Card
                    </Text>
                </View>
                
                {/* Content */}
                <View style={styles.content}>
                    <Text style={styles.text}>
                        A Computer Science portal for geeks. 
                        It contains well written, well thought 
                        and well explained computer science 
                        and programming articles
                    </Text>
                </View>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f5f5f5',
    },
    card: {
        backgroundColor: 'white',
        borderRadius: 15,
        padding: 16,
        shadowColor: 'black',
        shadowOffset: {
            width: 0,
            height: 4,
        },
        shadowOpacity: 0.3,
        shadowRadius: 6,
        elevation: 14,
        width: 350,
        height: 350,
        justifyContent: 'center',
        alignItems: 'center',
    },
    header: {
        marginBottom: 16,
        alignItems: 'center',
    },
    title: {
        fontSize: 30,
        fontWeight: 'bold',
        color: 'green',
    },
    subtitle: {
        fontSize: 24,
        color: '#333',
        marginTop: 10,
    },
    content: {
        alignItems: 'center',
    },
    text: {
        fontSize: 17,
        color: '#444444',
        textAlign: 'center',
    },
});

export default App;

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

const App = () => {
    const [showCard, setShowCard] = useState(false);

    const handleButtonClick = () => {
        setShowCard(!showCard);
    };

    return (
        <View style={styles.container}>
            <TouchableOpacity onPress={handleButtonClick} 
                              style={styles.button}>
                <Text style={styles.buttonText}>
                    Box Shadow
                </Text>
            </TouchableOpacity>

            {showCard && (
                <View style={styles.cardContainer}>
                    <Text style={styles.heading}>
                        Welcome To Geeksforgeeks!!
                    </Text>
                    <Text style={styles.paragraph}>
                        A Computer Science portal for geeks. 
                        It contains well written, well thought 
                        and well explained computer science and 
                        programming articles
                    </Text>
                </View>
            )}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#F5F5F5',
    },
    button: {
        backgroundColor: 'green',
        paddingVertical: 12,
        paddingHorizontal: 24,
        borderRadius: 8,
        marginBottom: 16,
    },
    buttonText: {
        color: '#FFFFFF',
        fontSize: 16,
        fontWeight: 'bold',
    },
    cardContainer: {
        backgroundColor: '#FFFFFF',
        borderRadius: 8,
        padding: 16,
        shadowColor: '#000000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.3,
        shadowRadius: 4,
        elevation: 10, // Required for Android
        width: 350,
        height: 350,
    },
    heading: {
        fontSize: 25,
        fontWeight: 'bold',
        marginBottom: 8,
        color: 'green',
        alignItems: 'center',
    },
    paragraph: {
        fontSize: 17,
        lineHeight: 24,
    },
});

export default App;