Home

Awesome

React Native Custom Picker

npm version build status

React native customizable picker component.

Installation

Using npm:

npm i -S react-native-custom-picker

or yarn:

yarn add react-native-custom-picker

Props

Prop NameData TypeDefault ValuesDescription
optionsany[]undefinedOption list.
valueanyundefinedCurrent selected item.
defaultValueanyundefinedDefault value. When clear button pressed this value become selected item.
placeholderstring'Pick an item'Placeholder, as default text to display when no option is selected.
modalAnimationType'none', 'slide' or 'fade''none'Modal animation type.
headerTemplateHeaderTemplateFunctionundefinedAssign function to render header.
footerTemplateFooterTemplateFunctionundefinedAssign function to render footer.
fieldTemplateFieldTemplateFunctionBasic/default field viewAssign function to render field view.
fieldTemplatePropsFieldTemplatePropsundefinedProps for field template
optionTemplateOptionTemplateFunctionBasic/default option viewAssign function to render option.
optionTemplatePropsOptionTemplatePropsundefinedProps for option template
getLabel(selectedItem: any) => stringReturns selectedItem.toString()Assign function to return the selected option text to be displayed in field.
styleViewStyledefaultStyle of field container.
backdropStyleViewStyledefaultStyle of modal backdrop.
modalStyleViewStyledefaultDropdown modal style.
maxHeightViewStyledefaultMaximum height of modal.
refreshControlRefreshControlundefinedComponent for pull-to-refresh functionality.
scrollViewPropsScrollViewPropsundefinedScrollView props. See: https://github.com/budiadiono/react-native-custom-picker/issues/3
onValueChangeViewStyleundefinedEvent fired when value has been changed.
onFocusViewStyleundefinedEvent fired when modal is opened.
onBlurViewStyleundefinedEvent fired when modal is closed.

FieldTemplateProps

Prop NameData TypeDefault ValuesDescription
textStyleTextStyleundefinedStyle of field text.
containerStyleViewStyleundefinedStyle of field container.
clearImageJSX.Elementcross iconImage element for clear button.

OptionTemplateProps

Prop NameData TypeDefault ValuesDescription
textStyleTextStyleundefinedStyle of option text.
containerStyleViewStyleundefinedStyle of option container.

Example

Basic Example (No Custom)

You can use CustomPicker component directly as shown below:

Basic Example Demo

import * as React from 'react'
import { Alert, View } from 'react-native'
import { CustomPicker } from 'react-native-custom-picker'

export class BasicExample extends React.Component {
  render() {
    const options = ['One', 'Two', 'Three', 'Four', 'Five']
    return (
      <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
        <CustomPicker
          options={options}
          onValueChange={value => {
            Alert.alert('Selected Item', value || 'No item were selected!')
          }}
        />
      </View>
    )
  }
}

Advanced Example (Customized)

Or customize it your self like this:

Advanced Example Demo

import * as React from 'react'
import { Alert, Text, View, TouchableOpacity, StyleSheet } from 'react-native'
import { CustomPicker } from 'react-native-custom-picker'

export class CustomExample extends React.Component {
  render() {
    const options = [
      {
        color: '#2660A4',
        label: 'One',
        value: 1
      },
      {
        color: '#FF6B35',
        label: 'Two',
        value: 2
      },
      {
        color: '#FFBC42',
        label: 'Three',
        value: 3
      },
      {
        color: '#AD343E',
        label: 'Four',
        value: 4
      },
      {
        color: '#051C2B',
        label: 'Five',
        value: 5
      }
    ]
    return (
      <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
        <CustomPicker
          placeholder={'Please select your favorite item...'}
          options={options}
          getLabel={item => item.label}
          fieldTemplate={this.renderField}
          optionTemplate={this.renderOption}
          headerTemplate={this.renderHeader}
          footerTemplate={this.renderFooter}
          onValueChange={value => {
            Alert.alert('Selected Item', value ? JSON.stringify(value) : 'No item were selected!')
          }}
        />
      </View>
    )
  }

  renderHeader() {
    return (
      <View style={styles.headerFooterContainer}>
        <Text>This is header</Text>
      </View>
    )
  }

  renderFooter(action) {
    return (
      <TouchableOpacity
        style={styles.headerFooterContainer}
        onPress={() => {
          Alert.alert('Footer', "You've click the footer!", [
            {
              text: 'OK'
            },
            {
              text: 'Close Dropdown',
              onPress: action.close.bind(this)
            }
          ])
        }}
      >
        <Text>This is footer, click me!</Text>
      </TouchableOpacity>
    )
  }

  renderField(settings) {
    const { selectedItem, defaultText, getLabel, clear } = settings
    return (
      <View style={styles.container}>
        <View>
          {!selectedItem && <Text style={[styles.text, { color: 'grey' }]}>{defaultText}</Text>}
          {selectedItem && (
            <View style={styles.innerContainer}>
              <TouchableOpacity style={styles.clearButton} onPress={clear}>
                <Text style={{ color: '#fff' }}>Clear</Text>
              </TouchableOpacity>
              <Text style={[styles.text, { color: selectedItem.color }]}>
                {getLabel(selectedItem)}
              </Text>
            </View>
          )}
        </View>
      </View>
    )
  }

  renderOption(settings) {
    const { item, getLabel } = settings
    return (
      <View style={styles.optionContainer}>
        <View style={styles.innerContainer}>
          <View style={[styles.box, { backgroundColor: item.color }]} />
          <Text style={{ color: item.color, alignSelf: 'flex-start' }}>{getLabel(item)}</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    borderColor: 'grey',
    borderWidth: 1,
    padding: 15
  },
  innerContainer: {
    flexDirection: 'row',
    alignItems: 'stretch'
  },
  text: {
    fontSize: 18
  },
  headerFooterContainer: {
    padding: 10,
    alignItems: 'center'
  },
  clearButton: { backgroundColor: 'grey', borderRadius: 5, marginRight: 10, padding: 5 },
  optionContainer: {
    padding: 10,
    borderBottomColor: 'grey',
    borderBottomWidth: 1
  },
  optionInnerContainer: {
    flex: 1,
    flexDirection: 'row'
  },
  box: {
    width: 20,
    height: 20,
    marginRight: 10
  }
})

Example Projects

Built with Typescript

Built with Javascript

License

MIT