react-native-clipped

    0.3.1 • Public • Published

    react-native-clipped

    Work in progress - Go away

    Clipping effects and animations for react-native 🍠🥒🍕

    Try it with Expo

    MagicMoveGif

    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!
    Buy Me A Coffee

    Install

    npm i react-native-clipped

    DownloadsWeekly Downloads

    37

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    76.3 kB

    Total Files

    13

    Last publish

    Collaborators

    • ijzerenhein