TerkiniTab.js

import React, { Component } from 'react';
import { Container, Content, Text } from 'native-base'
import { Image, SafeAreaView, FlatList, TouchableOpacity, StyleSheet, View } from 'react-native'

// import DATA from '../data/Data.json';
import TerkiniMain from '../mainscreens/TerkiniMain';
import SplashScreen from '../../login/SplashScreen';

export default class Terkini extends Component {
  constructor(props){
    super(props)
    this.state = {
      terkiniBeritas: [
        {
          id: 1,
          judul: 'Ekonomi Yogyakarta pada Kuartal II 2019 Tumbuh 6,80%',
          ilustrasi: 'https://pict.sindonews.net/dyn/180/content/2019/08/06/33/1427094/ekonomi-yogyakarta-pada-kuartal-ii-2019-tumbuh-6-80-ATR-thumb.jpg',
          kategori: 'Ekonomi',
          tgl: 'Selasa, 6 Agustus 2019 - 00.60 WIB',
          isi: ''
        },
        {
          id: 2,
          judul: 'Ekonomi Yogyakarta pada Kuartal II 2019 Tumbuh 6,80%',
          ilustrasi: 'http://www.rmolsumsel.com/images/berita/normal/2019/10/445389_09523421102019_nadiem.jpg',
          kategori: 'Ekonomi',
          tgl: 'Selasa, 6 Agustus 2019 - 00.60 WIB',
          isi: ''
        },
        {
          id: 3,
          judul: 'Wishnutama Calon Menteri Jokowi 2019 sampai 2024, Ini Profilnya',
          ilustrasi: 'https://akcdn.detik.net.id/community/media/visual/2019/10/21/8dcddc8a-f578-4f3d-8f6f-9c18c2b2d997_43.jpeg?w=780&q=90',
          kategori: 'Politik',
          tgl: 'Selasa, 6 Agustus 2019 - 00.60 WIB',
          isi: ''
        },
        {
          id: 4,
          judul: 'Erick Thohir Bersedia Jadi Menteri Meski Berat Tinggalkan Bisnisnya',
          ilustrasi: 'https://asset.kompas.com/crops/tpxTuMItA9KrUsJe1bf73_2Imd0=/325x53:1473x818/750x500/data/photo/2019/10/21/5dad343d66fca.jpg',
          kategori: 'Olahraga',
          tgl: 'Selasa, 6 Agustus 2019 - 00.60 WIB',
          isi: ''
        },
        {
          id: 5,
          judul: 'Anak Muda, 8 Calon Menteri Jokowi: 2 Anak Eks Presiden',
          ilustrasi: 'https://cdn2.tstatic.net/makassar/foto/bank/images/presiden-joko-widodo-atau-jokowi-2-120092019.jpg',
          kategori: 'Hiburan',
          tgl: 'Selasa, 6 Agustus 2019 - 00.60 WIB',
          isi: ''
        },
        {
          id: 6,
          judul: 'Jadwal Siaran Langsung SCTV Liga Champions Pekan Ini: 22 Dan 23 Oktober 2019',
          ilustrasi: 'https://cdn0-production-images-kly.akamaized.net/bLyQUozygokhj5PFx9YJMMWiAno=/640x360/smart/filters:quality(75):strip_icc():format(webp)/kly-media-production/medias/1065523/original/000761100_1448366132-CL-logo.jpg',
          kategori: 'Olahraga',
          tgl: 'Selasa, 6 Agustus 2019 - 00.60 WIB',
          isi: ''
        },
      ]
    }
  }

    render() {
      console.log(this.props)
      const data = this.state.terkiniBeritas
      if (data.lenght===0){
        return <SplashScreen/>
      }
        return (
            <Container style={{backgroundColor: 'black'}}>
                <Content>

                  {/* header mainscreens */}

                  <View style={{flex: 1, backgroundColor: '#2E3136'}}>
                  <TouchableOpacity
                    onPress={() => this.props.navigation.navigate('TerkiniDesc')}
                    >
                    <Image source={{uri: this.state.terkiniBeritas[0].ilustrasi}} style={darkStyles.imageHeadline} />
                    <View style={darkStyles.backgroundHeadline}/>
                    <Text note numberOfLines={1} style={darkStyles.kategoriHeadline}>{ this.state.terkiniBeritas[0].kategori }</Text>
                    <Text numberOfLines={2} style={darkStyles.judulHeadline}>{ this.state.terkiniBeritas[0].judul }</Text>
                    <Text note numberOfLines={1} style={darkStyles.tglHeadline}>{ this.state.terkiniBeritas[0].tgl }</Text>
                  </TouchableOpacity>
                  </View>

                <SafeAreaView style={{borderTopLeftRadius: 17,borderTopRightRadius: 17, backgroundColor: '#FFFFFF'}}>
                    <FlatList
                        // jika dari Data.json
                        // data = {DATA}
                        data = {this.state.terkiniBeritas}
                        renderItem = {({ item }) => {
                          return(
                            <TerkiniMain
                              judul={item.judul}
                              ilustrasi={item.ilustrasi}
                              tgl={item.tgl}
                              kategori={item.kategori}
                              navigation={this.props.navigation}
                            />
                          )
                        }}
                        keyExtractor= {(item, index) => index.toString()}
                    />
                </SafeAreaView>
                </Content>
            </Container>
        )
    }
}

const darkStyles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#2E3136'
    },
    backgroundHeadline: {
      backgroundColor:'black',
      position:'absolute',
      width:'100%',
      height:220,
      opacity: 0.5,
    },
    imageHeadline: {
      height: 240,
      width: null,
      flex: 1,
    },
    judulHeadline: {
      marginHorizontal: 10,
      fontSize: 22 ,
      color: 'white',
      position: 'absolute',
      textAlign: 'left',
      alignSelf: 'center',
      marginTop: 150,
      fontWeight: '700'
    },
    kategoriHeadline: {
      marginHorizontal: 10,
      fontSize: 17 ,
      color: 'white',
      position: 'absolute',
      textAlign: 'center',
      justifyContent: 'center',
      marginTop: 125,
      fontWeight: '700',
      width: 80,
      backgroundColor: '#2980b9'
    },
    tglHeadline: {
      marginHorizontal: 10,
      fontSize: 14,
      position: 'absolute',
      textAlign: 'center',
      justifyContent: 'center',
      marginTop: 205,
      fontWeight: '500',
      color: '#dcdede'
    },
  })