Card Media component for React Native

Overview

react-native-card-media

Card Media component for React Native. Also supports multiple image layout.

single & double

single & double

three & four

three & four

five

five

Installation

npm install react-native-card-media --save

Examples

CardMediaExample

Usage

const files5 = [
  `${path}kids_play_640.jpeg`,
  `${path}road_640.jpg`,
  `${path}women_640.jpeg`,
  `${path}sea_kids_640.jpeg`,
  `${path}temple_640.jpeg`,
];

<CardMedia
  files={files5}
  style={{ height: 200 }}
  title="Title"
  showTitle={false}
  titleStyle={{ fontSize: 24, fontWeight: '400', lineHeight: 32, color: '#fafafa' }}
  onPress={() => this.onPress()}
  imageIconView={this.renderImageIconView}
  imageCountStyle={{ fontSize: 20, fontWeight: '500', lineHeight: 28, color: '#fafafa' }}
  titleTouchable={false}
  imageTouchable={false}
/>

Props

Prop Description Type Default
files Media lists Array Required
style CardView style View Style Object undefined
title Title text is shown at below part of card String undefined
showTitle Title is shown or not Boolean true
titleStyle Title style View Style Object undefined
onPress Action is called when click in card Function undefined
imageIconView Icon is shown near title Component undefined
imageCountStyle Icon style View Style Object undefined
titleTouchable Title is clickable or not Boolean true
imageTouchable Images in card is clickable or not Boolean true

License

MIT

