react-native-drag-to-reveal

⚛️ 🖕 You drag, it reveals. (Android/iOS/Web/Expo)

Usage no npm install needed!

<script type="module">
  import reactNativeDragToReveal from 'https://cdn.skypack.dev/react-native-drag-to-reveal';
</script>

README

react-native-drag-to-reveal

🚀 Getting Started

Using Yarn:

yarn add react-native-drag-to-reveal

✏️ Example

import React, { useCallback, useState } from 'react';
import { useWindowDimensions } from "react-native-use-dimensions";

import { DragToReveal } from "react-native-drag-to-reveal";

export default function App() {
  const { width, height } = useWindowDimensions();
  const [open, onChange] = useState<boolean>(true);
  return (
    <DragToReveal
      origin={{
        x: -radius,
        y: -radius + height,
      }}
      open={open}
      onChange={onChange}
      radius={100}
      maxRadius={200}
      renderChildren={({ open, progress }) => (
        <>
          {/* revealed content here */}
        </>
      )}
    />
  );
}

🦄 Prop Types

Name Type Description
style ViewStyle The container style of the obscured content.
radius number Minimum visible drag radius.
maxRadius number Maximum radius size.
origin { x: number, y: number } Placement of the reveal radius w.r.t the container.
renderChildren ({ open: boolean, progress: Animated }) => JSX.Element Render prop. Progress (0 -> 1).
open boolean Content revealed?
onChange (open: boolean) => unknown Content reveal state changed.
disabled boolean Prevent the reveal state from changing.

✌️ License

MIT