React Native Material Card Example


Share:
Published By: Admin, Published On: Apr 24, 2021, Category: React Native

Hi Guys,

In this blog, I will explain you how to create material ui Card in react native. You can easily create material ui Card in react native. First i will import stylesheet namespace from react-native-paper, after I will make material ui Card using in react native.

Here, I will give you full example for simply display material ui Card using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init MaterialUICard
Step 2 - Install Package

In the step,I will install npm i react-native-material-Card package.

npm i react-native-paper
Step 3 - App.js

In this step, You will open App.js file and put the code.

import * as React from 'react';
import { Text, StyleSheet } from 'react-native';
import { Card, Provider,Button ,Appbar ,Title,Paragraph} from 'react-native-paper';

const MyComponent = () => {

  const _goBack = () => console.log('Went back');

  const _handleSearch = () => console.log('Searching');

  const _handleMore = () => console.log('Shown more');

  return (
    <Provider>
    <Appbar.Header>
      <Appbar.BackAction onPress={_goBack} />
      <Appbar.Content title="Mywebtuts" subtitle="Subtitle" />
      <Appbar.Action icon="magnify" onPress={_handleSearch} />
      <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
    </Appbar.Header>
   
     <Card style={styles.cardbox}>
      <Card.Actions>
        <Card.Title
          title="React Native"
          subtitle="Card Subtitle"
        />
      </Card.Actions>
    </Card>
    <Card style={styles.cardbox}>
      <Card.Actions>
        <Card.Title
          title="Laravel"
          subtitle="Card Subtitle"
        />
      </Card.Actions>
    </Card>
    <Card style={styles.cardbox}>
      <Card.Actions>
        <Card.Title
          title="Android"
          subtitle="Card Subtitle"
        />
      </Card.Actions>
    </Card>
    <Card style={styles.cardbox}>
      <Card.Actions>
        <Card.Title
          title="ios"
          subtitle="Card Subtitle"
        />
      </Card.Actions>
    </Card>
    </Provider>
  );
};


const styles = StyleSheet.create({
  image:{
    width:345,

  },
  cardbox:{
    margin: 10,
  }
});
export default MyComponent;
Step 4 - Run project

In the last step run your project using bellow command.

npm start
Output
It will help you...
Share: