React Native Custom Picker

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 Name Data Type Default Values Description
options any[] undefined Option list.
value any undefined Current selected item.
defaultValue any undefined Default value. When clear button pressed this value become selected item.
placeholder string 'Pick an item' Placeholder, as default text to display when no option is selected.
modalAnimationType 'none', 'slide' or 'fade' 'none' Modal animation type.
headerTemplate HeaderTemplateFunction undefined Assign function to render header.
footerTemplate FooterTemplateFunction undefined Assign function to render footer.
fieldTemplate FieldTemplateFunction Basic/default field view Assign function to render field view.
fieldTemplateProps FieldTemplateProps undefined Props for field template
optionTemplate OptionTemplateFunction Basic/default option view Assign function to render option.
optionTemplateProps OptionTemplateProps undefined Props for option template
getLabel (selectedItem: any) => string Returns selectedItem.toString() Assign function to return the selected option text to be displayed in field.
style ViewStyle default Style of field container.
backdropStyle ViewStyle default Style of modal backdrop.
modalStyle ViewStyle default Dropdown modal style.
maxHeight ViewStyle default Maximum height of modal.
refreshControl RefreshControl undefined Component for pull-to-refresh functionality.
scrollViewProps ScrollViewProps undefined ScrollView props. See: https://github.com/budiadiono/react-native-custom-picker/issues/3
onValueChange ViewStyle undefined Event fired when value has been changed.
onFocus ViewStyle undefined Event fired when modal is opened.
onBlur ViewStyle undefined Event fired when modal is closed.

FieldTemplateProps

Prop Name Data Type Default Values Description
textStyle TextStyle undefined Style of field text.
containerStyle ViewStyle undefined Style of field container.
clearImage JSX.Element cross icon Image element for clear button.

OptionTemplateProps

Prop Name Data Type Default Values Description
textStyle TextStyle undefined Style of option text.
containerStyle ViewStyle undefined Style 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
  }
})

GitHub