Instagram in react native

Copy to Clipboard

import React, { Component } from 'react';
import { StyleSheet, Text, View, Platform, Image, FlatList, ScrollView} 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 {

state={
    data: [
        {id: 1, image:"https://picsum.photos/900/700"}, 
        {id: 2, image:"https://picsum.photos/900/200"},
        {id: 3, image:"https://picsum.photos/900/300"},
        {id: 4, image:"https://picsum.photos/900/400"},
        {id: 5, image:"https://picsum.photos/900/500"},
        {id: 6, image:"https://picsum.photos/900/600"},
        {id: 7, image:"https://picsum.photos/900/800"},
        {id: 8, image:"https://picsum.photos/900/900"}
    ]
}
render() {
    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.welcome}>Instagram</Text>
            </View>
            <ScrollView>
            <View style={styles['mt-15']}>
                <View style={{marginHorizontal: 5}}>
                    <FlatList 
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                        data={this.state.data}
                        keyExtractor= {(item) => {
                            return item.id.toString();
                        }}
                        renderItem={({item}) => 
                            <View style={styles.imageContainer}>
                                <Image style={styles.image} source={{uri: item.image}}/>
                                <Text style={styles.imageLabel}>Name</Text>
                            </View>
                        }
                    />
                </View>
            </View>
            <View style={styles['mt-15']}>
                <View style={{marginHorizontal: 5}}>
                    <FlatList 
                        showsVerticalScrollIndicator={false}
                        data={this.state.data}
                        keyExtractor= {(item) => {
                            return item.id.toString();
                        }}
                        renderItem={({item}) => 
                            <View style={styles.profileBoxShadow}>
                                <View style={styles.cardIn}>
                                    <View style={{flexDirection: 'row', justifyContent: 'flex-start', marginHorizontal: 5, marginVertical: 15}}>
                                        <Image style={styles.imageUser} source={{uri: "https://picsum.photos/1035"}}/>
                                        <Text style={styles.cardHeader}>Name</Text>
                                    </View>
                                    <Image style={styles.imagePost} source={{uri: "https://picsum.photos/1035"}}/>
                                    <View style={styles.cardDetail}>
                                        <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>
            </ScrollView>
        </View>
    );
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    "mt-15":{
        marginTop: 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
    },
    imageContainer: {
        marginHorizontal: 2,
        alignItems: 'center'
    },
    image: {
        height : 85, 
        width : 85,
        backgroundColor: 'gray',
        borderRadius: 50,
        borderWidth: 2,
        borderColor: 'red',
    },
    imageLabel: {
        marginTop: 5,
        fontSize: 16
    },
    profileBoxShadow: {
        elevation: 4,
        backgroundColor: 'white',
        shadowColor: 'black',
        shadowOpacity: 0.5,
        shadowRadius: 1,
        shadowOffset: {
        height: StyleSheet.hairlineWidth,
        },
    },
    cardIn: {
        justifyContent: 'center',
    },
    imageUser: {
        height : 30, 
        width : 30,
        backgroundColor: 'gray',
        borderRadius: 50,
    },
    cardDetail:{
        marginVertical: 15,
        marginHorizontal: 15,
    },
    cardHeader:{
        marginLeft: 10,
        fontSize: 22,
        fontWeight: 'bold'
    },
    cardDescription:{
        fontSize: 18,
        fontWeight: '300',
        marginTop: 6,
    },
    imagePost: {
        height : 200, 
        width : "100%",
        backgroundColor: 'gray',
    },
    cardButton:{
        flexDirection: 'row',
        marginBottom: 15,
        marginHorizontal: 5,
    },
    button:{
        marginHorizontal: 5,
        padding: 10, 
        borderRadius: 50
    },
    icons:{
        color: 'rgba(0, 0, 0, 0.7)'
    }
});