1.0.2 • Published 5 years ago
text-drawable v1.0.2
text-drawable
A simple and fully customizable React Native component that implements a Text drawable.
| iPhone Screen | Android Screen |
|---|---|
 |  |
Installation
If using yarn:
yarn add text-drawableIf using npm:
npm i text-drawableUsage
import { ProfileThumbnail, ThumbnailList } from 'text-drawable';Simply place a <ThumbnailList /> tag with parameter.
Drawable container and text are fully customizable using the textStyle, titleStyle, and descriptionStyle props.
<View style={{flex: 1}}>
<ThumbnailList data={[
{
title: "Java",
description:"Java Description",
backgroundColor:"green",
},
{
title: "React native",
backgroundColor:"red",
},
{
title: "Javaascript",
backgroundColor:"blue",
}
]}
label="A"
backgroundColor="green"/>
</View>
</View>ProfileThumbnail
Example usage to change a single drawable image:
return (
<View style={{flex: 1}}>
<ProfileThumbnail
label="A"
backgroundColor="green"/>
</View>
)Documentation
ProfileThumbnail Component
| Name | Description | Default | Type |
|---|---|---|---|
| label | Display First character of label | optinal | String |
| size | Size of text drawable | 50 | Number |
| backgroundColor | Back ground color of text drawable | green | String |
| imageURL | Add image url to load image from url | optinal | String |
| localImage | Add local path to display image from local | optinal | object |
| textStyle | Text drawable style for text | optinal | object |
ThumbnailList Component
| Name | Description | Default | Type |
|---|---|---|---|
| label | Display First character of label string | optinal | String |
| size | height and width of text drawable view | 50 | Number |
| backgroundColor | backgroundColor of text drawable view | optinal | String |
| imageURL | Add image url to load image from url | optinal | String |
| localImage | Add local path to display image from local(like require("image path")) | optinal | object |
| textStyle | Text drawable style for text | optinal | String |
| descriptionStyle | Add style for description text | optinal | String |
| titleStyle | Add title style for title text | optinal | String |
| data | Pass array for display list | { title: "Java", description:"Java Description", backgroundColor:"green",}, {title: "React native", description:"React native Description", backgroundColor:"red"} | Array |
Contributing
Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.
Author
Aniruddh Kukadiya