rnd

rndviewfix

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.

Showing:

Popularity

Downloads/wk

0

GitHub Stars

108

Maintenance

Last Commit

2yrs ago

Contributors

8

Package

Dependencies

0

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-native-draggable-view

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

draggable-view-sample

react-native-draggable-view

Installation

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

Usage

    <Drawer
        initialDrawerSize={0.09}
        autoDrawerUp={1} // 1 to auto up, 0 to auto down
        renderContainerView={() => (
            <Screen2 navigation={this.props.navigation} />
        )}
        renderDrawerView={() => (
            <Screen3 navigation={this.props.navigation} />
        )}
        renderInitDrawerView={() => (
            <View style={{ backgroundColor: 'white', height: 66 }}>
                <StatusBar hidden={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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100