gs-akhan / react-native-select Goto Github PK

View Code? Open in Web Editor NEW

189.0 6.0 30.0 618 KB

A simple dropdown for react native - IOS and Android

Home Page: https://www.npmjs.com/package/react-native-selectme

License: MIT License

JavaScript 100.00%

react-native select-tag chooser android ios

react-native-select's Introduction

React Native Selectme

Simple DropDown menu for React Native App! Your Select Tag for React Native.

Alternatives :

react-native-chooser : This is an upgraded and simple-to-use API. You can customize it to fullest.

Introduction

React Native Selectme is simple, customizable and easy to use dropdown in React Native. It has been tested on both Android and IOS and works like a charm.

Installation

npm i react-native-selectme --save

Usage

Require it inside your Javascript files. Also supporting components using object-deconstructing. Select Option OptionList.

<OptionList /> Is to be used to append the options. This has to be placed as a last component so that it take the highest Z-Index.

Example

import React, {
  Component,
  AppRegistry,
  Text,
  View,
} from 'react-native';

import DropDown, {
  Select,
  Option,
  OptionList,
} from 'react-native-selectme';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      canada: ''
    };
  }

  _getOptionList() {
    return this.refs['OPTIONLIST'];
  }

  
  _canada(province) {

  this.setState({
      ...this.state,
      canada: province
    });
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Select
            width={250}
            ref="SELECT1"
            optionListRef={this._getOptionList.bind(this)}
            defaultValue="Select a Province in Canada ..."
            onSelect={this._canada.bind(this)}>
            <Option value = {{id : "alberta"}}>Alberta</Option>
            <Option>British Columbia</Option>
            <Option>Manitoba</Option>
            <Option>New Brunswick</Option>
            <Option>Newfoundland and Labrador</Option>
            <Option>Northwest Territories</Option>
            <Option>Nova Scotia</Option>
            <Option>Nunavut</Option>
            <Option>Ontario</Option>
            <Option>Prince Edward Island</Option>
            <Option>Quebec</Option>
            <Option>Saskatchewan</Option>
            <Option>Yukon</Option>
          </Select>

          <Text>Selected Canada's province: {this.state.canada}</Text>
          
          <OptionList ref="OPTIONLIST"/>
      </View>
    );
  }
}

AppRegistry.registerComponent('App', () => App);

Configuration

Select:

Property	Type	Default	Description
width	number	400	Width of the selection
onSelect	function(text, value)	null	function to be invoked when option is selected
height	number	50	Height of the selection
optionListRef	function	required	Reference to `<OptionList />` to display the selection menu
style	object	null	Custom styles to be applied if supplied
defaultValue	string	first option	The value to be displayed if none of the options are selected.

blur() : close the select by calling blur this.refs.SELECT1.blur();

Option:

Property	Type	Default	Description
value	any	null	value will be passed on callback `onSelect` as second argument
style	object	null	Styles to be applied on 'Option' component
styleText	object	null	Styles to be applied on text inside of 'Option'

OptionList:

Property	Type	Default	Description
overlayStyles	object	null	Styles to be applied on 'overlay' backdrop
itemsStyles	object	null	Styles to be applied on 'items' dropdown

Demo

IOS and Android:

Contributions

Your contributions and suggestions are heartily♡ welcome. (✿◠‿◠)

react-native-select's People

Contributors

Stargazers

Watchers

react-native-select's Issues

Dropdown towards the bottom of the screen shows up blank

Right now I'm putting the dropdown down towards the bottom of the address form, for a user to select a country. However, when I click on the options it is just blank. I realized if I attempted to scroll past the view visible, it is under everything (but not reachable). Right now, I have just copied and pasted the exact code from the README, so any thoughts or help would be appreciated.

          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <Select
              width={250}
              ref="SELECT1"
              optionListRef={this._getOptionList.bind(this)}
              defaultValue="Select a Province in Canada ..."
              onSelect={this._canada.bind(this)}>
              <Option value = {{id : "alberta"}}>Alberta</Option>
              <Option>British Columbia</Option>
              <Option>Manitoba</Option>
              <Option>New Brunswick</Option>
              <Option>Newfoundland and Labrador</Option>
              <Option>Northwest Territories</Option>
              <Option>Nova Scotia</Option>
              <Option>Nunavut</Option>
              <Option>Ontario</Option>
              <Option>Prince Edward Island</Option>
              <Option>Quebec</Option>
              <Option>Saskatchewan</Option>
              <Option>Yukon</Option>
            </Select>
            <Text>Selected Canada's province: {this.state.canada}</Text>
            <OptionList ref="OPTIONLIST"/>
          </View>

