Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-native-material-cards
Advanced tools
Readme
A material design card component, customizable and versatile.
See Google Material Design for more info on Cards.
npm install --save react-native-material-cards
Import the components like so:
import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards'
Then insert the card in your code:
<Card>
<CardImage
source={{uri: 'http://placehold.it/480x270'}}
title="Above all i am here"
/>
<CardTitle
title="This is a title"
subtitle="This is subtitle"
/>
<CardContent text="Your device will reboot in few seconds once successful, be patient meanwhile" />
<CardAction
separator={true}
inColumn={false}>
<CardButton
onPress={() => {}}
title="Push"
color="blue"
/>
<CardButton
onPress={() => {}}
title="Later"
color="blue"
/>
</CardAction>
</Card>
Prop | Type | Effect | Default Value |
---|---|---|---|
isDark | boolean | If the card background is dark, sets a light text color, this prop is passed to all child components | true |
mediaSource | object | The image to show in background of a card, with content overlayed, passed to Image's source prop | undefined |
avatarSource | object | The avatar image to be shown in the card's content or header section, whichever comes first, passed to Image's source prop | undefined |
style | object | The style object to be merged with the default style of root container | {} |
Prop | Type | Effect | Default Value |
---|---|---|---|
title | string | The title text | undefined |
subtitle | string | The subtitle text | undefined |
subtitleAbove | boolean | Whether the subtitle should be shown above the title | false |
avatarSource | object | The avatar image to be shown, passed to Image's source prop | undefined |
style | object | The style object to be merged with the default style of root container | {} |
titleStyle | object | The style object to be merged with the default style of title text | {} |
subtitleStyle | object | The style object to be merged with the default style of subtitle text | {} |
Prop | Type | Effect | Default Value |
---|---|---|---|
text | string | The content text, this can be skipped and any custom content can be rendered as children | undefined |
avatarSource | object | The avatar image to be shown, passed to Image's source prop | undefined |
style | object | The style object to be merged with the default style of root container | {} |
textStyle | object | The style object to be merged with the default style of text | {} |
Prop | Type | Effect | Default Value |
---|---|---|---|
source | object | The image to be shown, passed to Image's source prop, , this can be skipped and any custom image or content can be rendered as children | undefined |
resizeMode | string | Determines how to resize the image when the frame doesn't match the raw image dimensions | stretch |
resizeMethod | string | Resize the image when the image's dimensions differ from the image view's dimensions. | resize |
singleLineTitle | boolean | Set to true if you want the title to be one line, redacted with ellipses | true |
style | object | The style object to be merged with the default style of root container | {} |
textStyle | object | The style object to be merged with the default style of text | {} |
Prop | Type | Effect | Default Value |
---|---|---|---|
separator | boolean | Whether a separator should be shown | true |
inColumn | boolean | Whether the buttons should be stacked in a column | false |
style | object | The style object to be merged with the default style of root container | {} |
Prop | Type | Effect | Default Value |
---|---|---|---|
title | string | The button's text, this can be skipped and any custom title or content can be rendered as children | undefined |
color | string | The color of button text | orange |
onPress | function | The function to be called when button is pressed | noop (defined in src/utils ) |
style | object | The style object to be merged with the default style of root container | {} |
titleStyle | object | The style object to be merged with the default style of button title | {} |
PRs are welcome :)
FAQs
A material design card component, customizable and versatile
The npm package react-native-material-cards receives a total of 33 weekly downloads. As such, react-native-material-cards popularity was classified as not popular.
We found that react-native-material-cards demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.