React-native-stylishlist NPM

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/Method	Type	Default	Description
leftImageUrlFlag	boolean	false	Parent flag to showcase left side image
leftImageUrl	string	''	Public url to showcase image in form of icon
itemTitle	string	''	Title of the item
onPress	method	void	Attach any method with arguments itemSequence & data to recieve values

Customization (Optionals)

Property	Type	Default	Description
heading	string	''	set heading for the list
headingColor	string	''	set heading color, by default grey
headingSize	number	12	set heading size
belowLine	boolean	false	showcase horzontal line after every item in the list
itemBoxBorder	boolean	false	showcase bordered box for every item in the list
itemBoxBorderLeftHighlight	boolean	false	highlight left border of the box for styling
itemBoxBorderLeftHighlightColor	string	''	update any hexcode for color, by default black
rightArrowVisibility	boolean	false	set flag to true to showcase right side image in item
rightSideIcon	string	''	asset path to showcase right side image
rightSideTextFlag	boolean	false	parent flag to showcase text/amount right side
leftImageBackgroundColor	string	''	bg color for image circle, '' will make it transparent
itemDescription	string	''	Description for items
itemColorCircle	string[]	[]	Add multiple colors for product variants
rightSideText	string	''	Add text right side, Ex: $25
rightSideTextColor	string	''	Add hex color code for right side text color