@vivintsolar-oss/native-vs-select

Drop down select component for React Native.

Usage no npm install needed!

<script type="module">
  import vivintsolarOssNativeVsSelect from 'https://cdn.skypack.dev/@vivintsolar-oss/native-vs-select';
</script>

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.