React-native-rn-drawer NPM

react-native-rn-drawer

A React Native component for free-hand drawing on both iOS and Android.

Feature

Draw with your finger and export an image from it.
Change the stroke color and thickness of the pen easily.
Full-customize UI.

Installation

npm install --save react-native-rn-drawer

yarn add react-native-rn-drawer

Usage

// ...import
import Drawer from 'react-native-rn-drawer';

export default function DrawerExample(){
    const [isAnimated, setIsAnimated] = React.useState(true);
    let drawerRef = React.useRef();
    //...
    const toggleDrawer = () => {
        if (drawerRef.current) {
          drawerRef.current.toggleDrawer();
        };
    }
    
    
    return (
        <Drawer
            // backgroundAnimation={["red", "blue"]}
            // backgroundColor= "red"
            // width={200}
            acceptPan={true}
            openDrawerOffset={12}
            useNativeDriver={false}
            isAnimated={isAnimated}
            ref={drawerRef}
          >
                // your component
        </Drawer>
    )
}


// ...

:star2: Props

Property	Type	Default	Description
style	style		you can change the style of drawer with style property
isAnimated	boolean	true	If true active animation drawer
width	number	`window.width - 70`	Width content drawer
duration	number	250	The duration of the open/close animation
backgroundAnimation	string,string	"rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0.2)"	Background ouside animation combined with isAnimation . attribute
acceptPan	boolean	true	Allow for drawer pan (on touch drag). Set to false to effectively disable the drawer while still allowing programmatic control. if isAnimated attribute = false, acceptPan auto set = false
openDrawerOffset	`number`, `(viewport: {width: number, height: number})=> number`	20	Can either be a integer (pixel value) or decimal (ratio of screen width).Defines the right hand margin when the drawer is open.
useNativeDriver	boolean	false	Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.