React Native Interactions

React Native InteractionManager helpers.

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