Introduction

React Native Scaling Drawer is a library that allows developers to easily add a drawer component to their React Native applications. The drawer component is a popular user interface pattern that provides users with a convenient way to access app navigation and other content.

With React Native Scaling Drawer, you can create a drawer that slides in from the side of the screen when a user interacts with a button or other trigger. The drawer can contain any content you like, such as links to other parts of the app or additional information about the current screen.

The ScalingDrawer component takes several props that control its behavior: • onClose and onOpen: These props are called when the drawer is closed or opened, respectively. You can use them to update your app state or perform other actions. • open: This prop determines whether the drawer is currently open or closed. You’ll need to manage this prop yourself using state or some other mechanism. • content: This prop is the content that will be displayed in the drawer. It can be any React component, such as a list of links or a form. • children: This prop is the content that will be displayed in the main part of the app. It can also be any React component, such as a list of items or a map.

API

Installation

npm install react-native-scaling-drawer 

Or

yarn add react-native-scaling-drawer 

Example

import React, { useState } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';
import ScalingDrawer from 'react-native-scaling-drawer';

const App = () => {

  return (
    <ScalingDrawer

      content={
        <View style={styles.drawerContent}>
          <TouchableOpacity>
            <Text style={styles.closeButton}>Drawer Content Here</Text>
          </TouchableOpacity>
        </View>
      }
      children={
        <SafeAreaView style={styles.container}>
          <TouchableOpacity>
            <Text style={styles.openButton}>Open Drawer</Text>
          </TouchableOpacity>
        </SafeAreaView>
      }
      scalingFactor={0.8}
      swipeOffset={50}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightgreen',
  },
  drawerContent: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
    backgroundColor: 'lightblue',
  },
  openButton: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
    backgroundColor: '#333',
    padding: 10,
    borderRadius: 5,
  },
  closeButton: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default App;

Tutorial

Coming Soon…