0.0.2 • Published 3 years ago
react-native-drawer-option-selector v0.0.2
react-native-drawer-option-selector
The Package can be found at react-native-drawer-option-selector.
Drawer Selector from given options component for React Native.
- Maximum Customization
- Max Lightweight Component
- No Dependency, Configuration
- Add Your own Component To Bottom Sheet
- Support Gesture
- Available for iOS and Android
- Smooth Animation
- Selector Shape Changeable(Circle, Square)
- Dynamically adjust Title and Options
Installation
npm i react-native-drawer-option-selector --save
or
yarn add react-native-drawer-option-selector
Usage
Class component
import React, { Component } from "react";
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
Button
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import DrawerSelector from 'react-native-drawer-option-selector';
export default class App extends Component {
var setmodalVisible;
const setDrawerSelector = (func) => {
setmodalVisible = func;
}
render() {
return (
<View style={styles.view}>
<Text style={styles.text}>Hello World React Native!</Text>
<Button
onPress={() => { setmodalVisible(); }}
title='Open Drawer'
/>
<DrawerSelector data={[['1', 'Option 1', () => { console.log('Option 1 Selected') }], ['2', 'Option 2', () => { console.log('Option 2 Selected') }]]} setDrawerSelector={setDrawerSelector} />
</View>
);
}
};
const styles = StyleSheet.create({
view: {
backgroundColor: '#d3d3d3',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
text: {
color: 'white'
}
});
Functional component
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
Button
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import DrawerSelector from 'react-native-drawer-option-selector';
const App = () => {
var setmodalVisible;
const setDrawerSelector = (func) => {
setmodalVisible = func;
}
return (
<View style={styles.view}>
<Text style={styles.text}>Hello World React Native!</Text>
<Button
onPress={() => { setmodalVisible(); }}
title='Open Drawer'
/>
<DrawerSelector data={[['1', 'Option 1', () => { console.log('Option 1 Selected') }], ['2', 'Option 2', () => { console.log('Option 2 Selected') }]]} setDrawerSelector={setDrawerSelector} />
</View>
);
};
const styles = StyleSheet.create({
view: {
backgroundColor: '#d3d3d3',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
text: {
color: 'white'
}
});
export default App;
Props
Props | Type | Description |
---|---|---|
setDrawerSelector | function | Takes function setmodalVisible and set setmodalVisible = True whenever setmodalVisible() 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' |
unitTextStyle | object | Sets text style for each option |
unitHeight | number | Sets Height of Each Row in drawer (Height of each Option), Default = 60 |
seperatingLineColor | string | Sets seperating line color, Default = '#000000' |
title | string | Title of the Drawer, Default = 'Title' |
titleTextStyle | object | Sets text style for title |
data | array | Sets data for Drawer, at each index 'ID', 'Option Name', ()=>{ //Function to perform }, Default = ['1', 'Option 1', () => { }, '2', 'Option 2', () => { }] |
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Author
Made by Anshul Singh