This is documentation for Nabta-PullDown-Animation. Author: Ahmed Sharaf.
npm install nabta-pulldown-animation
Please note that you need to MANUALLY install ONLY IF NOT INSTALLED the following packages:
npm install react-native-reanimated
react-native-redash
react-native-svg
react-native-gesture-handler
react-native-vector-icons
Also note that some of this libraries may need manual linking so look at their documentation if any error occurred.
First import the package.
import PullDownAnimation from 'nabta-pulldown-animation
Then use it like that
<PullDownAnimation />
Prop Name | Describtion | Type | Default Value |
---|---|---|---|
topOffset | Defines the offset of the pull down animation from top edge of the screen, typically will be the app bar height to be set right after it | Number | 26 |
size | Defines the max size of the pull down animation means the max height it can reach | Number | SCREEN_HEIGHT * 0.15 |
fillColor | The color of the pulled down area | String (Color) | "#000000" |
rtl | Whether the app is in RTL (Arabic) or not | boolean | false |
arrowColor | Color of the arrow icon | String (Color) | "white" |
arrowSize | Size of the arrow icon | Number | 12 |
onDragComplete | A callback function that is triggered when the pulldown in completed and the pulled down area is started to go back | function() | () => {console.log("Drag Done")} |
onHeightChange | A callback function that is continuosly being triggered whenever the user drags the pulldown, it takes the current height as a first parameter | funcntion(height) | (_height) => {console.log(_height)} |