react-native-falling-drawer
Customizable falling drawer for React Native
Installation
$ npm install react-native-falling-drawer --savethen
import React, { Component } from 'react';
import {
Text,
} from 'react-native'
import FallingDrawer from 'react-native-falling-drawer'
const SCREENS = [
{
key: "profile",
name: "Profile",
color: "red",
titleColor: "#fff",
hamburgerColor: "#fff",
render: () => <View><Text>This is profile screen</Text></View>
}
]
render() {
return (
<FallingDrawer screens={SCREENS}/>
);
}
}Refer to the Example
Available props:
| prop | type | description | default |
|---|---|---|---|
| screens | array | An array of sceens to switch between | |
| headerHeight | number | Height of the header | ios: 60, android: 50 |
| shakeDuration | number | Shake effect duration in ms | 800 |
| optionCollapseSpeed | number | Collapse speed of the options in ms | 150 |
| optionCollapseDelay | number | Delay between each option animation in ms | 200 |
| diversifyAnimations | boolean | If true, it applies bounce, shake and swing animations to the options, otherwise only shake | true |
screens:
Each screen in the screens array is an object which looks like this:
{
key: "profile", // unique key among all screens
name: "Profile", // header and option title
color: "red", // header and option color
titleColor: "#fff",
hamburgerColor: "#fff",
render: () => {...} // specifies how the screen is rendered
customHeader: () => {...} // custom header and option
}
License
MIT