expo-triple-touch-reload/index.js

Add triple touch reload to Expo apps, with the deprecation of two finger reload

import React from "react";

import {Text, SafeAreaView, StyleSheet, View} from "react-native";

import propTypes from "prop-types";


import {reloadAsync} from "expo-updates";


class ExpoTripleTouchReload extends React.Component {
	static VIEW_TYPES = {
		VIEW: 0,
		SAFE_AREA_VIEW: 1,
	}
	
	static defaultProps = {
		numTouches: 3,
		viewType: ExpoTripleTouchReload.VIEW_TYPES.SAFE_AREA_VIEW
	}
	
	static propTypes = {
	
	}
	
	onStartShouldSetResponderCapture = ({nativeEvent}) => {
		if (nativeEvent.touches.length === this.props.numTouches) {
			return true;
		}
		return false;
	}
	
	onResponderRelease = () => {
		reloadAsync();
	}
	
	
	render() {
		const {children, style, viewType, ...rest} = this.props;
		
		let Comp = SafeAreaView;
		
		if(viewType === ExpoTripleTouchReload.VIEW_TYPES.VIEW) {
			Comp = View;
		}
		return (
			<Comp style={[styles.container, style]}
			      onStartShouldSetResponderCapture={this.onStartShouldSetResponderCapture}
			      onResponderRelease={this.onResponderRelease}
			      {...rest}
			>
				{children}
			</Comp>
		)
	}
}
ExpoTripleTouchReload.propTypes = {
	numTouches: propTypes.number,
	viewType: propTypes.oneOf([0, 1])
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
	}
})


export default ExpoTripleTouchReload;