If this project has helped you out, please support us with a star 🌟

📘 Description

Author: Kite

Github: https://github.com/KiteOfficial/react-native-flatlist-selector

A Selectable Flatlist which you can Highlight a selected item

_Tested with: Android, iOS

This project is so many more to improve, please raise an suggestions in ISSUES. It will great help not for me but for react-native developer.

📖 Install

Install the library from npm just running one of the following command lines:

| npm | | ----------------------------------------------- | | npm install react-native-flatlist-selector --save |

💻 Usage

import { Selector } from "react-native-flatlist-selector";

// Example
class Main extends Component {
  constructor(props) {
    super(props)
    this.data = [{
      title: 'REGION 1',
      image: require('images/region1.png'),
    },
    {
      title: 'REGION 2',
      image: require('images/region2.png'),
    },
    {
      title: 'REGION 3',
      image: require('images/region3.png'),
    }]
  }

  state = {
    selectedIndex: 0
  }

  getIndex = (selectedIndex) => {
    this.setState({ selectedIndex: selectedIndex })
  }
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Text>Selected Index: {this.state.selectedIndex} </Text>
        <Selector
          multiple={true}
          selectedIndex={this.getIndex}
          data={this.data}
          renderItem={(item, index) => (
            <>
              <Text>Asa</Text>
              <Text>{index.image}</Text>
              <Text>{index}</Text>
              <Text>{item.title}</Text>
            </>
          )} />
      </SafeAreaView>
    )
  }
}

🎥 DEMO

| Single Selection | Multiple Selection | | --------------------------------------------- | --------------------------------------------- | | | |

Props

| Property | Description | Type | Default. | Note | | ------------------- | --------------------------------------------------------------------------------------- | ---------------- | ------------- | ---------------------------------- | | multiple | Either multiple selection or single | Boolean | false | | | data | Array of data to be render. | Array | | Only 2D array is acceptable | | selectedColor | Higlight for selected Item | String | #3535356E | | | unselectedColor | Higlight for unselected Item | String | transparent | | | selectedIndex | Default selected item | Int, Array | | Int for single, Array for multiple | | getSelectedIndex | Get selected index. | Function | | | | renderItem | Component to be rendered | Function. | | | | Flatlist Props | All Flatlist Props are accepted | | | |

🤔 How to contribute

Having any suggestions on your mind? Found a bug? Don't shy to share in ISSUES. Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.