Index.js

import React from 'react'
import { FlatList, View, Text } from 'react-native'
import Image1 from '../../assets/images/abstract-dark-banner.jpg'
import Image2 from '../../assets/images/baby.jpg'
import Image3 from '../../assets/images/best-seller.jpg'
import Image4 from '../../assets/images/black-friday.jpg'

import SecondaryHeader from '../../components/global/Header/SecondaryHeader'
import Item from './Item'

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      FlatListItems: [
        {
          title: '6 produk Anda kemungkinan terpengaruh durasi, pengiriman akan tertunda karena perayaan Tahun Baru Imlek',
          image_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
          impresi: '24 Jan 2020 10:39',
          img : [ Image1, Image2, Image3, Image4]
        },
        {
          title: 'Pesanan #decdd574-9b9b-4979-9b11-54f771797505 untuk bad telah kadaluwarsa',
          image_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
          impresi: '23 Jan 2020 13.31',
          img : []
        },
        {
          title: 'Pesanan #fcaba6d8-c5df-4702-85a6-86fa914ddfd9 untuk bad telah kadaluwarsa',
          image_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
          impresi: '19 Jan 2020 08.29',
          img : []
        },
      ]
    }
  }
  FlatListItemSeparator = () => {
    return (
      //Item Separator
      <View>
      </View>
    )
  }
  render() {
    return (
      <View >
        <View>
          {this.header()}
        </View>

        <View style={{ backgroundColor: '#F7F7F7', color: '#777777', paddingHorizontal: 15, height: 35, justifyContent: 'center' }}>
          <Text style={{ fontSize: 15, fontWeight: '600' }}> Terdahulu </Text>
        </View>

        <FlatList
          data={this.state.FlatListItems}
          //data defined in constructor
          ItemSeparatorComponent={this.FlatListItemSeparator}
          //Item Separator View
          renderItem={({ item }) =>
            <Item item={item}  image_url={item.image_url} impresi={item.impresi} title={item.title} img={item.img}/>
          }
          keyExtractor={(item, index) => index.toString()}
        />

      </View>
    )
  }
    header = () => {
      return (
        <SecondaryHeader
          withBack
          title='Notifikasi'
        />
      )
    }
}