With the appropriate functions needed in the container itself.

Before click:

After click:

Style for Default value text style and after select text style

We didn't have options to adjust the text style of default value and text style after selected.
I have read the docs but there are no options for that. Really need it, any help would be appreciated.

Please add the original creator to readme

I know this is a forked version of this repo. Atl east give the guy a credit in the readme file :)

Options box positioning problem

I tried this out and when I click to open the options list the container box for all the options aligns to bottom right hand corner of the screen. Even though the main box containing the default text etc is positioned near the top of the view. It creates a white box between the two of them.

The positioning of the options list box seems to be completely broken. This is when I compared it to the dropdown module from Alinz, you're contributing to that right. So something you changed must of broken the items dropdown.

If it helps I was using the exact code from the example on the readme. Also I placed my dropdown box in the renderScene function of a navigator, rather than the usual render() function. So that may be related.

The platform was Android and the device orientation was portrait.

Hopefully that helps to replicate the issue.

Screenshots:
BEFORE

AFTER

the whitebox is hard to see in the screenshot but it's much more visible on the device. Basically the items aren't rendering where they should be. The white box is also overlapping the main box that's why you can't see it in the after screenshot

Strange overlay on multiple select

Here you can see the select components that are supposed to be hiding behind the overlay, what may be happening?, this is my code:

import React, {
  Component,
  View,
  Text,
  StyleSheet,
  Picker,
} from 'react-native'

import DropDown, {
  Select,
  Option,
  OptionList,
} from 'react-native-selectme'

import _ from 'lodash'

const HOUR = _.range(24)
const MIN = [15, 30, 45]
class ParkingDetail extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  selectedPark() {
    if (this.state.selectedPark) {
      return (
        <Text style={styles.selectedPark}>Estacionamiento:
          <Text style={styles.bold} > {this.state.selectedPark.name}</Text>
        </Text>
      )
    }
  }

  selectPark(id) {
    let park = _.find(this.props.parkingList, x => x.id == id)
    this.setState({selectedPark: park})
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.address} >{this.props.address}</Text>
        <Text>Selecciona estacionamiento</Text>

        {/* estacionamiento */}
        <Select
        width={300}
          optionListRef={x => this.refs['PARKINGLIST']}
          defaultValue="Selecciona un estacionamiento"
          onSelect={x => this.selectPark(x)}>
          {this.props.parkingList.map( pl =>
            <Option key={pl.id} value={pl.id}>{pl.name}</Option>
          )}
        </Select>
        {this.selectedPark()}
        <OptionList ref="PARKINGLIST"/>

        <View style={styles.time}>
          {/* hora */}
          <Select
            width={140}
            optionListRef={x => this.refs['HOURLIST']}
            onSelect={x => this.setState({selectedHour: x})}>
            {HOUR.map( h =>
              <Option key={h} value={h}>{h}</Option>
            )}
          </Select>
          <OptionList overlayStyles={{backgroundColor: '#fff'}} ref="HOURLIST"/>

        {/* minutos */}
          <Select
            width={140}
            optionListRef={x => this.refs['MINLIST']}
            onSelect={x => this.setState({selectedMin: x})}>
            {MIN.map( m =>
              <Option key={m} value={m}>{m}</Option>
            )}
          </Select>
          <OptionList ref="MINLIST"/>
        </View>
      </View>

    )
  }
}

let styles = StyleSheet.create({
  time: {
    flexDirection: 'row',
  },
  bold: {
    fontWeight: 'bold',
  },
  selectedPark: {
    marginTop: 10,
  },
  overlay: {
    marginLeft: -10,
    marginTop: -120,
  },
  address: {
    fontSize: 18,
    marginBottom: 5,
  },
  container: {
    marginTop: 62,
    paddingTop: 15,
    paddingHorizontal: 10,
    backgroundColor: '#eee',
    flex: 1,
  }
})

export default ParkingDetail

Item value in Option

Hi, is possible to have a different props for display text and selected value in the Option element?
Thanks, Marco.

Menu starts in full height on my android phone.

Most of the times, the first frame when opening the select menu is in full height, making the select menu seem jerky.

I tracked down this issue to line 32 in items.js

You should initialize the value to 1, instead of 0, as 0 makes React render the view as if it had null height (-> full height), which results in this jerky behaviour.

