Draggableview NPM

react-native-draggableview

Alt Text

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.

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.

react-native appandflow react-native draggableView draggableView expo draggable View

@appandflow/touchable

@infinitebrahmanuniverse/nolb-drag @everything-registry/sub-chunk-1513

5 years ago

5 years ago

6 years ago

6 years ago