react-native-card-media

A simple React Native component for displaying a card.

Installation

1npm install react-native-card-media

Usage

Import the Card component into the part where you want to use it.

Example :

1import React from 'react';
2import { View } from 'react-native';
3import CardMedia from 'react-native-card-media';
4
5const App = () => {
6  return (
7    <View>
8      <CardMedia />
9    </View>
10  );
11};
12export default App;

Styles

You can also customize the appearance of the component by using the available properties.

First example :

1<CardMedia 
2    image={'https://placehold.co/500x500/png'}
3    title={"Card title"}
4    subtitle={"subtitle"}
5    description={"Lorem ipsum dolor sit amet, consectetur adip"} 
6/>

Second example :

1<CardMedia 
2    image={require('./images/example.jpg')} 
3    title="Titre" 
4    subtitle="Sous-titre" 
5    description="Description" />

If you want to pass add image with url, dont't specify uri, use that like in first example

Customize

You can customize font size of title, subtitle, and description with this differents elements below: titleFontSize for title subtitleFontSize for subtitle descriptionFontSize for description

1<CardMedia 
2    image={'https://placehold.co/500x500/png'}
3    title={"Card title"}
4    subtitle={"subtitle"}
5    description={"Lorem ipsum dolor sit amet, consectetur adip"}
6    titleFontSize={40}
7    subtitleFontSize={20}
8    descriptionFontSize={20}
9/>

List of Customization Properties

1description, 
2title, 
3subtitle, 
4titleFontSize, 
5subtitleFontSize, 
6descriptionFontSize,
7width, 
8height, 
9image