Skip to content

Instantly share code, notes, and snippets.

@luyx2412
Forked from iremlopsum/WaitForUI.js
Created June 14, 2019 03:47
Show Gist options
  • Save luyx2412/1466368ee9fcaa81889149d35158e449 to your computer and use it in GitHub Desktop.
Save luyx2412/1466368ee9fcaa81889149d35158e449 to your computer and use it in GitHub Desktop.
InteractionManager example
import React, { PureComponent } from 'react';
import { InteractionManager } from 'react-native';
class WaitForUI extends PureComponent {
constructor(props) {
super(props);
this.state = {
interactionsComplete: false,
};
}
componentDidMount() {
this.interactionHandle = InteractionManager.runAfterInteractions(() => {
this.setState({ interactionsComplete: true });
this.interactionHandle = null;
});
}
componentWillReceiveProps(nextProps) {
if (nextProps.waitIndex !== this.props.waitIndex) this.handleInteractionManager();
}
componentWillUnmount() {
if (this.interactionHandle) this.interactionHandle.cancel();
}
componentDidUpdate(prevProps, prevState) {
const { onRendered } = this.props;
if (this.state.interactionsComplete && !prevState.interactionsComplete && onRendered) {
onRendered();
}
}
handleInteractionManager() {
if (this.interactionHandle) this.interactionHandle.cancel();
this.setState({ interactionsComplete: false });
this.interactionHandle = InteractionManager.runAfterInteractions(() => {
this.setState({ interactionsComplete: true });
this.interactionHandle = null;
});
}
renderLoader() {
const { loader } = this.props;
if (loader) return loader;
return null
}
render() {
const { interactionsComplete } = this.state;
const { children } = this.props;
if (interactionsComplete && children) return children;
if (!interactionsComplete) return this.renderLoader();
return null;
}
}
export default WaitForUI;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment