react-native-thiering v1.1.3

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

🎯 Properties

🪄 Style