Dashboard in React native

Copy to Clipboard

import React, { Component } from 'react';
import { StyleSheet, Text, View, Platform, Image} from 'react-native';

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}>
                        <View style={{}}>
                            <Image style={styles.image} source={{uri: "https://picsum.photos/200/300"}}/>
                        </View>
                        <View style={styles['ml-15']}>
                            <Text style={styles.cardHeader}>Vijayakumar</Text>
                            <Text style={styles.cardDescription}>Software Engineer</Text>
                        </View>
                    </View>
                </View>
            </View>
        </View>
    );
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    "mt-20":{
        marginTop: 20
    },
    "ml-15":{
        marginLeft: 15
    },
    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
    },
    cardIn: {
        fontSize: 20,
        paddingVertical: 10,
        flexDirection: 'row',
    },
    cardHeader:{
        fontSize: 22,
        fontWeight: 'bold'
    },
    cardDescription:{
        fontSize: 18,
        fontWeight: '300',
        marginTop: 6,
    },
    profileBoxShadow: {
        margin: 15,
        elevation: 4,
        paddingHorizontal: 15,
        paddingVertical: 10,
        backgroundColor: 'white',
        shadowColor: 'black',
        shadowOpacity: 0.5,
        shadowRadius: 1,
        shadowOffset: {
        height: StyleSheet.hairlineWidth,
        },
        borderRadius: 10,
    },
    image: {
        height : 80, 
        width : 80,
        backgroundColor: 'gray',
        borderRadius: 10,
    },
});