App.js

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

//Custom Component bernama Pahlawaan
class Pahlawan extends React.Component {

  state = { tampil:true };//Menginisialisasi state tampil=true sebagai nilai awal

  componentDidMount(){
    setInterval(() => ( //Berfungsi untuk memanggil fungsi secara berulang-ulang
      this.setState({ tampil: !this.state.tampil })//Mengubah state menjadi nilai inversnya
    ), 1000);//Delay dalam miliseconds 1000ms = 1 detik.
  }

  render(){
    if(!this.state.tampil){//Jika tampil==false maka akan mengembalikan nilai 'null'
      return null;
    }

    return (
      <View style={{ alignItems:'center' }}>{/* <-- 1 */}
        {/* Menampilkan props 'nama' yang dikirimkan oleh Parentnya. */}
        <Text style={styles.namaPahlawan}>{this.props.nama}</Text>{/* <-- 2a */}
        <Text style={[styles.asal,{marginBottom:10}]}>Asal : {this.props.asal}</Text>{/* <-- 2b */}
      </View>
    );
  }
}

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        {/* Menampilkan Component Pahlawan dengan mengirimkan props 'nama' */}
        <Pahlawan nama="Soedirman" asal={'Rembang, Jawa Tengah '} />{/* <-- 3 */}
        <Pahlawan nama="Hasyim Asyari" asal={'Gedang, Jawa Timur'} />{/* <-- 4 */}
        <Pahlawan nama="Pangeran Diponegoro" asal={'Yogyakarta'} />{/* <-- 5 */}
        <Pahlawan nama="Ki Hadjar Dewantara" asal={'Pakualaman'} />{/* <-- 6 */}
        <Pahlawan nama="Bung Tomo" asal={'Surabaya, Jawa Timur'} />{/* <-- 7 */}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  namaPahlawan:{// <-- 8
    color:'red',
    fontSize: 20,
    fontWeight:'bold',
    marginBottom: 10
  },
  asal:{// <-- 9
    fontSize:18
  }
});