Getting Started

A simple and customizable React Native component for select with drop down and customizable styles

Prerequisites

In order to use this package with a react native app you will need the development environment configured for react native i.e., Node, the React Native command line interface, a JDK, and Android Studio.

Installation & Setup instructions for Functional components:

1. Install the package in root directory of the project with :

   npm i react-native-custom-dropdown-select

2. Let's import the dependency with:

   import DropDown from 'react-native-custom-dropdown-select';

3. In order to manage the toggling behaviour of dropdown we are going to make use of state, let's import that and initialise the state:

   import React,{useState} from 'react';
   
   const [selected, setSelected] = useState();

4. Styling the icon is optional :

   const iconColor = '#ffa500';
   const styleForIcon = {
      marginLeft: 80, color: iconColor
   }

5. Data can be passed down as props and can be defined in one of the two ways :

   // Using key value
   const data = [
     { label: 'One', value: '1' },
     { label: 'Two', value: '2' },
     { label: 'Three', value: '3' },
     { label: 'Four', value: '4' },
     { label: 'Five', value: '5' },
     ];
   
   
   // Using arrays
   const data = [
     'one', 'two', 'three'
   ];

6. Finally let's define a handler to log/ manipulate the data :

   const selectData = (value) => {
       setSelected(value);
       console.log('You selected ::>>', value);
   }

Installation & Setup instructions for Class based components:

1. Install the package in root directory of the project with :

   npm i react-native-custom-dropdown-select

2. Let's import the dependency with:

   import DropDown from 'react-native-custom-dropdown-select';

3. In order to manage the toggling behaviour of dropdown we are going to make use of state, define the initial state:

   constructor(props) {
      super(props);
      this.state = {
        selected: null,   
      };
    }

4. Styling the icon is optional and the same can be done with inside render:

   const iconColor = '#ffa500';
   const styleForIcon = {
      marginLeft: 80, color: iconColor
   }

5. Data can be passed down as props and can be defined in one of the two ways :

   // Using key value
   data: [
           { label: 'One', value: '1' },
           { label: 'Two', value: '2' },
           { label: 'Three', value: '3' },
           { label: 'Four', value: '4' },
           { label: 'Five', value: '5' },
       ],
   
   
   // Using arrays
     data: ['One', 'Two', 'Three']
   

Usage

Lets use the component

<DropDown disabled={false} icon='ellipsis-h' data={data} onSelect={(value) => selectData(value)} iconStyle={styleForIcon} />

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE.txt for more information.