React Native Cards

React Native Cards

Hi In this tutorial I am going to let you guys know about react native cards,

React-Native-Cards
React-Native-Cards

Cards are used to show any kind of profile or user data (Profile) . There are various type of cards available in react native.

I am using Native Base library for UI Elements.

Here is the coding for Native base cards:

<Content>
<Card>
<CardItem>
<Body>
<Text>
//Welcome to Online Tutorial
</Text>
</Body>
</CardItem>
</Card>
</Content>
Body tag in this coding Shows the main content in the card
This Coding give us following output,
After that there are some cards which can use header and footer as well.
Coding for the same as follow :
<Content>
<Card>
<CardItem header>
<Text>NativeBase</Text>
</CardItem>
<CardItem>
<Body>
<Text>
//Your text here
</Text>
</Body>
</CardItem>
<CardItem footer>
<Text>GeekyAnts</Text>
</CardItem>
</Card>
</Content>

You can see in the above code I have used header and footer for the cards.

Header and footer make design more attractive than normal.
Here’s output for the above code :
After this you can see in the output header and footer not looking nice to make it more attractive we can add some styles to it.
So let’s add some borders to this card to make our card more attractive:
Here is the code for adding border into the card header and footer:
<Content padder>
<Card>
<CardItem header bordered>
<Text>My Header</Text>
</CardItem>
<CardItem bordered>
<Body>
<Text>
lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text 
</Text>
</Body>
</CardItem>
<CardItem footer bordered>
<Text>My Footer</Text>
</CardItem>
</Card>
</Content>
So, as you can see there I have used bodered in card item footer and header.
Output for the same as follow:
You can see the header and footer with bordered in the above output.
Here is the final code for React native cards:
import React, { Component } from "react";
import { Container, Header, Content, Card, CardItem, Text, Body } from "native-base";
export default class CardItemBordered extends Component {
render() {
return (
<Container>
<Header />
<Content padder>
<Card>
<CardItem header bordered>
<Text>My Header</Text>
</CardItem>
<CardItem bordered>
<Body>
<Text>
lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text 
</Text>
</Body>
</CardItem>
<CardItem footer bordered>
<Text>My Footer</Text>
</CardItem>
</Card>
</Content>
</Container>
);
}
}

So Hope you guys enjoy my article about react native cards, stay tuned for my further updates.

You can also download my code from github:

Download project on Github
Download project on Github

19 thoughts on “React Native Cards

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Have you ever thought about publishing an ebook or guest
    authoring on other websites? I have a blog centered on the same information you discuss and
    would love to have you share some stories/information. I know my audience would
    value your work. If you’re even remotely interested, feel free to shoot me an email.

  2. I am really loving the theme/design of your website.
    Do you ever run into any browser compatibility problems?
    A couple of my blog readers have complained about my website not operating correctly in Explorer but looks great in Opera.
    Do you have any suggestions to help fix this problem?

  3. Woah! I’m really enjoying the template/theme of this blog.
    It’s simple, yet effective. A lot of times it’s
    hard to get that “perfect balance” between usability and appearance.
    I must say you have done a superb job with this.

    In addition, the blog loads extremely quick for me
    on Opera. Outstanding Blog!

  4. Hey there! I know this is somewhat off-topic however I had to ask.
    Does building a well-established website such as yours take a large
    amount of work? I am brand new to operating a blog but I do write in my diary every day.
    I’d like to start a blog so I can easily share my own experience and
    feelings online. Please let me know if you have any suggestions or
    tips for new aspiring blog owners. Appreciate it!

  5. I do not know if it’s just me or if everybody else experiencing issues with your site.
    It looks like some of the text within your posts are running off the screen. Can someone else please provide feedback and let me
    know if this is happening to them too? This may be a issue with my internet browser because I’ve had this
    happen previously. Cheers

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.