Post card in React Native

Copy to Clipboard

import React, { Component } from 'react';
import { StyleSheet, Text, View, Platform, Image} from 'react-native';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faShareAlt, faComment, faHeart } from '@fortawesome/free-solid-svg-icons'

export default class DashboardScreen extends Component {

render() {
    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.welcome}>IdeaSpace</Text>
            </View>
            <View style={styles['mt-20']}>
                <View style={styles.profileBoxShadow}>
                    <View style={styles.cardIn}>
                        <Image style={styles.image} source={{uri: "https://picsum.photos/1035"}}/>
                        <View style={styles.cardDetail}>
                            <Text style={styles.cardHeader}>Title</Text>
                            <Text style={styles.cardDescription}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </Text>
                        </View>
                        <View style={styles.cardButton}>
                            <View style={styles.button}>
                                <FontAwesomeIcon style={styles.icons} size={20} icon={faHeart}/>
                            </View>
                            <View style={styles.button}>
                                <FontAwesomeIcon style={styles.icons} size={20} icon={faComment}/>
                            </View>
                            <View style={styles.button}>
                                <FontAwesomeIcon style={styles.icons} size={20} icon={faShareAlt}/>
                            </View>
                        </View>
                    </View>
                </View>
            </View>
        </View>
    );
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    "mt-20":{
        marginTop: 20
    },
    header: {
        marginTop: Platform.OS === 'ios' ? 50 : 0,
        paddingVertical: 15,
        backgroundColor: 'white',
        shadowColor: '#171717',
        shadowOffset: {width: 0, height: 3},
        shadowOpacity: 0.1,
        shadowRadius: 2,
        elevation: 3,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    welcome: {
        fontSize: 24,
        fontWeight: 'bold',
        marginHorizontal: 15
    },
    profileBoxShadow: {
        margin: 15,
        elevation: 4,
        backgroundColor: 'white',
        shadowColor: 'black',
        shadowOpacity: 0.5,
        shadowRadius: 1,
        shadowOffset: {
        height: StyleSheet.hairlineWidth,
        },
        borderRadius: 10,
    },
    cardIn: {
        justifyContent: 'center',
    },
    cardDetail:{
        marginVertical: 15,
        marginHorizontal: 15,
    },
    cardHeader:{
        fontSize: 22,
        fontWeight: 'bold'
    },
    cardDescription:{
        fontSize: 18,
        fontWeight: '300',
        marginTop: 6,
    },
    image: {
        height : 200, 
        width : "100%",
        backgroundColor: 'gray',
        borderRadius: 10,
    },
    cardButton:{
        flexDirection: 'row',
        marginBottom: 15,
        marginHorizontal: 15,
    },
    button:{
        marginHorizontal: 5,
        backgroundColor: 'lightgray', 
        padding: 10, 
        borderRadius: 50
    }
});