Flatlist with images react native example

Flatlist with images react native example

Follow Below Code do create a creative Flatlist View in react native

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

function Item({ item }) {
  return (
   
     
     
        {item.date}
        START: {item.start_time}
        END: {item.end_time}
     

     
        {item.cost}
     
   
  );
}

export default class History extends React.Component {
  state = {
    data:[
        {
            "date": "18-01-2020",
            "start_time": "11:00 AM",
            "end_time": "1:00 PM",
            "cost":"₹ 260",
            "photo": "https://firebasestorage.googleapis.com/v0/b/reactjsweb-f7417.appspot.com/o/battery.png?alt=media&token=d5f1b52c-1402-4343-b3b6-33f0e311a9a7"
        },
        {
            "date": "27-01-2020",
            "start_time": "4:00 PM",
            "end_time": "5:00 PM",
            "cost":"₹ 110",
            "photo": "https://firebasestorage.googleapis.com/v0/b/reactjsweb-f7417.appspot.com/o/battery.png?alt=media&token=d5f1b52c-1402-4343-b3b6-33f0e311a9a7"
        },
        {
            "date": "12-02-2020",
            "start_time": "2:00 PM",
            "end_time": "4:00 PM",
            "cost":"₹ 190",
            "photo": "https://firebasestorage.googleapis.com/v0/b/reactjsweb-f7417.appspot.com/o/battery.png?alt=media&token=d5f1b52c-1402-4343-b3b6-33f0e311a9a7"
        },
        {
            "date": "28-03-2020",
            "start_time": "10:00 AM",
            "end_time": "11:00 AM",
            "cost":"₹ 50",
            "photo": "https://firebasestorage.googleapis.com/v0/b/reactjsweb-f7417.appspot.com/o/battery.png?alt=media&token=d5f1b52c-1402-4343-b3b6-33f0e311a9a7"
        },
       
    ]
  }


  render(){
    return (
     
       
          style={{flex:1}}
          data={this.state.data}
          renderItem={({ item }) => }
          keyExtractor={item => item.email}
        />
     
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F7F7F7',
    marginTop:10
  },
  listItem:{
    margin:5,
    padding:5,
    backgroundColor:"#FFF",
    width:"90%",
    flex:1,
    alignSelf:"center",
    flexDirection:"row",
    borderRadius:5
  }

});

OUTPUT