npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nfq/react-native-transition

v1.1.8

Published

A view transition library for react-native

Downloads

2

Readme

react-native-transition

A fully customizable view transition library for react-native. The library could be used to transition entire screens or small parts within a View.

The library has been designed to use customizable transition styles, that could be easily created and plugged into the application. Checkout the Custom Transitions section to learn more about creating transitions.

Check out a demo application available at Transition Demo.
Demo Animation

Caution

The react-native library below 0.43 throws onLayout event on Android for every change in the child UI elements (even when changes are made through setNativeProps) even when the parent's layout is unaffected. This problem is specially observable while using drag & drop libraries, wherein this even is called a lot, affecting the performance. So use caution while using this library on React Native versions below 0.43.

Installation

$ npm install --save react-native-transition

Usage

  1. Import createTransition and transition styles from the library
    import { createTransition, FlipX } from 'react-native-transition';

  2. Create a transition component with optional styles
    const Transition = createTransition(FlipX);

  3. Render the initial view within the Transition component
    <Transition> <View>...<View> </Transition>

  4. Use the show method from component to perform transition
    onPress = (e) => { Transition.show(<View> ... </View>); }

Example

import React, { Component } from 'react';
import { View, Text } from 'react-native';

import { createTransition, FlipX } from 'react-native-transition';

const Transition = createTransition(FlipX);

class YourView extends Component {
  this.switch = () => {
    Transition.show(
      <View style={{ flex: 1, alignItems: 'center' }}>
        <Text>This is another view</Text>
      </View>
    );
  }

  render() {
    return (
      <Transition>
        <View style={{ flex: 1, alignItems: 'center' }}>
          <Text>This the initial View</Text>
          <Button title="Press to Switch" onPress={this.switch} />
        </View>
      </Transition>
    );
  }
}

For a more complete example, checkout Demo.js and Window.js from react-native-transition-demo.

createTransition([style], [animation])

Creates a Transition component used for providing transitionable view.

Arguments

  1. style (object): A transition style definition object. Stock transition styles - Fade, FlipX, FlipY, SlideLeft, SlideRight, SlideUp, SlideDown are available with the libraries. By default Fade transition is used.

  2. animation (function): Animation used for performing the transition. It could be one of the Animated.timing, Animated.spring or Animated.decay provided by react-native animation library.

Transition component

The Transition component should have one and only one element as a child. This child element is rendered before any transition takes place. Once the transition has occured, this initial child would not be mounted.

Methods

show(element, [style], [animation]) The show method triggers the transition with the provided element appearing through transition.

This method is available both as static as well as instance method of the component. In most of the cases, the static method could be used, while for some advanced use cases where the Transition component is placed on inner views and are being transitioned on automatic intervals, instance method could be used for a much individual instance access through refs.

getBounds() Retreive the bounding size of the Transition componet. It returns an object with { width, height }. The bounding size is not available until the component has been attached.

Arguments

element (Element): The element that needs to be rendered via transition.
style (object): Override the transition style for this specific transition.
animation (function): Override the transition animation for this specific transition.

Returns A unique id that represents the transition of this particular element which could be used to track the completion of the transition.

Note: In case an element is added faster than being transitioned in. The visual transition will be skipped for the intermediate elements. The onTransitioned callback however will be called for all the elements even those skipped in the order that they were supposed to be shown

Props

onTransitioned: A function which is called for every item that has been shown with the transition. The function is called with the uniqueId returned by show method.

onLayout: A function which is called when the transition layout is available with the bounds. Every time the layout changes, this method is invoked.

Any other props passed to the Transition component is passed as config parameter to the animation function. If you are using a Animated.timing animation, you could pass duration or easing props and so on.

Custom Transitions

The transition library comes with stock transitions which are limited, but can be easily extended by creating your own custom transitions. However, you must have knowledge of how animation works in react-native.

A transition object should have two properties - out and in. The out property creates the style required for the view that is transitioning out and the in property creates the same for the incoming view. Both the in and out properties should be function call that returns a new style object for the respective container view. The function has following parameters:

value (Animated.Value)
An animated value that runs from 0 to 1 during the transition. The various style attributes take interpolated values from this value. Go through the react-native Animation docs for details on using interpolation.

bounds ({ width, height })
Some animation styles need to know the size of the view being transitioned.

props The props that was passed to the Transition component.

Supporting Native Transitions

Since react native v0.40+, the native animation support has been provided. The transitions can now define, useNativeDriver property with boolean true to support native animation. Take caution, as all styles are not supported for native animation. Only opacity, backgroundColor and transform properties are supported for now. If the useNativeDriver is enabled on transition styles that changes any other properties, an exception would be thrown. Fade, FlipX, FlipY are the stock styles that now support native animations.

Example transition - Slide

const Slide = {
  out: (value, bounds) => ({
    left: value.interpolate({
      inputValue: [0, 1],
      outputValue: [0, -bounds.width],
    }),
    width: bounds.width,
  }),
  in: (value, bounds) => ({
    left: value.interpolate({
      inputValue: [0, 1],
      outputValue: [bounds.width, 0],
    }),
    width: bounds.width,
  }),
};

Example transition - Brooom

const Brooom = {
  out: (value, bounds) => ({
    left: value.interpolate({
      inputRange: [0, 1],
      outputRange: [0, -bounds.width],
    }),
    width: bounds.width,
    transform: [{
      skewX: value.interpolate({
        inputRange: [0, 0.1, 0.9, 1],
        outputRange: ["0deg", "-20deg", "-20deg", "0deg"],
      }),
    }],
  }),
  in: (value, bounds) => ({
    left: value.interpolate({
      inputRange: [0, 1],
      outputRange: [bounds.width, 0],
    }),
    width: bounds.width,
    transform: [{
      skewX: value.interpolate({
        inputRange: [0, 0.1, 0.9, 1],
        outputRange: ["0deg", "-20deg", "-20deg", "0deg"],
      }),
    }],
  }),
};