react-native-draggableview

Installation

Installation can be done through npm or yarn:

• This lib uses react-native-gesture-handler. If you are using Expo it is included by default, otherwise you will need to install it.

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.

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.

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.