react-native-spk-dropdown

1.1.0 • Public • Published

react-native-spk-dropdown

The element is a DropDown component that is displayed on top of any content attached to the element, without moving the other elements of the graphical interface.

Installation

To install use the following commands:

npm install react-native-spk-dropdown
yarn add react-native-spk-dropdown

Simple Dropdown Component

Avatar Ticket

Simple Data

const data = [
  {
    value: 1,
    label: "item 1"
  },
  {
    value: 2,
    label: "item 2"
  },
  {
    value: 3,
    label: "item 3"
  }
];

Simple Usage

import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import Dropdown from 'react-native-spk-dropdown';


export default function App() {

  const [selectedItem, setSelectedItem] = useState();

  return (
    <View style={styles.container}>
      <Dropdown
        data={data}
        selectedItem={selectedItem}
        placeholder={"Select a item"}
        onChange={(item) => { setSelectedItem(item) }}
        label={"Category"}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 10,
    backgroundColor: '#fff'
  }
});

Custom Dropdown Component

Avatar Ticket

Users Data

const dataUsers = [
  {
    value: 1,
    label: "juan perez",
    name: "juan perez",
    image: "https://cdn1.iconfinder.com/data/icons/user-pictures/101/malecostume-512.png",
    email: "juanperez@gmail.com",
    km: "12km"
  },
  {
    value: 2,
    label: "ana cruz",
    name: "ana cruz",
    image: "https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/girl_avatar_child_kid-256.png",
    email: "anacruz@gmail.com",
    km: "22km"
  },
  {
    value: 3,
    label: "rodrigo spk",
    name: "rodrigo spk",
    image: "https://cdn0.iconfinder.com/data/icons/user-pictures/100/matureman1-2-512.png",
    email: "rodrigospk@gmail.com",
    km: "35km"
  },
];

Custom Usage

import React, { useState } from 'react';
import { 
    Button, 
    Image, 
    StatusBar, 
    StyleSheet, 
    Text, 
    View } 
from 'react-native';
import Dropdown from 'react-native-spk-dropdown';


export default function App() {

  const [selectedItem, setSelectedItem] = useState();
  const [errorVisibility, setErrorVisibility] = useState(false);
  
  return (
    <View style={styles.container}>
      <StatusBar></StatusBar>
      <Dropdown
        data={dataUsers}
        selectedItem={selectedItem}
        placeholder={"Select a user"}
        onChange={(item) => { setSelectedItem(item) }}
        primaryColor={"#14a4ac"}
        boxIconColor={"#14a4ac"}
        boxIconZise={15}
        required={true}
        label={"User"}
        errorVisibility={errorVisibility}
        setErrorVisibility={(value) => { setErrorVisibility(value) }}
        errorMessage={"Unselected user"}
        itemBoxSelected={(item) => renderItem(item, "box")}
        listItem={({ item }) => renderItem(item, "list")}
      />
      < Text style={{ textAlign: 'justify', marginVertical: 50 }}>
        Lorem ipsum dolor sit amet consectetur adipiscing elit, aptent nam augue per iaculis habitant nostra,
        ligula nibh facilisi vivamus diam nisl. Hendrerit tincidunt neque viverra eget a scelerisque,
        tempus accumsan dis est vel per phasellus, magnis et taciti suspendisse class.
        Senectus id cursus class faucibus est eu nec ridiculus, nulla interdum eleifend morbi suscipit sapien orci,
        sodales curae congue phasellus penatibus fermentum sociosqu.
        Vel luctus ultricies sodales hac parturient senectus sociis curabitur,
        sociosqu tristique dis tortor nam tellus porttitor neque, rutrum himenaeos venenatis ante nulla aptent consequat.
        Malesuada accumsan torquent montes sapien mus mollis habitasse eget venenatis,
        morbi vulputate quis vitae odio nisl elementum placerat, massa iaculis quisque nec facilisi lobortis nullam magnis.
        Ultricies turpis aliquam eu maecenas bibendum massa donec phasellus, imperdiet pulvinar posuere in cum magnis libero,
        eros sociis sem quis torquent congue primis.
      </Text >

      <Button onPress={() => {
        setErrorVisibility(!errorVisibility);
      }} title={"Validate unselected field"} />
    </View >
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 10,
    backgroundColor: '#fff'
  },
  //styles for custom items
  card: {
    alignItems: 'flex-start',
    justifyContent: 'center',
    height: 90,
    width: '100%'
  },
  ticket: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center"
  },
  avatarContainer: {
    width: 70,
    justifyContent: "center",
    alignItems: "center"
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 30
  },
  infoContainer: {
    flex: 1,
    paddingLeft: 10
  },
  nameKmSection: {
    width: "100%",
    justifyContent: "center",
    flexDirection: 'row',
    alignItems: "center",
    height: '50%'
  },
  nameContainer: {
    flex: 1,
    justifyContent: "flex-start"
  },
  kmContainer: {
    justifyContent: "flex-start",
    paddingRight: 5
  },
  textKm: {
    color: "#14a4ac",
    fontSize: 10
  },
  emailContainer: {
    width: '100%'
  },
  textEmail: {
    fontSize: 12,
    color: "#bdc3c7"
  }
});

