1.0.1 • Published 9 months ago
react-native-pip-reanimated v1.0.1
react-native-pip-reanimated
PiP view for React Native via react-native-reanimated
Installation
npm install react-native-pip-reanimated
Usage
import { PictureInPictureView } from "react-native-pip-reanimated";
Props
// if the view was flung with some velocity, let it glide
minimumGlideVelocity?: number;
// determines how much the view can glide
deceleration?: number;
// the initial position in which to render the view, default bottom-left
initialPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
// inset the initial position by this px amount from the edge, defaults to edge's margin
initialInsetX?: number;
initialInsetY?: number;
// if using dragToDestroy, set an overlay color to display when the view
// is far enough out-of-bounds to be destroyed (optional)
destroyOverlayColor?: string;
// separate configuration for each edge, see below.
edgeConfig: {
top: EdgeConfig;
bottom: EdgeConfig;
left: EdgeConfig;
right: EdgeConfig;
}
EdgeConfig
(top, bottom, left, right)
// px from edge that the view likes to sit at
margin: number;
// spring params to bounce the view back into bounds with if not destroying
spring?: WithSpringConfig;
// prevent the view from being dragged off-screen, if destroyByDrag is not desired
// 0.8 means 80% of the view will still be on-screen when it would otherwise be 100% off-screen
resistance?: number;
// enable destroying the view by flinging
destroyByFling?: {
// the minimum required velocity to destroy the view
minimumVelocity: number;
// the maximum angle (in radians oriented towards the edge) allowed to destroy the view.
// for example, if the user flings the view at 75 degrees (in unit circle), we can prevent
// the view from being destroyed on the right edge by lowering the maximum angle.
// in other words: _how_ perpendicular the fling direction must be to the edge.
maximumAngle: number;
// once destroying has begun, fade out the view over this duration
fadeDuration: number;
// when animating the fling, optionally lock the animation to one axis
lockAxis?: boolean;
};
// enable destroying the view by dragging off-screen
destroyByDrag?: {
// minimum percent of view that must be off-screen to destroy upon releasing the drag
minimumOutOfBounds: number;
// the velocity at which to animate the view when released
animateVelocity: number;
};
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
1.0.1
9 months ago
0.1.0-beta.3
2 years ago
0.1.0-beta.1
2 years ago
0.1.0-alpha.7
2 years ago
0.1.0-alpha.6
2 years ago
0.1.0-alpha.5
2 years ago
0.1.0-alpha.4
2 years ago
0.1.0-alpha.3
2 years ago
0.1.0-alpha.2
2 years ago
0.1.0-alpha.1
2 years ago