react_native_dropdown

A React Native dropdown component easy to customize for both iOS and Android.

Features

• Multiple Dropdown types in one package
• Easy to use
• Consistent look and feel on iOS and Android
• Customizable font size, colors and styling
• Implemented with javascript

Getting started

npm install @jaichaudhary/react_native_dropdown --save

or

yarn add @jaichaudhary/react_native_dropdown

Dropdown types

import { HandyDrop } from "@jaichaudhary/react_native_dropdown";

and

import { ModalDrop } from "@jaichaudhary/react_native_dropdown";

Demo

HandyDrop

ModalDrop

Example

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [output, setOutput] = useState("");
  const arr = [
    "text",
    "kill me!",
    "hello ji",
    "text",
    "kill me!",
    "hello ji",
    "text",
    "kill me!",
    "hello ji",
    "text",
    "kill me!",
    "hello ji",
  ];
  const returnVal = (val) => {
    setOutput(val);
    setIsOpen(false);
  };
  return (
    <View contentContainerStyle={{ flex: 1 }}>
      <View
        style={{
          displya: "flex",
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <Text>{output}</Text>
        <TouchableOpacity
          style={{ backgroundColor: "pink", padding: 10 }}
          onPress={() => {
            setIsOpen(true);
          }}
        >
          <Text>Click here!</Text>
        </TouchableOpacity>
        {isOpen && (
          <HandyDrop value={arr} returnVal={returnVal} />
          // <ModalDrop
          //   value={arr}
          //   returnVal={returnVal}
          //   // modalViewStyle={{backgroundColor: 'yellow'}}
          // />
        )}
      </View>
    </View>
  );
};

Dropdown Props

Props	Params	isRequire	Description
value	Array	Yes	Data is a plain array
returnVal	Callback function	Yes	Gives us the slected data
parentViewStyle	Object	No	Styling for the parent View
modalViewStyle	Object	No	Styling for the modal View
textParentStyle	Object	No	Styling for the parent View of text
selectTextStyle	Object	No	Styling for the select an item text
textStyle	Object	No	Styling for the text in dropdown