| | | | |---|---|---| | | | |

👉🏻 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 |