https://github.com/JamesWatling/react-native-list-view-select

List View Select is a designed to behave like a traditional `<select>` element in traditional HTML but with native components.
https://github.com/JamesWatling/react-native-list-view-select

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/JamesWatling/react-native-list-view-select
• Owner: JamesWatling
• License: mit
• Created: 2016-09-27T03:48:12.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-15T08:52:24.000Z (over 5 years ago)
• Last Synced: 2023-12-07T11:22:19.520Z (7 months ago)
• Language: JavaScript
• Size: 9.77 KB
• Stars: 41
• Watchers: 1
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-react - List View Select - A Toggleable select box for React Native with native components
• awesome-react - List View Select - A Toggleable select box for React Native with native components

README

        
# 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 `` 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 

![](http://i.imgur.com/76iFV7n.gif)

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

![](http://i.imgur.com/yzgYcNG.gif)

# Before

![](http://i.imgur.com/qK359Tm.png)

# Selection

![](http://i.imgur.com/niPxpss.png)

# After Selection

![](http://i.imgur.com/PVtsExi.png)

# Usage

```js

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 (

      

        

          {this.state.item}

        

        

      

    );

  }

}

const styles = StyleSheet.create({

  container: {

    paddingTop: 100,

    paddingBottom: 100,

  },

});

```