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() {
}
}
or:
@renderAfterInteractions({placeholder: <CheapPlaceholder/>})
class ExpensiveComponent extends Component {
}
or:
class ExpensiveComponent extends Component {
}
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