armadiazrino

PrayerScheduleCard.js

Nov 29th, 2020
598
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react"
  2. import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native"
  3.  
  4. const PrayerScheduleCard = (props) => {
  5.   return (
  6.     <View style={styles.mainContainer}>
  7.       <View style={styles.cardContainer}>
  8.         <View style={styles.locationContainer}>
  9.           <Image
  10.             source={require("../../images/marker.png")}
  11.             style={styles.locationImage}
  12.           />
  13.           <Text style={styles.locationText}>{props.location}</Text>
  14.         </View>
  15.         {props.prayers?.map((item, index) => {
  16.           return (
  17.             <View key={index} style={styles.prayItem}>
  18.               <Text style={styles.titleItem}>{item.title}</Text>
  19.               <Text style={styles.timeItem}>{item.time}</Text>
  20.               <View style={styles.horizontalSeparator} />
  21.               <TouchableOpacity>
  22.                 <Image
  23.                   source={require("../../images/bell.png")}
  24.                   style={styles.locationImage}
  25.                 />
  26.               </TouchableOpacity>
  27.             </View>
  28.           )
  29.         })}
  30.       </View>
  31.     </View>
  32.   )
  33. }
  34.  
  35. const styles = StyleSheet.create({
  36.   mainContainer: {
  37.     marginHorizontal: 32,
  38.     padding: 16,
  39.     borderRadius: 16,
  40.     backgroundColor: "rgb(255,248,222)",
  41.     elevation: 6,
  42.   },
  43.   cardContainer: {},
  44.   locationContainer: {
  45.     flexDirection: "row",
  46.     alignItems: "center",
  47.     justifyContent: "center",
  48.   },
  49.   locationImage: {
  50.     height: 16,
  51.     width: 16,
  52.   },
  53.   locationText: {
  54.     fontWeight: "bold",
  55.     marginLeft: 8,
  56.     color: "rgb(239,81,83)",
  57.   },
  58.   prayItem: {
  59.     flexDirection: "row",
  60.     marginTop: 24,
  61.     marginHorizontal: 8,
  62.     alignItems: "center",
  63.   },
  64.   titleItem: {
  65.     fontSize: 18,
  66.     flex: 1,
  67.   },
  68.   timeItem: {
  69.     fontSize: 18,
  70.   },
  71.   horizontalSeparator: {
  72.     marginHorizontal: 8,
  73.   },
  74. })
  75.  
  76. export default PrayerScheduleCard
  77.  
RAW Paste Data