HotelItem is a pure NativeBase component. HotelItem is a flexible and extensible content container for showing hotel item with kind of view list/grid/block
Usage
let item = {
image: require("@assets/images/hotel-01.jpg"),
name: "Boston Hotel",
location: "553 Gislason Radial",
price: "$125",
available: "Only 1 rooms leave",
rate: 4.5,
rateStatus: "Very Good",
rateCount: "85 of 100",
numReviews: 100,
services: [
{ icon: "wifi", name: "Free Wifi" },
{ icon: "coffee", name: "Free Coffee" },
{ icon: "bath", name: "Free Bath" },
{ icon: "car", name: "Free Car" },
{ icon: "paw", name: "Free Paw" },
{ icon: "futbol", name: "Free Futbol" }
]
}
<HotelItem
grid
image={item.image}
name={item.name}
location={item.location}
price={item.price}
available={item.available}
rate={item.rate}
rateStatus={item.rateStatus}
numReviews={item.numReviews}
services={item.services}
style={
index % 2 ? { marginLeft: 15 } : {}
}
onPress={() =>
navigation.navigate("HotelDetail") // call internal function
}
/>
Props
style
Type: StyleProp
Customize CSS style ViewStyle
list
Type: Boolean | Default
Display item as list view
block
Type: Boolean
Display item as block view
grid
Type: Boolean
Display item as grid view
image
Type: String | Required
Path of image display on card
name
Type: String | Required
Hotel name
location
Type: String | Required
Address of hotel
price
Type: String | Required
Pricing of item include unit
available
Type: String
Just string for showing any purpose. Example: Only 4 rooms leaft
rate
Type: Number | Required
Number of rating
rateCount
Type: String
Total number of user reviews
rateStatus
Type: String
Result of review as string: Very Good, Bad, Normal …
numReviews
Type: String
Total number of reviewers
services
Type: Array[{icon, name}, ….]
List of icon and name.
Icon: String (icon name of FontAwesome)
Name: String
onPress
Type: Function
Function to execute on press hotel item
onPressTag
Type: Function
Function to execute on press service icons