(I did not feel like forking this project, committing/pushing a change and making a pull-request for a 1-character change.)

Custon arrow icon in right side

can we set custom image/icon right side of select picker?

no support RTL Layout

react 16.0.0.alpha
react-native 0.45.1

if i turn RTL support on, the list no renders in right position, but if turn the RTL support off it works fine

Install without RNPM

RNPM is deprecated. Soo, how can i install wihout use? I try by manual way but when i change the main activity it brokens react-native-vector-itens

Make dropdown to animate

Can't add styles to dropdown box or option components

Hi!

Please help me I've used your example to test the component in my application and everything is working except the styling. I want to add a background color to the dropbox component or options components but they are ignoring it. Please help me.

Here's the code of component

`
import React, {
Component,
View,
PropTypes,
Text,
Platform,
TouchableHighlight
} from 'react-native';

import {Actions as Routes} from 'react-native-router-flux';
import NavigationBar from 'react-native-navbar';
import Button from 'react-native-button';
import Spinner from 'react-native-loading-spinner-overlay';
import DropDown from 'react-native-dropdown';

import Tab from './TabBarMenu';
import GoBack from './GoBack';

import globalStyles from '../styles/global_styles';

let osCorrection;

if (Platform.OS === 'ios'){
osCorrection = require('../styles/global_styles_ios');
} else if (Platform.OS === 'android') {
osCorrection = require('../styles/global_styles_android');
}

const {
Select,
Option,
OptionList,
updatePosition
} = DropDown;

export default class SettingsComponent extends Component {
constructor(props) {
super(props);

this.state = {
  canada: ''
};

}

componentDidMount() {
updatePosition(this.refs['SELECT1']);
updatePosition(this.refs['OPTIONLIST']);
}

_getOptionList() {
return this.refs['OPTIONLIST'];
}

_canada(province) {

this.setState({
  ...this.state,
  canada: province
});

}

static propTypes = {
current_user: PropTypes.object.isRequired,
actions: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
};

componentWillReceiveProps(nextProps) {
if (nextProps.current_user.has_error) {
this.setState({signin_error: true});
return;
}
if (!nextProps.current_user.loaded) {
Routes.splashScreen();
}
}

callSignOut = () => {
this.props.actions.signOut(this.props.current_user.data.access_token);
}

render () {
const titleConfig = {
title: 'MORE',
tintColor: 'white'
};

return (
  <View>
    <View style={[{
      flexDirection: 'column',
      justifyContent: 'flex-start',
      alignItems: 'flex-start',
      flexWrap: 'nowrap',
      width: null,
      height: null
    }, globalStyles.bgImageWrapper]}>

      <View style={[globalStyles.navBar,
        osCorrection.navBar]}>
        <NavigationBar
          title={titleConfig}
          leftButton={<GoBack display={true}/>}
          style={globalStyles.navChild}
          tintColor="white"
          />
      </View>

      <View
        style={[globalStyles.Container,
          osCorrection.ScrollView,
          osCorrection.Container,
          globalStyles.Child]}
      >
        <View style={globalStyles.ContChild}>
          <View style={[{paddingBottom: 40}, globalStyles.LineSeparator]}>
            <Text style={globalStyles.FormSpacer}>Select a Camp</Text>
            <Select
              width={null}
              ref="SELECT1"
              optionListRef={this._getOptionList.bind(this)}
              defaultValue="Select a friend ..."
              onSelect={this._canada.bind(this)}
              style={[globalStyles.FormSpacer, globalStyles.Input]}
              >
                <Option style={{backgroundColor: 'red'}}>Alberta</Option>
                <Option>Daniel</Option>
                <Option>Tobey</Option>
                <Option>Demi</Option>
                <Option>Newfoundland and Labrador</Option>
                <Option>Northwest Territories</Option>
                <Option>Nova Scotia</Option>
                <Option>Nunavut</Option>
                <Option>Ontario</Option>
                <Option>Prince Edward Island</Option>
                <Option>Quebec</Option>
                <Option>Saskatchewan</Option>
                <Option>Yukon</Option>
            </Select>
            <OptionList ref="OPTIONLIST" width={null} style={globalStyles.Input}/>
          </View>
          <View style={globalStyles.LineSeparator}>
            <Text style={globalStyles.FormSpacer}>User's Name</Text>
          </View>
          <View style={[globalStyles.LineSeparator, globalStyles.Row]}>
            <View style={globalStyles.HalfRow}>
              <Text style={globalStyles.FormSpacer}>23 Credits Remaining</Text>
            </View>
            <View style={globalStyles.HalfRow}>
              <TouchableHighlight>
                <Text style={globalStyles.miniCTA}>ADD MORE CREDITS</Text>
              </TouchableHighlight>
            </View>
          </View>
          </View>
        <View style={globalStyles.ContChild}>
          <Button onPress={this.callSignOut}
          containerStyle={globalStyles.bottomButtom}
          style={globalStyles.buttonText}>
            Log Out
          </Button>
        </View>
      </View>
      <View style={globalStyles.Child}>
        <Tab/>
      </View>
    </View>
    <Spinner visible={false} />
  </View>
);

}
}

Here are the styles I've passed

`
FormSpacer: {
marginBottom: 10
},

