andreasbhansen / react-native-scrollable-list

A ListView without the boilerplate.

react-native-scrollable-list

A ListView without the boilerplate.

Install

npm i -D react-native-scrollable-list

Usage

import ScrollableList from 'react-native-scrollable-list';


const celebrities = [
    name: 'Leonardo Di Caprio',
    role: 'Actor',
  },
  {
    name: 'Luís Suárez',
    role: 'Football Player',
  },
  {
    name: 'Eddie Van Halen',
    role: 'Guitar Player',
  },
];

const Celebrity = ({name, role}) => (<Text>Name: {name}{\n}Role: {role}</Text>);

export default (<ScrollableList data={celebrities} row={Celebrity} />);

That's it.

That will render a ListView, with all the dataSource, cloneWithRows, and all that boilerplate code nobody wants to write.

All entries from each object in data will be mapped as props to the component passed through the row prop. In this example all <Celebrity> components will receive name and role of each object, that is <Celebrity name={...} role={...}>.

If you want to pass any of the ListView other props (like style, onEndReached, onChangeVisibleRows, etc), just pass them to ScrollableList, and they will reach ListView.

License

MIT ©