Instagram Status in react native

Copy to Clipboard

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

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>
            <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>
    );
}
}

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
    }
});