README
@vivintsolar-oss/native-vs-select
yarn add @vivintsolar-oss/native-vs-select
// or
// npm install @vivintsolar-oss/native-vs-select
VSSelect
A flexible drop down select component
Demo
import { Input, Form } from '@vivintsolar-oss/native-vs-select';
<View style={ { width: '100%', height: 500 } }>
<VSSelect.Form
dropDownList={ list }
showDropDown={ state.toggleDropDown }
carrotHorizontal={ 'left' }
carrotVertical={ 'top' }
carrotStyle={
{
paddingLeft: 15,
}
}
>
<VSSelect.Input
VSForm
action={ this.toggleDropDown }
editable={ false }
label="VS Select Form"
/>
<View>
<View style={ styles.absolute }>
<VSButton text="SUBMIT" />
</View>
</View>
</VSSelect.Form>
</View>
Props
Name | Default | Type | Description |
---|---|---|---|
VSForm | string | ||
dropDownList | array | [ [ { label: STRING, labelTextStyle: ARRAY OR OBJECT, rightIcon: OBJECT, onPress: FUNCTION } ... ] | |
showDropDown | object | ||
editable | object | ||
carrotColor | 'white' | string | Controls the color of the carrot. |
carrotVertical | 'top' | string | Controls the horizontal position of the carrot. Accepted values includes: left , middle , or right . |
carrotHorizontal | 'right' | string | Controls the vertical position of the carrot. Accepted values includes: top or bottom . |
carrotStyle | {} | object | This will extend the styles applied to the carrot container. A case for this is to change the right/left padding of the carrot's horizontal position. |
listStyle | {} | object | This will extend the styles applied to the drop-down list |
itemStyle | {} | object | This will extend the styles applied to the drop-down items. |
rightIconStyle | {} | object | This will extend the styles applied the drop-down right icon on items. |