Create a Card View in React native using react-native-paper

Last Updated : 01 Mar, 2022

React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms.

Approach: In this article, we will see how to create a card-like view in react native without using much CSS. Here, we are going to create a card that will have a title on the top, an image, a paragraph that will provide an image description, and a button.

Below is the step by step implementation

Step 1: Create a react-native project

npx react-native init DemoProject

Step 2: Now install react-native-paper

npm install react-native-paper

Step 3: Create a components folder inside your project. Inside the components folder create a file Cards.js

Project Structure: It will look like the following.

Step 4: Now we will create a simple card-like view. We can use card components directly from the react-native-paper library.

Cards.js

import React  from "react"; 
import { Text ,View, StyleSheet } from 'react-native'; 
import {Card, Button , Title ,Paragraph } from 'react-native-paper'; 
  
const CreateCard = () => { 
      
    return( 
         
        <Card style={Styles.container}> 
        <Card.Content> 
            <Title>Geeks For Geeks</Title> 
        </Card.Content> 
        <Card.Cover source={{ uri: ' 
https://media.geeksforgeeks.org/wp-content/uploads/20220217151648/download3-200x200.png' }} /> 
       <Card.Content> 
        <Paragraph>A Computer Science portal for Geeks</Paragraph> 
        </Card.Content> 
        <Card.Actions> 
          <Button>Add To Favourites</Button> 
        </Card.Actions> 
      </Card> 
         
    ) 
} 
export default CreateCard; 
  
const Styles = StyleSheet.create({ 
    container :{ 
        alignContent:'center', 
        margin:37 
    } 
})

Step 5: Now, import CreateCard in your App.js :

App.js

import React from 'react'; 
 import type {Node} from 'react'; 
 import { StyleSheet, Text, View} from 'react-native'; 
  
 import CreateCard from './components/Cards'
  
  const App: () => Node = () => { 
  
    return ( 
  
        <View> 
           <CreateCard /> 
        </View> 
  
     ); 
  
}; 
  
export default App;