react-native-drawer-selector v0.0.5

react-native-drawer-selector

The Package can be found at react-native-drawer-selector.

• 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-selector --save

or

yarn add react-native-drawer-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-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-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

Author

Made by Anshul Singh