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-drawable

If using npm:

npm i text-drawable

Usage

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

License

[ISC]