react-native-list-view-select

    1.0.4 • Public • Published

    React-Native List View Select

    Installation instructions

    npm install --save react-native-list-view-select

    This module started as a personal fork of React Native List Popover homepage: https://github.com/bulenttastan/react-native-list-popover I have converted it to ES6 syntax and added support for React Native 0.24+

    List View Select is a designed to behave like a traditional <select> element in traditional HTML but with native components.

    The component allows you to add a very simple List view that is triggered over screen with a list of items as the child component and access the selected item from the parent component.

    The properties that this component accepts are

    • list Array of possible options
    • isVisible boolean to decide to show the Dropdown list or not
    • onClick callback function that takes an item parameter to handle the click operation
    • onClose callback function to set the isVisible to false to close the popover

    Screenshots

    Here is the List View Select used in the real world for an application I built

    Here is a quick gif of it in use, excuse the resolution

    Before

    Selection

    After Selection

    Usage

    import React, { Component } from 'react';
    import { StyleSheet, View, Text, TouchableHighlight } from 'react-native';
    import ListViewSelect from 'react-native-list-view-select';
    import _ from 'lodash';
     
    export default class ListViewSelectExample extends Component {
     
      constructor(props) {
        super(props);
        this.state = {
          item: "Select Item",
          isVisible: false,
        };
        _.bindAll(this, ['showPopover', 'closePopover', 'setItem']);
      }
     
      showPopover() {
        this.setState({isVisible: true});
      }
     
      closePopover() {
        this.setState({isVisible: false});
      }
     
      setItem(item) {
        this.setState({ item: item });
      }
     
      render() {
        const { selectedCity } = this.props;
        const items = [
          "Item 1",
          "Item 2",
          "Item 3",
          "Item 4",
        ];
     
        return (
          <View style={styles.container}>
            <TouchableHighlight onPress={this.showPopover}>
              <Text>{this.state.item}</Text>
            </TouchableHighlight>
            <ListViewSelect
              list={items}
              isVisible={this.state.isVisible}
              onClick={this.setItem}
              onClose={this.closePopover}
            />
          </View>
        );
      }
    }
     
    const styles = StyleSheet.create({
      container: {
        paddingTop: 100,
        paddingBottom: 100,
      },
    });

    Install

    npm i react-native-list-view-select

    DownloadsWeekly Downloads

    10

    Version

    1.0.4

    License

    MIT

    Last publish

    Collaborators

    • jameswatling