Feel free to contribute to this project

📦 React Native Thiering 📦

Bundle of useful and beautiful customizable components

👉🏻 Dropdown

• 🔍 Preview
• 💾 Installation
• ✍ Usage
  • 💻 Code
  • 📋 Types
  • 🎯 Properties
  • 🪄 Style

🔍 Preview

💾 Installation

npm i react-native-thiering

✍ Usage

💻 Code

Let's build the preview! (You can find the full code below)

Import the Dropdown:

import { Dropdown } from "react-native-thiering";

Initialize state for selected item:

const [selected, setSelected] = useState({
    label: "Germany",
    value: "germany",
});

Initialize list for dropdown:

const list = [
  {
    label: "Germany",
    value: "germany",
  },
  {
    label: "Italy",
    value: "italy",
  },
  {
    label: "France",
    value: "france",
  },
];

Use Dropdown element:

<Dropdown
  list={list}
  defaultValue={selected.value}
  onChange={setSelected}
/>

Make it ✨your✨ dropdown:

 <Dropdown
   list={list}
   defaultValue={selected.value}
   onChange={setSelected}
   placeholder="Select country"
   containerStyle={{ width: 300 }}
 />

Here is the full code for the preview:

import React, { useState } from "react";
import { StyleSheet, View, Text } from "react-native";
import { Dropdown } from "react-native-thiering";

export default function App() {
  const [selected, setSelected] = useState({
    label: "Germany",
    value: "germany",
  });

  const list = [
    {
      label: "Germany",
      value: "germany",
    },
    {
      label: "Italy",
      value: "italy",
    },
    {
      label: "France",
      value: "france",
    },
  ];

  return (
    <View style={styles.container}>
      <Text>Selected: {selected.label}</Text>
      
      <Dropdown
        list={list}
        defaultValue={selected.value}
        onChange={setSelected}
        placeholder="Select country"
        containerStyle={{ width: 300 }}
      />
      
    </View>
  );
}

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

📋 Types

Name	Value	Description
DropdownItem	{label: string; value: string;}	Dropdown item type

🎯 Properties

Property	Type	Default	Description
list	DropdownItem[]	[]	List that will be displayed in dropdown
defaultValue	string	-	Initial value of dropdown
open	boolean	false	Initial state of dropdown (opened/closed)
onChange	(item: DropdownItem) => void	-	Fires when new value is selected
onChangeText	(text: string) => void	-	Fires when search input changes
placeholder	string	"Search..."	Placeholder of search input
placeholderTextColor	string	"#888"	Placeholder text color
iconLeft	JSX.Element	<Icon name="search-outline" size={18} color={"#888"} />	Icon left of search input
iconRightClose	JSX.Element	<Icon name="chevron-up" size={18} color={"#888"} />	Icon right of search input when dropdown is open
iconRight	JSX.Element	<Icon name="chevron-down" size={18} color={"#888"} />	Icon right of search input when dropdown is closed

🪄 Style

Property	Type	Default	Description
containerStyle	ViewStyle	-	Style of view container
searchBarStyle	ViewStyle	-	Style of TouchableOpacity
textInputStyle	TextStyle	-	Style of search input
dropdownStyle	ViewStyle	-	Style of dropdown
dropdownItemStyle	ViewStyle	-	Style of dropdown item