React-native-drawer-item-selector NPM

Item Selector from given drawer items component for React Native.

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

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 (
      <View style={styles.view}>
        <Text style={styles.text}>Hello World React Native!</Text>
        <Button
          onPress={() => { setDrawerVisible(); }}
          title='Open Drawer'
        />
        <DrawerSelector index={this.state.index} setIndex={(value) => this.setState({ index: value })} data={[['1', 'Item 1', () => { console.log('Item 1 Selected') }], ['2', 'Item 2', () => { console.log('Item 2 Selected') }]]} setDrawerSelector={setDrawerSelector} />
      </View>
    );
  }
};

const styles = StyleSheet.create({
  view: {
    backgroundColor: '#c3b3b3',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    color: 'white'
  }
});

Functional component

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 (
    <View style={styles.view}>
      <Text style={styles.text}>Hello World React Native!</Text>
      <Button
        onPress={() => { setDrawerVisible(); }}
        title='Open Drawer'
      />
      <DrawerSelector index={index} setIndex={setIndex} data={[['1', 'Item 1', () => { console.log('Item 1 Selected') }], ['2', 'Item 2', () => { console.log('Item 2 Selected') }]]} setDrawerSelector={setDrawerSelector} />
    </View>
  );
};


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'