This library is a simple and efficient library for rendering arrays of data in a scrollable list view in React Native. This library takes an array of data and automatically generates a list view, making it an ideal solution for displaying dynamic content
npm install react-native-arraylist-view
react-native-arraylist-view is a simple and efficient library for rendering arrays of data in a scrollable list view in React Native. This library takes an array of data and automatically generates a list view, making it an ideal solution for displaying dynamic content such as contact lists, to-do items, and product catalogs.The component is flexible and can be customized easily with props to modify how the list and its items are rendered, including optional edit and delete buttons for interaction. Whether you're building a small app or handling large datasets, this library is optimized for performance and ease of use.
``sh`
npm install react-native-arraylist-view --save
orsh`
yarn add react-native-arraylist-view
sh
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ArrayListView from 'react-native-arraylist-view';// Sample data for rendering in the list
const data = [
{
id: '1',
name: 'John Doe',
age: 30,
isDeleted: true,
isEdited: true,
images: [
{
'before Image':
'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
'after Image':
'https://pixabay.com/images/download/people-2944065_640.jpg',
},
],
},
{
id: '2',
name: 'Jane Smith',
age: 25,
isDeleted: false,
isEdited: true,
images: [
{
'before Image':
'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
'after Image':
'https://pixabay.com/images/download/people-2944065_640.jpg',
},
],
},
{
id: '3',
name: 'Alice Johnson',
age: 35,
isDeleted: true,
isEdited: false,
images: [
{
'before Image':
'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
'after Image':
'https://pixabay.com/images/download/people-2944065_640.jpg',
},
],
},
];
const App = () => {
return (
isEdited={true}
isDeleted={true}
onSelectEdit={(item) => console.log('Edit clicked on:', item)}
onSelectDelete={(item) => console.log('Delete clicked on:', item)}
/>
);
};
const styles = StyleSheet.create({
row: {
padding: 10,
marginBottom: 10,
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 5,
},
rowLabel: {
fontSize: 18,
fontWeight: 'bold',
},
rowValue: {
fontSize: 14,
color: '#555',
},
});
export default App;
`Sample Data
This is an example of how your data should be structured. You can pass any array of objects with any shape to the component.
sh
const data = [
{
id: '1',
name: 'John Doe',
age: 30,
isDeleted: false,
isEdited: false,
image: [
{
'before Image':
'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
'after Image':
'https://pixabay.com/images/download/people-2944065_640.jpg',
},
],
},
{
id: '2',
name: 'Jane Smith',
age: 25,
isDeleted: true,
isEdited: false,
image: [
{
'before Image':
'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
'after Image':
'https://pixabay.com/images/download/people-2944065_640.jpg',
},
],
},
{
id: '3',
name: 'Alice Johnson',
age: 35,
isDeleted: true,
isEdited: true,
image: [
{
'before Image':
'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
'after Image':
'https://pixabay.com/images/download/people-2944065_640.jpg',
},
],
},
];
``