## Key Notes
* Maximum Customization
* Max Lightweight Component
* No Dependency, No Configuration
* Add Your own Component To Bottom Sheet
* Support Gesture
* Available for iOS and Android
* Smooth Animation
* Selector Shape Changeable(Dot, Square)
* Dynamically adjust Title and Items
## Installation
```
npm i react-native-drawer-item-selector --save
```
### or
```
yarn add react-native-drawer-item-selector
```
## Usage
#### Class component
```jsx
import React, { Component } from "react";
import { StyleSheet, View, Text, Button } from 'react-native';
import DrawerSelector from 'react-native-drawer-item-selector';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
index: 0
};
}
render() {
// setDrawerVisible() will be used to open the drawer
var setDrawerVisible;
const setDrawerSelector = (func) => {
setDrawerVisible = func;
}
return (
Hello World React Native!
);
}
};
const styles = StyleSheet.create({
view: {
backgroundColor: '#c3b3b3',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
text: {
color: 'white'
}
});
```
#### Functional component
```jsx
import React, { useState } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import DrawerSelector from 'react-native-drawer-item-selector';
const App = () => {
const [index, setIndex] = useState(0);
// setDrawerVisible() will be used to open the drawer
var setDrawerVisible;
const setDrawerSelector = (func) => {
setDrawerVisible = func;
}
return (
Hello World React Native!
);
};
const styles = StyleSheet.create({
view: {
backgroundColor: '#c3b3b3',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
text: {
color: 'white'
}
});
export default App;
```
## Props
| Props | Type | Description |
| ---------------- | -------- | ------------------------------------------------------- |
| index | state : integer | Contains the index which is currently selected from data, initialised to 0 |
| setIndex | state : function | Set hook function to set the value of index |
| setDrawerSelector| function | Takes function setDrawerVisible and set setDrawerVisible = True whenever setDrawerVisible() is called |
| backgroundColor | string | Sets Drawer Background color, Default = '#2c2c2e' |
| selector | string | Sets Selector type, takes only values = 'dot', 'square', Default = 'dot' |
| selectorColor | string | Sets Selector Color, Default = 'red' |
| itemTextStyle | object | Sets text style for each item |
| itemHeight | number | Sets Height of Each Row in drawer (Height of each item), Default = 60 |
| itemContainerStyle | object | Sets style for each item container |
| seperatingLineColor | string | Sets seperating line color, Default = '#000000' |
| title | string | Title of the Drawer, Default = 'Title' |
| titleTextStyle | object | Sets text style for title |
| titleContainerStyle | object | Sets style for title container |
| data | array | Sets data for Drawer, at each index ['ID', 'Item Name', ()=>{ //Function to perform }], Default = [['1', 'Item 1', () => { }], ['2', 'Item 2', () => { }]] |
| animationType | string | Sets animation of drawer, Default = 'slide', All Options = 'slide', 'fade', 'none' |
## License
This project is licensed under the MIT License - see [LICENSE.md](https://github.com/ansh-099/react-native-drawer-item-selector/blob/master/LICENSE.md) for details
## Author
Made by [Anshul Singh](https://github.com/ansh-099)
---
_Source: https://npm.io/package/react-native-drawer-item-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
