React Native Cards - Geekscoders

React Native

About Lesson

In this React Native lesson we are going to learn about React Native Cards, so a card is a sheet of material that serves as an entry point to more detailed information. for creating cards in react native we are going to use a third party library that is called react native paper, Paper is a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines.

First of all you need to install react native paper.

yarn add react-native-paper

1	yarn add react-native-paper

Or you can use npm

npm install react-native-paper

1	npm install react-native-paper

This is our CreateCard.js component, we have used Card tag for creating our card, after that you need to give card content like title and paragraph, also i have added an image to my card, make sure that you have already added an image to your working directory, you can use Card.Cover for adding an image to your react native card, using Card.Actions we can add actions like OK, Cancel to our card.

import React from 'react'
import { View, ScrollView } from 'react-native';
import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';

const LeftContent = props => <Avatar.Icon {...props} icon="folder" />

function CreateCard() {
    return (
        <ScrollView >
        <Card style={{ padding: 20, margin:10, backgroundColor:"#eddfdf" }}>
            <Card.Content>
                <Title>How to Make Cake</Title>
                <Paragraph>You will learn how to make cake easily </Paragraph>
            </Card.Content>
            <Card.Cover source={require('../img/cake.jpg')} />
            <Card.Actions>
                <Button>Cancel</Button>
                <Button>Ok</Button>
            </Card.Actions>
        </Card>

        <Card style={{ padding: 20, margin:10, backgroundColor:"#eddfdf" }}>
            <Card.Content>
                <Title>How to Make Cake</Title>
                <Paragraph>You will learn how to make cake easily </Paragraph>
            </Card.Content>
            <Card.Cover source={require('../img/cake.jpg')} />
            <Card.Actions>
                <Button>Cancel</Button>
                <Button>Ok</Button>
            </Card.Actions>
        </Card>

    </ScrollView>  
       
    )
}

export default CreateCard

import React from 'react'

import { View, ScrollView } from 'react-native';

import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';

const LeftContent = props => <Avatar.Icon {...props} icon="folder" />

function CreateCard() {

return (

<Card.Content>

<Paragraph>You will learn how to make cake easily </Paragraph>

</Card.Content>

<Card.Cover source={require('../img/cake.jpg')} />

<Card.Actions>

<Button>Cancel</Button>

</Card.Actions>

</Card>

<Card.Content>

<Paragraph>You will learn how to make cake easily </Paragraph>

</Card.Content>

<Card.Cover source={require('../img/cake.jpg')} />

<Card.Actions>

<Button>Cancel</Button>

</Card.Actions>

</Card>

</ScrollView>

)

}

export default CreateCard

This is our App.js file and we have our Card component in this file.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import CreateCard from './components/CreateCard';



export default function App() {
  return (
 
     <View>
    
        <CreateCard/>
     </View>
  
  );
}

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

import CreateCard from './components/CreateCard';

export default function App() {

return (

<View>

</View>

);

}

Run your application this will be the result.