Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

DraggableView is a component for react-native, it allows you have a vertical draggable drawer view that you can drag up or drag down. So, if you drag and release that component, then it keeps moving until reach either initial position or container border.

License

NotificationsYou must be signed in to change notification settings

yaraht17/react-native-draggable-view

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DraggableView is a component for react-native, it allows you have a vertical draggable view that you can drag up or drag down. So, if you drag and release that component, then it keeps moving until reach either initial position or container border.

Example

react-native-draggable-view

Installation

$ npm i react-native-draggable-view --save

Usage

<DrawerinitialDrawerSize={0.09}autoDrawerUp={1}// 1 to auto up, 0 to auto downrenderContainerView={()=>(<Screen2navigation={this.props.navigation}/>)}renderDrawerView={()=>(<Screen3navigation={this.props.navigation}/>)}renderInitDrawerView={()=>(<Viewstyle={{backgroundColor:'white',height:66}}><StatusBarhidden={true}/><CartHeader/></View>)}/>

Properties

PropDefaultTypeDescription
onDragDownundefinedfunctionIf you pass a function as parameter it will be notified when the user drag down the drawer
onReleaseundefinedfunctionIf you pass a function as parameter it will be notified when the user release the drawer after drag it
initialDrawerSize0.0numberIt's the initial position or size for Drawer component. If drawer size is 1 that means its using 100% of avalaible space on the screen
isInverseDirectionfalsebooleanAllows to use the draggable view in the inverse direction. Which means from the top to the bottom. By default is from the bottom to the top.
renderContainerViewundefinedViewPass as parameter a renderable react component to show as container.
renderDrawerViewundefinedViewPass as parameter a renderable react component to show as drawer.
renderInitDrawerViewundefinedViewPass as parameter a renderable react component to show as view can draggable
finalDrawerHeight0numberThe height position that the drawer will stop starting from top. Example:finalDrawerHeight={100} will stop the drawer at 100 pixels from reaching the top.

About

DraggableView is a component for react-native, it allows you have a vertical draggable drawer view that you can drag up or drag down. So, if you drag and release that component, then it keeps moving until reach either initial position or container border.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors6

[8]ページ先頭
©2009-2025 Movatter.jp