react-native-flatlist-selector

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.