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.

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

expo init MaterialUICard

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

npm i react-native-paper

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;

In the last step run your project using bellow command.

npm start