How To Create Multiple Selection & Deletion of ListItems?

Hello guys, In this example, we will see how you can create Multiple Selection & Deletion of ListItems in React Native app. It is very easy so let's start with it without wasting any time.


So first of all we need to create a fresh project using cli.
npx react-native init demoProject
Go to the project directory.
cd demoProject
After this, try to run that blank project on both iOS and android devices. 
npx react-native run-ios  (mac only)
npx react-native run-android
If everything ok, you will see blank React Native app as shown in image.

Now, install NativeBase library for UI purposes.
yarn add native-base
Link the project assets. 
npx react-native link
So after that you need to replace App.js with this code. 
import React, {Component} from 'react';
import {
  Container,
  Header,
  Title,
  Content,
  Button,
  Right,
  Body,
  Icon,
  Text,
  Subtitle,
  Segment,
  ListItem,
  CheckBox,
  Thumbnail,
} from 'native-base';
let userList = require('./userList.json');
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      deletionArray: [],
      allSelected: false,
    };
  }
  componentDidMount() {
    this.setState({users: userList});
  }

  deleteAllItems() {
    //  You have to set state users to empty array if you got success response from server
    this.setState({users: []});
  }

  deleteItem(index) {
    let helperArray = this.state.users;
    let helperArray2 = this.state.deletionArray;
    helperArray.splice(index, 1);
    let itemIndex = helperArray2.indexOf(index);
    helperArray2.splice(itemIndex, 1);
    this.setState({users: helperArray, deletionArray: helperArray2});
  }

  deletedSelectedItems() {
    let helperArray = this.state.users;
    let helperArray2 = this.state.deletionArray;
    for (let i = helperArray2.length - 1; i >= 0; i--) {
      helperArray.splice(helperArray2[i], 1);
      helperArray2.splice(i, 1);
    }
    this.setState({
      users: helperArray,
      deletionArray: helperArray2,
    });
  }
  selectAll() {
    let helperArray = [];
    for (let index = 0; index < this.state.users.length; index++) {
      if (!this.state.allSelected) {
        helperArray.push(index);
      } else if (this.state.allSelected) {
        helperArray = [];
      }
    }
    this.setState({
      deletionArray: helperArray,
      allSelected: !this.state.allSelected,
    });
  }

  selectAnItem(index) {
    let helperArray = this.state.deletionArray;
    let itemIndex = helperArray.indexOf(index);
    if (helperArray.includes(index)) {
      helperArray.splice(itemIndex, 1);
      this.setState({allSelected: false});
    } else {
      helperArray.push(index);
      if (helperArray.length == this.state.users.length) {
        this.setState({allSelected: true});
      }
    }
    this.setState({deletionArray: helperArray});
  }

  render() {
    return (
      <Container>
        <Header>
          <Body>
            <Title>Total Users : {this.state.users.length}</Title>
            <Subtitle>
              Selected Users : {this.state.deletionArray.length}
            </Subtitle>
          </Body>
        </Header>
        <Segment>
          <Button first onPress={() => this.deletedSelectedItems()}>
            <Text>Delete Selected</Text>
          </Button>
          <Button onPress={() => this.selectAll()}>
            <Text>
              {this.state.allSelected ? 'Unselect All' : 'Select All'}
            </Text>
          </Button>
          <Button last onPress={() => this.deleteAllItems()}>
            <Text>Delete All</Text>
          </Button>
        </Segment>
        <Content>
          {this.state.users.map((item, index) => (
            <ListItem key={index}>
              <CheckBox
                onPress={() => this.selectAnItem(index)}
                style={{marginRight: 30}}
                checked={this.state.deletionArray.includes(index)}
              />
              <Thumbnail source={{uri: item.image}} />
              <Body>
                <Text>{item.name}</Text>
              </Body>
              <Right>
                <Button danger onPress={() => this.deleteItem(index)}>
                  <Icon name="trash" />
                </Button>
              </Right>
            </ListItem>
          ))}
        </Content>
      </Container>
    );
  }
}
In above code you can see we import a userList.json file; that's why because we need user name, address & images for our app. It is for testing purposes. Here is the sample view of that json file.
Save everything and run the project again by using following commands.
npx react-native run-ios  (mac only)
npx react-native run-android
You will see your App is ready and showing in the simulators (or devices). Output images are attached and link to the video of the project's coding as given below.

I hope you like the article regarding Multiple Selection & Deletion Of List Items. This is how you can create it in the React Native app for Android and iOS.
If you have any questions or you want to get a tutorial on some topic, you can comment below.
There will be more posts coming soon. Stay tuned! Bye. 🙂

Post a Comment

0 Comments