yaraht17 / react-native-draggable-view

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.

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

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

Prop	Default	Type	Description
onDragDown	undefined	function	If you pass a function as parameter it will be notified when the user drag down the drawer
onRelease	undefined	function	If you pass a function as parameter it will be notified when the user release the drawer after drag it
initialDrawerSize	0.0	number	It'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
isInverseDirection	false	boolean	Allows 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.
renderContainerView	undefined	View	Pass as parameter a renderable react component to show as container.
renderDrawerView	undefined	View	Pass as parameter a renderable react component to show as drawer.
renderInitDrawerView	undefined	View	Pass as parameter a renderable react component to show as view can draggable
finalDrawerHeight	0	number	The height position that the drawer will stop starting from top. Example: finalDrawerHeight={100} will stop the drawer at 100 pixels from reaching the top.

react-native-draggable-view's Issues

A way to stop it from going all the way up?

I have a component on the top of the view that I would like to stay there and not be covered by the draw up. Is this possible?

react3.default.createClass is not a function

After react v15.5.0 it was moved to separated to package called create-react-class. I think this caused the error if we use later version of react

Add option to have an inverse draggable view.

The current solution only works in one direction, which is not very helpful. However, it can be more dynamic.

It should allow sending a prop to the component to know if you want to have the drawer in inverse mode. (By default is will be from the bottom to the top)

Example of current draggable view:

Inverse mode:

Please update NPM

The current version in NPM is 0.0.6 but the Github repo is 0.0.7

initialDrawerSize change with setState not working

component loads fine with initialDrawerSize but if i change initialDrawerSize with setState it doesnt update component still uses the older size

slide up programmatically

is there any way to invoke the slide up animation programmatically?

Usage with React Native Maps

How to use with react native maps. In my scenario, the drawer view is a MapView and scrolling the map results in dragging the view down. I am using 0.63.3

Not able to run Example

When I tried the Drawer, it gives below error on device.
What could be the reason?

Initializing <RCTCxxBridge: 0x6000001a71c0> (parent: <RCTBridge: 0x6080000a37e0>, executor: RCTWebSocketExecutor)
2017-08-24 01:44:21.955 [fatal][tid:main] Unable to resolve module ReactNativeART from <user DIR path>/Example/DemoDrawer/node_modules/react-native/Libraries/react-native/react-native-implementation.js: Module does not exist in the module map

Not working with iPhone-X

I have integrated the lib, its not show the the drawer with iPhone-X
lib Info:
Node: 10.15.0 - /usr/local/bin/node
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
react: 16.8.3 => 16.8.3
react-native: 0.59.8 => 0.59.8
react-native-cli: 2.0.1
react-native-rename: 2.4.1

import Drawrer throwing an error

As I try to import Drawer from 'react-native-draggable-view' I got this error: undefined is not a function (near '..._react2.default.createClass...').
I installed react-native-draggable-view with npm i react-native-draggable-view --save and my package.json shows the version 0.0.4

Am I doing something wrong? Do you know which might be the problem?

Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`

Good day,

I have implemented your react-native-draggable-view into my project, and have gotten it to work, but every time I slide the drawer up or down, I receive the above error. I am using version 0.0.6 and have went into the source code and cannot find a remedy. Here is the code I wrote to trigger the error:

import React, { useState, useEffect, Component }from "react";
import {Alert, Dimensions, Platform, StyleSheet, Text, View, Button, TouchableOpacity, TouchableHighlight, SafeAreaView, ScrollView, ActivityIndicator, StatusBar} from "react-native";
import Drawer from 'react-native-draggable-view' 
import {Screen2} from './Screen2'
import {Screen3} from './Screen3'

function Screen({navigation}) {

return(
      <View style = {styles.container}>
          <Drawer
        initialDrawerSize={0.3}
        finalDrawerHeight={0.5}

        //autoDrawerUp={0.5}
        renderContainerView={() => (
          <Screen2 navigation = {navigation}/>
        )}
        renderDrawerView={() => (
          <Screen3 navigation = {navigation} />
        )}
          renderInitDrawerView={() => (
            <View style = {{alignItems: 'center'}}>
            <View style={{backgroundColor: '#d3d3d3', height: height*0.01, width: width*0.2, alignItems: 'center'}}>
            <StatusBar hidden={false} />
            </View>
            </View>
      )}
    />
      </View>

)
}

export {Screen}

Example given isn't working

example project given isn't working.
getting error as attached.

Add react-native-draggable-view to reactnative.gallery 🎨

Hi @yaraht17!

Sorry, this is not an issue...

I'm Xavier and I’ve been working as a freelance React Native developer for more than 2 years.
I try to help community when I can: sharing my works on open-source, like you do!

I want to help developers to have more visibility.
So, I've created a website where developers can share with entire
world their React Native projects, components, apps...

This website allow developers to show their works and get feedback.
Just like a Dribbble but for React Native developers.

https://reactnative.gallery

Or chat about it?
https://slack.reactnative.gallery

isInverseDirection is not working i.e. from top to bottom

Unable to resolve module

This component doesn't work. It tries to look for a component Screen2 in node_modules/components/ and fails with the error Unable to resolve module since I don't have that component