App.js

import React, { useEffect, useState } from "react"
import { ScrollView, StatusBar, StyleSheet, View } from "react-native"
import Header from "./component/Header"
import PrayerScheduleCard from "./component/PrayerScheduleCard"

const prayerData = [
  {
    title: "Fajr",
    time: "04:25 (WIB)",
  },
  {
    title: "Sunrise",
    time: "05:25 (WIB)",
  },
  {
    title: "Dhuhr",
    time: "11:28 (WIB)",
  },
  {
    title: "Asr",
    time: "15:01 (WIB)",
  },
  {
    title: "Maghrib",
    time: "17:50 (WIB)",
  },
  {
    title: "Isha",
    time: "18:51 (WIB)",
  },
]

const App = () => {
  return (
    <ScrollView style={styles.mainContainer}>
      <StatusBar backgroundColor={"rgb(239,81,83)"} />
      <Header title={"Hello Rino!"} time={"15:31"} />
      <View style={styles.prayerCardContainer}>
        <PrayerScheduleCard location={"Bandung"} prayers={prayerData} />
      </View>
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  mainContainer: {
    backgroundColor: "rgb(255,248,222)",
    flexGrow: 1,
  },
  prayerCardContainer: {
    top: -48,
  },
})
export default App