Create a Card View in React native using react-native-paper
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>Beginner For Beginner</Title> </Card.Content> <Card.Cover source={{ uri: ' https://media.w3wiki.net/wp-content/uploads/20220217151648/download3-200x200.png' }} /> <Card.Content> <Paragraph>A Computer Science portal for Beginner</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; |
Step to run the application: Save your Changes. Open the terminal and type the following command.
npx react-native run-android
Output:
Contact Us