itemBoxSelected and listItem props examples

Individual personalized section (TICKET) for data management. It is always possible to manage independent elements for both "itemBoxSelected" and "listItem", however for the example the same component is used, the only difference is the "type" parameter, the same one that allows comparing and highlighting the selected item from the list.

function renderItem(item, type) {
    return (
      <View style={(type === "list")
        ?
        [styles.card, { backgroundColor: (selectedItem?.value == item.value) ? 'rgba(20, 164, 172, 0.2)' : "#fff" }]
        :
        styles.card
      }>
        <View style={styles.ticket}>

          {/* Image section */}
          <View style={styles.avatarContainer}>
            <Image
              style={styles.avatar}
              source={{ uri: item.image }}
              resizeMode={"cover"}
            />
          </View>

          {/* Info Section */}
          <View style={styles.infoContainer}>
            <View style={styles.nameKmSection}>

              {/* Name */}
              <View style={styles.nameContainer}>
                <View style={{ flex: 1 }}>
                  <Text style={{
                    fontSize: 15,
                    color: (selectedItem?.value == item.value) ? "#14a4ac" : "#000"
                  }}>{item.name}</Text>
                </View>
              </View>

              {/* Distance */}
              <View style={styles.kmContainer}>
                <Text style={styles.textKm}>{item.km}</Text>
              </View>
            </View>

            {/* Email */}
            <View style={styles.emailContainer}>
              <Text style={styles.textEmail}>{item.email}</Text>
            </View>
          </View>
        </View>
      </View>
    )
  }

Props

prop Type Description
data Array The data to be displayed in the component.
selectedItem Object The currently selected item in the list. {value: 1, label: "item 1"}
placeholder string Placeholder text displayed when no item is selected.
onChange Function Function that is called when the selection is changed.
required Boolean Required selection element indicator (*).
primaryColor string Main color to highlight selected elements. 'rgba(20, 164, 172, 0.2)'"#fff"
boxStyle Object Style of the box containing the component the currently selected element. { backgroundColor: '#fff', height: 40 }
boxTextStyle Object Text style inside the box. { color: '#14a4ac', fontSize: 15 }
boxIconColor string Color of the icon (drop-down arrow) inside the box.
boxIconSize Number Size of the icon (drop-down arrow) inside the box.
label string Selection box title.
labelStyle Object Label style. { fontSize: 13, color: '#000' }
errorMessage string Error message displayed in case of failed validation.
errorVisibility Boolean Indicates whether the error message is displayed.
setErrorVisibility Function Function to change the visibility of the error message.
listContainerStyle Object Estilo del contenedor de la lista desplegable. { backgroundColor: '#fff' }
itemListStyle Object Style of the external container of the drop-down list. { backgroundColor: '#fff' }
itemTextStyle Object Text style for list items. The style will be applied as long as a "listItem" element does not exist. { fontSize: 13, color: '#000' }
listItem Function Custom list item. (item) => View
itemBoxSelected Function Selected list item display custom item. (item) => View

Package Sidebar

Install

npm i react-native-spk-dropdown

Weekly Downloads

1

Version

1.1.0

License

ISC

Unpacked Size

34.4 kB

Total Files

3

Last publish

Collaborators

  • rodrigospk