Skip to content
React native customizable picker component.
Branch: master
Clone or download
Latest commit 9db6f7d Apr 28, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode include example project Jun 20, 2018
doc/images initial commit Mar 5, 2018
example Default Value Jun 22, 2018
src fix #4 Apr 28, 2019
.babelrc added unit tests Jun 25, 2018
.gitignore update .gitignore Jun 19, 2018
.npmignore include example project Jun 20, 2018
.prettierrc initial commit Mar 5, 2018
.travis.yml travis-ci Jun 25, 2018
README.md fix #4 Apr 28, 2019
package.json Release version 0.4.0 Apr 28, 2019
release.sh Added release bash cmd Mar 5, 2018
tsconfig.json added unit tests Jun 25, 2018
tslint.json initial commit Mar 5, 2018
yarn.lock added unit tests Jun 25, 2018

README.md

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 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
  }
})

Example Projects

Built with Typescript

Built with Javascript

License

MIT

You can’t perform that action at this time.