react-native-card-ui
v1.1.3
Published
cards
Readme
react-native-card-ui
react-native-card-ui is a ui library that help developer to create beautiful react native ios and android application by coding less .
Dependences
react-native-card-ui uses some others libraries like:
- react-native-size-matters - for scale the ui screen.
- react-native-vector-icons - for icons.
And of course react-native-card-ui itself is open source with a public repository on GitHub.
Installation
Install the dependencies need to work well.
Let's install react-native-vector-icons
$ cd approot
$ npm install react-native-vector-icons
$ react-native link react-native-vector-iconsLet's install react-native-size-matters
$ cd approot
$ npm install --save react-native-size-mattersNow let's install react-native-card-ui
$ npm install --save react-native-card-uiCardEcomOne
<CardEcomOne
title={"NIKE SILVER"}
price={"$200"}
image={require("./nikesilver.png")} //OR {{uri:"http://......"}}
icon={"star"}
nbStar={3}
iconColor={"#FFC57C"}
colorList={["#000000", "#0b8457", "#7ed3b2"]}
selectColor={"#000000"}
getSelectColor={color => alert(color)}
/>CardEcomTwo
<CardEcomTwo
title={"Porsche Rubber"}
subTitle={ "Zermatt is famed as a mounering and ski destome banmdo liono"}
price={"$200"}
image= {require("./montre.png")} // OR {{uri:"http://......"}}
/>CardEcomThree
<CardEcomThree
title={"Porsche Rubber"}
subTitle={"Zermatt is famed as a mounering and ski destome banmdo liono"}
price={"$200"}
image={require("./sac.png")} // OR {{uri:"http://......"}}
buttonText={"Buy now"}
buttonColor={"#ff2788"}
onClickButton={() => alert("Has clicked")}
/>CardEcomFour
<CardEcomFour
title={"Porsche Rubber"}
subTitle={"Zermatt is famed as a mounering and ski destome banmdo liono"}
price={"$200"}
image={require("./acg.png")}
buttonText={"VIEW DETAILS"}
buttonColor={"#4383FF"}
onClickButton={() => alert("Has clicked")}
/>CardOne
<CardOne
height={100}
width={100}
borderRadius={20}
shadowColor={"blue"}
image={require("./placeholderImage.jpg")} // OR {{uri:"http://......"}}
/>CardTwo
<CardTwo
title={"John Bob will"}
subTitle={"Devlopper"}
profile={{
uri:
"http://www.annonce-musicien.fr/assets/user_xl-e4e8b0bbfd2332dce41ff66644dd16f2.png"
}}
image={{
uri:
"https://www.gettyimages.com/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg"
}}
icon={"apple"}
iconColor={"red"}
/>CardThree
<CardThree
title={"John Bob"}
subTitle={"Devlopper"}
profile={{
uri:
"http://www.annonce-musicien.fr/assets/user_xl-e4e8b0bbfd2332dce41ff66644dd16f2.png"
}}
icon={"forward"}
iconColor={"grey"}
/>CardFour
<CardFour
onClicked={() => {
alert("Buy now");
}}
image={{
uri:
"https://www.gettyimages.com/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg"
}}
date={"24 December 2018"}
off={"-25%"}
offText={
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
buttonText={"BUY NOW!"}
/>CardFive
<CardFive
title={"Vinny’s Barber"}
subTitle={"852 N Virgil Ave, Beverly Hills"}
profile={{
uri:
"https://www.gettyimages.com/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg"
}}
image={{
uri:
"https://www.chambre237.com/wp-content/uploads/2017/09/Un-Photographe-professionnel-partage-ses-Secrets-pour-capturer-des-Photos-de-Paysage-parfaites-03.jpg"
}}
icon={"star"}
nbStar={3}
iconColor={"#FFC57C"}
/>CardSix
<CardSix
title={"Vinny’s Barber"}
subTitle={"852 N Virgil Ave, Beverly Hills"}
profile={{
uri:
"https://lemag.nikonclub.fr/wp-content/uploads/2016/11/Photo-selection-pour-Nikon-France-Mattia-Bonavida-2016-6.jpg"
}}
image={{
uri:
"https://idinterdesign.ca/wp-content/uploads/2016/07/paysage-ID-02-750x468.jpg"
}}
icon1={"star"}
iconColor1={"#fff"}
iconBackground1={"red"}
onClicked1={() => {
alert("Hello!");
}}
icon2={"rocket"}
iconColor2={"#fff"}
iconBackground2={"purple"}
onClicked2={() => {
alert("Hello!");
}}
/>CardSeven
<CardSeven
title={"Vinny’s Barber"}
subTitle={"852 N Virgil Ave, Beverly Hills"}
image={{
uri:
"http://www.bretagne-paysage.fr/sites/bretagn2016/files/styles/large/public/diaporama/paysagiste-plerin_5.jpg?itok=9Qyy75zj"
}}
icon1={"share"}
iconColor1={"#fff"}
iconBackground1={"purple"}
onClicked1={() => {
alert("Hello!");
}}
icon2={"heart"}
iconColor2={"#fff"}
iconBackground2={"red"}
onClicked2={() => {
alert("Hello!");
}}
/>CardEight
<CardEight
image1={{
uri:
"https://i.pinimg.com/originals/c5/2f/c9/c52fc99b6fecac8e6bc20a8ccc83a7e1.jpg"
}}
image2={{
uri:
"https://i.skyrock.net/8763/90148763/pics/3210114483_1_8_NbfxWMCA.jpg"
}}
image3={{
uri: "https://img.ev.mu/images/articles/960x/450056.jpg"
}}
/>CardNine
<CardNine
title={"Crazy House"}
subTitle={
"Lorem ipsum dolor sit amet, consectetuer adipiscin elit, sed diam nonummy nibh euismod"
}
image={{
uri:
"https://images.unsplash.com/photo-1513584684374-8bab748fbf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
}}
price={33.5}
onClicked={() => {
alert("Hello!");
}}
/>CardTen
<CardTen
title={"Sweety Cake"}
subTitle={"70, Nevsky Avenue"}
image={{
uri:
"http://www.piochenevada.org/wp-content/uploads/2018/07/Modern-house.jpg"
}}
price={33.5}
star={3}
starsFor={"240 reviews"}
/>CardEleven
<CardEleven
price={"$900/month"}
title={"Louvre apartment"}
subTitle={"Double family house"}
stars={4}
tags={["wifi", "Air cond.", "TV", "Kitchen"]}
image1={{
uri:
"https://i.pinimg.com/originals/c4/9b/f9/c49bf95e4e02873610daf3bfda54e44a.jpg"
}}
image2={{
uri:
"https://i.pinimg.com/originals/c4/9b/f9/c49bf95e4e02873610daf3bfda54e44a.jpg"
}}
backgroundImage={{
uri:
"https://i.pinimg.com/originals/c4/9b/f9/c49bf95e4e02873610daf3bfda54e44a.jpg"
}}
onClickedShare={() => alert("Hello")}
onClickedPlus={() => alert("Hello")}
/>CardTwelve
<CardTwelve
image={{
uri:
"https://i.pinimg.com/originals/c4/9b/f9/c49bf95e4e02873610daf3bfda54e44a.jpg"
}}
title={"Card name"}
subTitle={"John Bob"}
viewProgress={true}
progress={2}
/>