/react-native-picker-w-icon

React Native Picker with Icon

Primary LanguageJavaScript

react-native-picker-w-icon

Getting started

$ npm install react-native-picker-w-icon --save

Mostly automatic installation

$ react-native link react-native-picker-w-icon

Usage

import React, { useState } from "react";
import PickerWIcon from 'react-native-picker-w-icon';
import { View, Image, StyleSheet } from "react-native";
import { Icon } from "native-base";

const telCodes = [
  {
    "code": "+60",
    "icon": "https://cdn3.iconfinder.com/data/icons/o-shaped-flag-1/128/O_shaped_asian_flag-21-256.png",
  },
  {
    "code": "+62",
    "icon": "https://cdn3.iconfinder.com/data/icons/o-shaped-flag-1/128/O_shaped_asian_flag-27-128.png",
  },
  {
    "code": "+81",
    "icon": "https://cdn3.iconfinder.com/data/icons/o-shaped-flag-1/128/O_shaped_asian_flag-16-256.png",
  },
]

const PickerWIconApp = props => {

    const [value, setValue] = useState(undefined);

    return (
      <PickerWIcon
        options={telCodes}
        dropdownStyle={{ height: (50 + StyleSheet.hairlineWidth) * telCodes.length }}
        defaultValue={telCodes[0]}
        onSelect={(index, value) => setValue(value)}
        renderRow={
          <View>
            <Image
              source={{ uri: telCodes[0].icon }}
              style={{ width: 30, height: 30 }}
              resizeMode={'cover'}
            />
            <Text numberOfLines={1}>
              {telCodes[0].code}
            </Text>
            <Icon
              name="md-arrow-dropdown"
              style={{ color: 'transparent' }}
            />
          </View>
        }
        selected={
          <View style={styles.button}>
            <Image
              source={{ uri: value.icon }}
              style={styles.iconStyle}
            />
            <Text style={styles.buttonText} numberOfLines={1}>
              {value.code}
            </Text>
            <Icon
              name="md-caret-down"
              style={styles.pickerIcon}
            />
          </View>
        }
      />
    )
}

var styles = StyleSheet.create({
    button: {
      justifyContent: 'space-evenly',
      alignItems: 'center',
      flexDirection: 'row',
      height: 50
    },
    buttonText: {
      fontSize: 16,
      color: 'white'
    },
    pickerIcon: {
      color: 'grey',
      width: 23,
      height: 28
    },
    iconStyle: {
      width: 30,
      height: 30
    },
});

Props

Prop Type Required Default Description
options Array Yes Array of objects to select
selected component Yes The selected component
renderRow component Yes The component to show in the dropdown
disabled bool No false Disables interaction with the component
scrollEnabled bool No true Scrollable
showItemSeparator bool No false Show item separator between dropdown item
defaultValue object No options[0] Default selected value
animated bool No true Animation of showing the dropdown list
showsVerticalScrollIndicator bool No false Show vertical scroll indicator of the list
style style No The style applied to the option container
dropdownStyle style No The style of the dropdown
dropdownTextStyle style No The style of the drop down text

MIT Licensed