Licence
MIT
Version
0.1.9
Deps
0
Size
68 kB
Vulns
0
Weekly
0
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-drawerUsage
// ...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>
)
}
// ...
Props
| Property | Type | Require | 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. |
Creators
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT