react-native-clipped v0.3.1

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.

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.

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

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

Animations

The following animations are available out of the box.

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!