react-native-interactions

0.4.0 • Public • Published

React Native Interactions NPM version

React Native InteractionManager helpers.

Demo

import {AfterInteractions} from 'react-native-interactions';
 
function MyComponent() {
  return (
    <AfterInteractions>
      <ExpensiveComponent/>
    </AfterInteractions>
  );
}

Installation

npm i --save react-native-interactions

Usage

AfterInteractions

A component that only renders children after InteractionManager.runAfterInteractions(). Wrap top-level Navigator scenes with this component to improve animation perfomance.

import {AfterInteractions} from 'react-native-interactions';
 
function MyScene() {
  return (
    <AfterInteractions placeholder={<CheapPlaceholder/>}>
      <ExpensiveComponent/>
    </AfterInteractions>
  );
}

Props:

prop type default description
placeholder react element null (optional) prerendered placeholder content
renderPlaceholder function null (optional) placeholder renderer

renderAfterInteractions

Same as AfterInteractions component, but in the form of a decorator.

import {renderAfterInteractions} from 'react-native-interactions';
 
@renderAfterInteractions
class ExpensiveComponent extends Component {
 
  static placeholder = <CheapPlaceholder/>;
 
  render() {
    // expensive stuff
  }
}

or:

@renderAfterInteractions({placeholder: <CheapPlaceholder/>})
class ExpensiveComponent extends Component {
  // expensive stuff
}

or:

class ExpensiveComponent extends Component {
  // expensive stuff
}
 
export default renderAfterInteractions(ExpensiveComponent);

Options:

option type default description
hoistStatics boolean true (optional) copy non-react static props to composed component
placeholder react element null (optional) prerendered placeholder content
renderPlaceholder function null (optional) placeholder renderer

License

MIT

Package Sidebar

Install

npm i react-native-interactions

Weekly Downloads

236

Version

0.4.0

License

MIT

Last publish

Collaborators

  • jshanson7