Rn-glt-listview NPM

rn-glt-listview

A listview component for ReactJS

npm install --save rn-glt-listview
or
yarn add rn-glt-listview

Usage

import ListView from 'rn-glt-listview';



// mock list data
const list = [
  {
    color: "red",
    value: "#f00"
  },
  {
    color: "green",
    value: "#0f0"
  },
  {
    color: "blue",
    value: "#00f"
  },
  {
    color: "cyan",
    value: "#0ff"
  },
  {
    color: "magenta",
    value: "#f0f"
  },
  {
    color: "yellow",
    value: "#ff0"
  },
  {
    color: "black",
    value: "#000"
  }
]

export default class App extends Component {
  state = {
    hasMore: true,
    list: [],
  };


  _renderItem = ({ item }) => {
        return(
            <View style={[styles.listContainer]}>
                <View style={[styles.colorRound, {backgroundColor: item.color}]}></View>
                <View style={styles.titleContainer}>
                          <Text>{item.color}</Text>
                  <Text>{item.value}</Text>
                </View>
            </View>
        )
    }

  render() {
    const { list } = this.state;

    return (
      <ListView data={list} renderItemFun={this._renderItem}></ListView>
    );
  }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
	listContainer:{
		flex: 1,
		flexDirection: 'row',
		marginBottom: 10,
		alignItems: 'center',
		height: wp(14),
		paddingHorizontal: wp(4),
		backgroundColor: '#FFF',
		shadowColor: "#000",
		shadowOffset: {
			width: 0,
			height: 1,
		},
		shadowOpacity: 0.20,
		shadowRadius: 1.41,

		elevation: 2
	},
	colorRound:{
		width: wp(12),
		height: wp(12),
		borderRadius: 100,
		marginEnd: 15
	},
	titleContainer:{
		width: wp(84),
		height: wp(12),
		justifyContent: 'center'
	}
});

API

Props

Prop	Type	Optional	Default	Description
`contentContainerStyle`	object	Yes		Style of flatlist container.
`itemContainerStyle`	object	Yes		Style of item. Invalid in wrapper mode.
`textStyle`	object	Yes		Style of text of item.
`dropdownTextStyle`	object	Yes		Style of the dropdown option text.
`dropdownTextHighlightStyle`	object	Yes		Style of the dropdown selected option text.
`renderItemFun`	func	Yes		Customize render option rows: `function()` Will render a default row if `undefined`.
`showsVerticalScrollIndicator`	bool	Yes	false	Default false if you want to enable scroll do it true.