1.4.1 • Published 11 months ago

react-native-stylishlist v1.4.1

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

React Native Stylishlist

Styling of list in context of better UI with less efforts - Increases re-usability.

Installation

npm install react-native-stylishlist

Usage

Import

import StylishList from 'react-native-stylishlist';

Fundamental Usage

<StylishList {...props}/>

Configuration - Props

const pressEventTrigger = (id : number, itemData: any) => {
  console.warn(id);
  console.warn(itemData);
}

const dataList = [
  {
    leftImageUrl: 'https://xyz.com/30017.png',
    leftImageBackgroundColor: '#00D8B1',
    itemTitle: 'General',
    itemDescription: 'Lorem ipsum dolor sit amet',
    // itemColorCircle: ['#EAEAEA', 'black', 'blue'],
    onPress: pressEventTrigger,
    rightSideText: '$25',
    rightSideTextColor: 'blue'
  },
  {
    leftImageUrl: 'https://xyz.com/30018.png',
    leftImageBackgroundColor: '#00D8B1',
    itemTitle: 'Privacy & security',
    itemDescription: 'Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet',
    // itemColorCircle: ['orange', 'cyan'],
    onPress: pressEventTrigger,
    checkBoxStatus: true,
    rightSideText: '$20',
    rightSideTextColor: 'blue'
  }
];

const props = { 
  heading: 'Settings',
  headingColor: 'black',
  headingSize: 14,
  leftImageUrlFlag: true,
  belowLine: false,
  itemBoxBorder: true,
  itemBoxBorderLeftHighlight: false,
  itemBoxBorderLeftHighlightColor: 'blue',
  rightArrowVisibility: true,
  rightSideTextFlag: true,
  rightSideIcon: 'https://xyz.com/30019.png',
  dataList: dataList,
};

Fundamentals

Property/MethodTypeDefaultDescription
leftImageUrlFlagbooleanfalseParent flag to showcase left side image
leftImageUrlstring''Public url to showcase image in form of icon
itemTitlestring''Title of the item
onPressmethodvoidAttach any method with arguments itemSequence & data to recieve values

Customization (Optionals)

PropertyTypeDefaultDescription
headingstring''set heading for the list
headingColorstring''set heading color, by default grey
headingSizenumber12set heading size
belowLinebooleanfalseshowcase horzontal line after every item in the list
itemBoxBorderbooleanfalseshowcase bordered box for every item in the list
itemBoxBorderLeftHighlightbooleanfalsehighlight left border of the box for styling
itemBoxBorderLeftHighlightColorstring''update any hexcode for color, by default black
rightArrowVisibilitybooleanfalseset flag to true to showcase right side image in item
rightSideIconstring''asset path to showcase right side image
rightSideTextFlagbooleanfalseparent flag to showcase text/amount right side
leftImageBackgroundColorstring''bg color for image circle, '' will make it transparent
itemDescriptionstring''Description for items
itemColorCirclestring[][]Add multiple colors for product variants
rightSideTextstring''Add text right side, Ex: $25
rightSideTextColorstring''Add hex color code for right side text color

Future Plans

  • Will come up with checkbox list.
  • Will come up with search functionality.

Author

Suraj Motwani - Email: suraj.motwani1306@gmail.com

License

React Native Stylishlist is available under the MIT license. See the LICENSE file for more info.

1.4.1

11 months ago

1.4.0

11 months ago

1.3.9

12 months ago

1.3.8

12 months ago

1.3.7

1 year ago

1.3.6

1 year ago

1.3.5

1 year ago

1.3.4

1 year ago

1.3.3

1 year ago

1.3.2

1 year ago

1.3.1

1 year ago

1.3.0

1 year ago

1.2.6

1 year ago

1.2.5

1 year ago

1.2.4

1 year ago

1.2.3

1 year ago

1.2.2

1 year ago

1.2.1

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago