react-native-clipped

Work in progress - Go away

Clipping effects and animations for react-native 🍠🥒🍕

Try it with Expo

• Work in progress - Go away
  • Usage
  • Documentation
    • Clipped.View
    • Clipped.Transition
    • Clipped.Fragment
    • Animations

Usage

Installation

$ yarn add react-native-clipped

import * as Clipped from 'react-native-clipped';
 
// Show a component using a cliping effect
<Clipped.View animation='clipLeft'>
  <Text>Hi there</Text>
</Clipped.View>
 
// Hide a component using a slide effect
<Clipped.View animation='slideUp' hide>
  <Text>Aloha</Text>
</Clipped.View>
 
// Clip a view to display only the right 50% of the content
<Clipped.View left={0.5}>
  <Text>Hi there</Text>
</Clipped.View>
 
 

Documentation

Clipped.View

The Clipped.View is the top-level interface for most of your clipping needs. It wraps a single child and applies clipping effects or show/hide animations. Under the hood, it uses one or more Fragments to display its content.

Clipping Props

The clipping props can be used to clip one or more sides of the view. E.g. to show only the right 50% of the view, set the left prop to 0.5. These props also accept an Animated.Value, so that it's possible to build larger compound clipping effects or bind it to gestures.

Property	Type	Default	Description
left	number | Animated.Value	0	Clips the left part of the view (0..1)
right	number | Animated.Value	0	Clips the right part of the view (0..1)
top	number | Animated.Value	0	Clips the top part of the view (0..1)
bottom	number | Animated.Value	0	Clips the bottom part of the view (0..1)
debug	boolean		Enables debug mode and displays the underlying clipping layers

Animation Props

The animation props make it possible to easily show or hide contents using a clipping animation. By setting the animation prop, the content will be shown using an animation upon mount, or when changing the animation prop. By setting the hide prop to true, the animation will be reversed and the content will be hidden.

Property	Type	Default	Description
animation	string		Animation (see Animations). When specified causes the content to be shown using this animation, or hidden when hide it set to true.
hide	boolean	false	Set to true to hide the content (reverses the animation)
duration	number	1000	Length of the animation (milliseconds)
delay	number	0	Amount of msec to wait before starting the animation
easing	function		Easing function to define the curve
useNativeDriver	boolean	true	Use the native-driver. All clipping effects naturally support the native-driver, so there is no need to disable this prop.
animValue	Animated.Value		Optional animated value to control the animation. Useful for linking the animation to gestures or making the animation part of a larger compound animation. The value should animate from 0 to 1
onAnimationEnd	function		Callback that is called whenever a show or hide transition has occured

Clipped.Transition

Clipped.Transition shows new content with an animation, when a new child with a different key is provided. This causes the new content to be shown using the new animation, and the old content will be hidden with a reversed animation. Under the hood, transition uses one or more Clipped.View components to perform its animations.

Props

Property	Type	Default	Description
animation	string		Animation (see Animations). When specified causes the content to be shown using this animation, or hidden when hide it set to true.
duration	number	1000	Length of the animation (milliseconds)
delay	number	0	Amount of msec to wait before starting the animation
easing	function		Easing function to define the curve
useNativeDriver	boolean	true	Use the native-driver. All clipping effects naturally support the native-driver, so there is no need to disable this prop.
onTransitionEnd	function		Callback that is called whenever a show or hide transition has occured
debug	boolean		Enables debug mode and displays the underlying clipping layers

Clipped.Fragment

The Clipped.Fragment is the core building block for creating clipping effects. Fragments can be nested to combine multiple clipping effects. See examples for more details.

Props

Property	Type	Description
originalWidth	number	Original width of the content
originalHeight	number	Original height of the content
width	number	Clipped width of the fragment
height	number	Clipped height of the fragment
left	number	X-offset at which the clipped content is displayed
top	number	Y-offset at which the clipped content is displayed
translateX	number | Animated.Value	Translate the content over the x-axis
translateY	number | Animated.Value	Translate the content over the y-axis
move	boolean	When set to true, moves the translated content, rather than keeping it in the same place and clipping it
scaleX	number | Animated.Value	X-scale
scaleY	number | Animated.Value	Y-scale
rotateX	number | Animated.Value	x-rotation
rotateY	number | Animated.Value	Y-rotation
rotateZ	number | Animated.Value	Z-rotation
opacity	number | Animated.Value	Opacity
perspective	number | Animated.Value	Perspective
debug	boolean	Enables debug mode and displays the underlying clipping layers

Animations

The following animations are available out of the box.

Clip	Slide
clipLeft	slideLeft
clipRight	slideRight
clipUp	slideUp
clipDown	slideDown
clipLeftUp	slideLeftUp
clipLeftDown	slideLeftDown
clipRightUp	slideRightUp
clipRightDown	slideRightDown
clipInsideOut	slideInsideOut
clipInsideOutX	slideInsideOutX
clipInsideOutY	slideInsideOutY
clipOutsideIn
clipOutsideInX
clipOutsideInY

The list of animations is also accessible as an array of strings:

import * as Clipped from 'react-native-clipped';
console.log(Clipped.Animations); // ['clipLeft', 'clipRight', ...

License

MIT

Cool?

Do you think this cool and useful? Consider buying me a morning coffee!