Input: {
backgroundColor: 'white'
}
`

Items taking full height in android.

Hi, thanks for this lovely component. I just have one problem. I've tried the example, but there's some problem with the android version. All the items of the list are getting displayed. I have no idea. Can you help me? Thanks once again.

Positioning or styling broken on iOS 6

I'm using this on iOS simular for iPhone 6. The menu jumps around; when I click on the menu , the drop down appears way below, and after I select an item, it jumps back to its original position. Please advise. Here is the animated screenshot :

http://g.recordit.co/53S3Ftal21.gif

Here is my code :

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

import DropDown, {
  Select,
  Option,
  OptionList,
} from 'react-native-selectme';

// var ListPopover = require('react-native-list-popover');

export default class AddScreen extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      color: ''
    };
  }

  _getOptionList() {
   return this.refs['OPTIONLIST'];
 }

 _emotion(incoming) {

 this.setState({
     ...this.state,
     color: incoming
   });
 }


  render () {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Select a color </Text>
        <Select
        height={100}
        width={250}
        ref="SELECT1"
        optionListRef={this._getOptionList.bind(this)}
        defaultValue="Select an color ..."
        onSelect={this._emotion.bind(this)}
        >
          <Option value= "red"> red </Option>
          <Option value="blue"> blue </Option>
          <Option value= "green" > green </Option>
          <Option value= "purple"> purple </Option>
          <Option value= "purple"> yellow </Option>
        </Select>
        <OptionList ref="OPTIONLIST"/>
        <Text>Selected color: {this.state.color} </Text>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

ScrollView "viewConfig" is not defined

when I run the example on android with React Native version 0.37, ,I met this problem, how to deal with it?

ScrollView "viewConfig" is not defined

Getting this error on selecting the options from the dropdown.

Option list shows up empty and white

Copied the example and when i open the dropdown it just shows a white empty box. Does this work with react-native 0.22? Here is what i'm seeing.

https://vid.me/TRNL

Style the component width and height with stylesheet instead of attributes

Is it possible to have a variable width instead of a fixed one in the Select attributes?

If i were to style the component's width and height, i'd rather do it with a stylesheet.

In my case, i want to stretch a select in it's container but i could not find a solution to do this.

So in case you have one, i'm all hears


import React, {
  Component,
  Text,
  View,
} from 'react-native';

import DropDown, {
  Select,
  Option,
  OptionList,
} from 'react-native-selectme';

class SelectDropdown extends Component {
  constructor(props) {
    super(props);

    this.state = {
      canada: ''
    };
  }

  _getOptionList() {
    return this.refs['OPTIONLIST'];
  }


  _canada(province) {

  this.setState({
      ...this.state,
      canada: province
    });
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Select
            width={250}
            ref="SELECT1"
            optionListRef={this._getOptionList.bind(this)}
            defaultValue="Select a Province in Canada ..."
            onSelect={this._canada.bind(this)}>
            <Option value = {{id : "alberta"}}>Alberta</Option>
            <Option>British Columbia</Option>
            <Option>Manitoba</Option>
            <Option>New Brunswick</Option>
            <Option>Newfoundland and Labrador</Option>
            <Option>Northwest Territories</Option>
            <Option>Nova Scotia</Option>
            <Option>Nunavut</Option>
            <Option>Ontario</Option>
            <Option>Prince Edward Island</Option>
            <Option>Quebec</Option>
            <Option>Saskatchewan</Option>
            <Option>Yukon</Option>
          </Select>

          <Text>Selected Canada's province: {this.state.canada}</Text>

          <OptionList ref="OPTIONLIST"/>
      </View>
    );
  }
}

module.exports = SelectDropdown;