❤
npm
Sign UpSign In

draggableview
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i draggableview

Repository

github.com/AppAndFlow/react-native-draggableview

Homepage

github.com/AppAndFlow/react-native-draggableview#readme

Weekly Downloads

6

Version

0.0.4

License

MIT

Unpacked Size

14.2 kB

Total Files

4

Last publish

Collaborators

  • valium
Try on RunKit
Report malware