react-native-drawer-item-selector

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'

License

This project is licensed under the MIT License - see LICENSE.md for details

Author

Made by Anshul Singh