react-native-arraylist-view v0.1.9

react-native-arraylist-view

Table of Contents

• Description
• Installation
• Usage
• Sample Data
• Properties
• Contributing
• License

Description

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.

Installation

Install the library using npm or yarn:

npm install react-native-arraylist-view --save

or

yarn add react-native-arraylist-view

Usage

To use react-native-arraylist-view, simply import the component and pass an array of data to it. You can also customize the appearance of each list item through the renderItem function and use additional props to control the display of edit and delete buttons.

Example

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 (
    <View style={{ flex: 1, padding: 10 }}>
      <ArrayListView
        arrayData={data}
        isEdited={true}
        isDeleted={true}
        onSelectEdit={(item) => console.log('Edit clicked on:', item)}
        onSelectDelete={(item) => console.log('Delete clicked on:', item)}
      />
    </View>
  );
};

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.

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',
      },
    ],
  },
];

Properties

ListView

Style Props

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Breakdown of Sections:

1. Description: Explains the purpose and functionality of the library.
2. Installation: Guides the user on how to install the library using npm or yarn.
3. Usage: Provides an example of how to use the library with sample data and a basic app structure.
4. Sample Data: Shows an example of how the data should be structured for the list view.
5. Properties: Details the available properties and customization options for the component.
6. Contributing: Links to a contributing guide (which you can create if you'd like others to contribute).
7. License: Indicates that the project is licensed under the MIT License.

This structure should be easy to follow for users and contributors. Let me know if you need any further adjustments!