Comments
  • Bump ua-parser-js from 0.7.12 to 0.7.28

    Bump ua-parser-js from 0.7.12 to 0.7.28

    Bumps ua-parser-js from 0.7.12 to 0.7.28.

    Commits
    • 1d3c98a Revert breaking fix #279 and release as 0.7.28
    • 535f11b Delete redundant code
    • 642c039 Fix #492 LG TV WebOS detection
    • 3edacdd Merge branch 'master' into develop
    • acc0b91 Update contributor list
    • f726dcd Merge branch 'master' into develop
    • 383ca58 More test for tablet devices
    • 7c8aa43 Minor rearrangement
    • 09aa910 Add new device & browser: Tesla
    • 557cc21 More test for latest phones with unique form factor (fold/flip/qwerty/swivel)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump async from 2.2.0 to 2.6.4

    Bump async from 2.2.0 to 2.6.4

    Bumps async from 2.2.0 to 2.6.4.

    Release notes

    Sourced from async's releases.

    v2.3.0

    • Added support for ES2017 async functions. Wherever you can pass a Node-style/CPS function that uses a callback, you can also pass an async function. Previously, you had to wrap async functions with asyncify. The caveat is that it will only work if async functions are supported natively in your environment, transpiled implementations can't be detected. (#1386, #1390)
    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)

    v2.6.3

    • Updated lodash to squelch a security warning (#1675)

    v2.6.2

    • Updated lodash to squelch a security warning (#1620)

    v2.6.1

    • Updated lodash to prevent npm audit warnings. (#1532, #1533)
    • Made async-es more optimized for webpack users (#1517)
    • Fixed a stack overflow with large collections and a synchronous iterator (#1514)
    • Various small fixes/chores (#1505, #1511, #1527, #1530)

    v2.6.0

    • Added missing aliases for many methods. Previously, you could not (e.g.) require('async/find') or use async.anyLimit. (#1483)
    • Improved queue performance. (#1448, #1454)
    • Add missing sourcemap (#1452, #1453)
    • Various doc updates (#1448, #1471, #1483)

    v2.5.0

    • Added concatLimit, the Limit equivalent of concat (#1426, #1430)
    • concat improvements: it now preserves order, handles falsy values and the iteratee callback takes a variable number of arguments (#1437, #1436)
    • Fixed an issue in queue where there was a size discrepancy between workersList().length and running() (#1428, #1429)
    • Various doc fixes (#1422, #1424)

    v2.4.1

    • Fixed a bug preventing functions wrapped with timeout() from being re-used. (#1418, #1419)

    v2.4.0

    • Added tryEach, for running async functions in parallel, where you only expect one to succeed. (#1365, #687)
    • Improved performance, most notably in parallel and waterfall (#1395)
    • Added queue.remove(), for removing items in a queue (#1397, #1391)
    • Fixed using eval, preventing Async from running in pages with Content Security Policy (#1404, #1403)
    • Fixed errors thrown in an asyncifyed function's callback being caught by the underlying Promise (#1408)
    • Fixed timing of queue.empty() (#1367)
    • Various doc fixes (#1314, #1394, #1412)

    v2.3.0

    • Added support for ES2017 async functions. Wherever you can pass a Node-style/CPS function that uses a callback, you can also pass an async function. Previously, you had to wrap async functions with asyncify. The caveat is that it will only work if async functions are supported natively in your environment, transpiled implementations can't be detected. (#1386, #1390)
    • Small doc fix (#1392)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ua-parser-js from 0.7.12 to 0.7.31

    Bump ua-parser-js from 0.7.12 to 0.7.31

    Bumps ua-parser-js from 0.7.12 to 0.7.31.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump tmpl from 1.0.4 to 1.0.5

    Bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.5 to 1.0.7

    Bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump merge from 1.2.0 to 1.2.1

    Bump merge from 1.2.0 to 1.2.1

    Bumps merge from 1.2.0 to 1.2.1.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ws from 1.1.4 to 1.1.5

    Bump ws from 1.1.4 to 1.1.5

    Bumps ws from 1.1.4 to 1.1.5.

    Release notes

    Sourced from ws's releases.

    1.1.5

    Bug fixes

    • Fixed a DoS vulnerability (f8fdcd4).
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Dondoko Susumu
Japanese cartoonist.
Dondoko Susumu
Card Media component for React Native

react-native-card-media Card Media component for React Native. Also supports multiple image layout. single & double three & four five Installation npm

Dondoko Susumu 68 Aug 9, 2021
A react native card component

React Native Card View Only tested in IOS, but I think should works in Android too. Try it with Exponent Install npm install --save react-native-card-

Jack Lam 104 Nov 4, 2021
Simple card view component for React-Native

React Native Simple Card View Easiest way to adding a card view on your screen. Hey, v0.3.0 is now released. You can use new component : CardView See

Talut TASGIRAN 27 Mar 17, 2022
react-native-match-media ★23 - window.matchMedia mock for React Native

react-native-match-media window.matchMedia polyfill for React Native Has a peer dependency of walmartreact/react-native-orientation-listener, so make

Tucker Connelly 29 Feb 24, 2021
:sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera.

React Native Image Picker A React Native module that allows you to select a photo/video from the device library or camera. Note: If you are still usin

null 7.7k Sep 21, 2022
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!

React Native Credit Card Input Easy (and good looking) credit-card input for your React Native Project ?? ?? Code: <CreditCardInput onChange={this._on

Sam Aryasa 1.4k Sep 24, 2022
React-Native Credit Card Animated UI with information validation

rn-credit-card-ui : A Credit Card React-Native UI component, it uses react-native-flip-card to flip the UI component smoothly and creditcardutils to v

Lemine 3 Aug 8, 2022
A better credit card form for React Native

React Native Credit Card ?? A better credit card form for React Native React native port of the display of Card by @jessepollak

Sonny Lazuardi 372 Sep 23, 2022
A material design card component, customizable and versatile

react-native-material-cards A material design card component, customizable and versatile. See Google Material Design for more info on Cards. Installat

Swapnil Devesh 127 Sep 15, 2022
🏖️ Display some placeholder stuff before rendering your text or media content in React Native

Display some placeholder stuff before rendering your text or media content in React Native. Compatible with Expo and react-native-web. Snack applicati

Marvin Frachet 2k Sep 23, 2022
Local and remote media gallery with captions, selections and grid view support for react native.

React Native Photo Browser Information A full screen image gallery with captions, selections and grid view support for react-native. Layout and API de

Halil Bilir 717 May 31, 2022
Get thumbnail from local media. Currently, it only supports for video.

react-native-thumbnail Get thumbnail from local media. Currently, it only supports for video. Getting started $ npm install react-native-thumbnail --s

Hau Vo 128 May 28, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

FuYaoDe 3.2k Sep 29, 2022
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

Sunny Luo 84 Feb 23, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Shinix 62 Jul 15, 2022
React Native Higher Order Component that adds advanced caching functionality to the react native Image component.

React Native Image Cache HOC React Native Higher Order Component that adds advanced caching functionality to the react native Image component. Feature

Reid Mayo 285 Sep 26, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 114 Jul 18, 2022
A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.

react-native-image-cropview A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handle

Cristian Tomescu 12 Aug 30, 2022
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 414 Aug 29, 2022