React Native Material Card Example
Apr 24, 2021 . Admin

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 projectIn the first step Run the following command for create project.
expo init MaterialUICardStep 2 - Install Package
In the step,I will install npm i react-native-material-Card package.
npm i react-native-paperStep 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 startOutput
