Selectable list view react-native

Selectable list view react-native

Hi Guys, In this article, we are going to learn about Custom Selectable list view react-native, to do this we are using FlatList component and display list and then add selectable functionality in that using one boolean key, this is a most important function which used almost all developers in their application to select data from the list. so you have to implement this feature with good performance i.e. sometimes item selection will slow the app if you add selection functionality in the same class in FlatList, so in this example, we are creating another component for a single item and add selection functionality in this component then render this item in FlatList components, let’s start with an example.

1. Create a new project

react-native init projectName

I am using my old project and I have created a component folder for itemView

2. Imports in App.js

import React, { Component } from "react";
import {
  StyleSheet,
  View, 
  FlatList,
  Alert,
} from "react-native";

3. Create JSON

const list = {
  status: {
    response: "success",
    message: "Product Fetch Successfully"
  },
  data_list: {
    product_list: [
      {
        pid: 1,
        p_title: "Introduction of react-native components",
        isSelect: false
      },
      {
        pid: 2,
        p_title: "React-native custom header layout",
        isSelect: false
      },
      {
        pid: 3,
        p_title: "Learn React-native life cycle",
        isSelect: false
      },
      {
        pid: 4,
        p_title: "Learn OOPs concepts",
        isSelect: false
      },
      {
        pid: 5,
        p_title: "Learn OOPs concepts",
        isSelect: false
      },
      {
        pid: 6,
        p_title: "Learn OOPs concepts",
        isSelect: false
      },
      {
        pid: 7,
        p_title: "Learn OOPs concepts",
        isSelect: false
      },
      {
        pid: 8,
        p_title: "Learn OOPs concepts",
        isSelect: false
      },
      {
        pid: 9,
        p_title: "Learn OOPs concepts",
        isSelect: false
      },
      {
        pid: 10,
        p_title: "Learn OOPs concepts",
        isSelect: false
      }
    ]
  }
};

4. Create ItemListView.js

Imports following components in ItemListView.js

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Alert,
  TouchableOpacity,
  Dimensions
} from "react-native";
const screenWidth = Math.round(Dimensions.get("window").width);

5. ItemListView.js

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Alert,
  TouchableOpacity,
  Dimensions
} from "react-native";
const screenWidth = Math.round(Dimensions.get("window").width);

//type Props = {};
export default class ItemListView extends Component {
  constructor(props) {
    super(props);

    this.GetListItem = this.GetListItem.bind(this);
    this.state = {
      item: this.props.item,
      index: this.props.index
    };
  }

//This function will update state and update UI and call function from Main call to update original list
  GetListItem(item) {
    item.isSelected = !this.state.item.isSelected;

    this.setState({ item: item });
    this.props.updateList(this.state.index);
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={{ flex: 1 }}
          activeOpacity={0.9}
          onPress={this.GetListItem.bind(this, this.state.item)}
        >
          <View
            style={{
              margin: 5,
              width: screenWidth - 10,
              backgroundColor: this.state.item.isSelected ? "#74B0F7" : "#FFF"
            }}
          >
            <Text style={styles.welcomeHeader}> {this.state.item.pid} </Text>
            <Text style={styles.welcome}> {this.state.item.p_title} </Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center"
  },
  welcome: {
    flex: 1,
    fontSize: 20,
    textAlign: "center",
    margin: 5
  },
  welcomeHeader: {
    flex: 1,
    fontSize: 60,
    textAlign: "center",
    margin: 5
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

As you see in above code, I have update state inside this item onPress click and then call the function from main Class to update the main list

6. App.js

Import ItemListView.js from Component folder

import ItemListView from "../screens/Components/ItemListView";

Check this full source code for App.js

import React, { Component } from "react";
import {
  StyleSheet,
  View, 
  FlatList,
  Alert,
} from "react-native";

import ItemListView from "../screens/Components/ItemListView";

const list = {
  status: {
    response: "success",
    message: "Product Fetch Successfully"
  },
  data_list: {
    product_list: [
      {
        pid: 1,
        p_title: "Introduction of react-native components",
        isSelect: false
      },
      {
        pid: 2,
        p_title: "React-native custom header layout",
        isSelect: false
      },
      {
        pid: 3,
        p_title: "Learn React-native life cycle",
        isSelect: false
      },
      {
        pid: 4,
        p_title: "Learn OOPs concepts",
        isSelect: false
      },
      {
        pid: 5,
        p_title: "Learn OOPs concepts",
        isSelect: false
      },
      {
        pid: 6,
        p_title: "Learn OOPs concepts",
        isSelect: false
      },
      {
        pid: 7,
        p_title: "Learn OOPs concepts",
        isSelect: false
      },
      {
        pid: 8,
        p_title: "Learn OOPs concepts",
        isSelect: false
      },
      {
        pid: 9,
        p_title: "Learn OOPs concepts",
        isSelect: false
      },
      {
        pid: 10,
        p_title: "Learn OOPs concepts",
        isSelect: false
      }
    ]
  }
};

//type Props = {};
export default class App extends Component {
  constructor(props) {
    super(props);
    this.getListCall = this.getListCall.bind(this);
    this.GetListItem = this.GetListItem.bind(this);
    this.state = {
      JSONResult: ""
    };
  }

  componentDidMount() {
    // API call
  }

  getListCall() {}

  GetListItem(name) {
    Alert.alert(name);
  }

  ItemSeparatorLine = () => {
    return (
      <View
        style={{ height: 0.5, width: "100%", backgroundColor: "#B2B7BD" }}
      />
    );
  };

//This function will get index of selected List 
  updateSelected = index => {
    console.log("+++++ " + index);
  };

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={list.data_list.product_list}
          ItemSeparatorComponent={this.ItemSeparatorLine}
          renderItem={({ item, index }) => (
            <View style={{ flex: 1 }}>
              <ItemListView
                item={item}
                index={index}
                updateList={this.updateSelected}
              />
            </View>
          )}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FFFFFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 5
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

7. Output

Thank you 🙂