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-dropdownyarn add react-native-spk-dropdownSimple Dropdown Component
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
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 |