Skip to content
A Draggable View that can be dragged either Up or Down for React Native
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets/icons
src
types
.babelrc
.prettierrc
.watchmanconfig
App.js
README.md
app.json
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

react-native-draggableview

npm (scoped)

Alt Text

Alt Text

Installation

Installation can be done through npm or yarn:

npm i draggableview --save
yarn add draggableview

Basic Usage

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import DraggableView from 'draggableview';

export default class App extends React.Component {
  render() {
    return (
      <DraggableView
        style={styles.container}
        backgroundComponent={<View style={styles.view} />}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
  view: {
    flex: 1,
    backgroundColor: 'red',
  },
});

API

Props

Prop Type Description
style ViewStyle Styles of DraggableView.
children Component The component to render on the DraggableView.
backgroundComponent Component The component to render behind the DraggableView.
offset number If you want to give to DraggableView an offset once it's fully dragged. This offset will be positioned based on the drag direction.
direction string Can be either "up" or "down". This determines the drag direction. Default is "down".
threshold number The minimum drag distance required to trigger the drag animation.

Methods WIP, might change.

Use ref to access these methods.

Method Parameter Description
moveToNormal void Moves DraggableView to it's default position
moveToBottom void Moves DraggableView to it's bottom position
moveToTop void Moves DraggableView to it's top position

Examples

1.

Alt Text

import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import DraggableView from 'draggableview';

export default class App extends React.Component {
  render() {
    return (
      <DraggableView
        style={styles.container}
        backgroundComponent={<View style={styles.view} />}
        offset={85}
        threshold={300}
        direction="up"
      >
        <View style={styles.innerView}>
          <Text>Drag me up!!</Text>
        </View>
      </DraggaleView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
    marginBottom: 35,
  },
  view: {
    flex: 1,
    backgroundColor: 'red',
  },
  innerView: {
    flex: 1,
    padding: 15,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
});

2.

Alt Text

import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';

import DraggableView from 'draggableview';

export default class App extends React.Component {
  render() {
    return (
      <DraggableView
        style={styles.container}
        backgroundComponent={<View style={styles.view} />}
        offset={40}
        threshold={300}
      >
        <View style={styles.innerView}>
          <Text>Drag me down!!</Text>
        </View>
      </DraggaleView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
  view: {
    flex: 1,
    backgroundColor: 'red',
  },
  innerView: {
    flex: 1,
    padding: 20,
    alignItems: 'center',
  },
});

License

MIT.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.