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