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
listArray of possible optionsisVisibleboolean to decide to show the Dropdown list or notonClickcallback function that takes anitemparameter to handle the click operationonClosecallback 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, }, });
