Nothing Prevents Misery

    react-native-flatlist-selector

    0.2.1 • Public • Published

    NPM version npm Package Quality Compatibility

    NPM

    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.


    Install

    npm i react-native-flatlist-selector

    DownloadsWeekly Downloads

    4

    Version

    0.2.1

    License

    ISC

    Unpacked Size

    1.05 MB

    Total Files

    9

    Last publish

    Collaborators

    • kiteofficial