[React Recipes]

DoubleTap.js

import React from 'react';
import { TouchableWithoutFeedback } from 'react-native';

export default class DoubleTap extends React.Component {
  static defaultProps = {
    delay: 300,
    onDoubleTap: () => null,
  };

  lastTap = null;

  // https://gist.github.com/brunotavares/3c9a373ba5cd1b4ff28b
  handleDoubleTap = () => {
    const now = Date.now();
    if (this.lastTap && (now - this.lastTap) < this.props.delay) {
      this.props.onDoubleTap();
    } else {
      this.lastTap = now;
    }
  }

  render() {
    return (
      <TouchableWithoutFeedback onPress={this.handleDoubleTap}>
        {this.props.children}
      </TouchableWithoutFeedback>
    );
  }
}

doubletap.js

export default class App extends React.Component {
	lastTap = null;
	handleDoubleTap = () => {
		const now = Date.now();
		const DOUBLE_PRESS_DELAY = 300;
	  	if (this.lastTap && (now - this.lastTap) < DOUBLE_PRESS_DELAY) {
		    this.toggleLike();
	  	} else {
		    this.lastTap = now;
	  	}
	}

	render() {
		return (
		    <TouchableWithoutFeedback onPress={this.handleDoubleTap}>
              <Image 
                  source={{ uri: 'https://images.pexels.com/photos/671557/pexels-photo-671557.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=${w.width}' }}
                  style={{ width: w.width, height: w.width }}
                  resizeMode="cover"
              />
    		</TouchableWithoutFeedback>
  		);
	}
}

signalRIndex.ts

import React from 'react';
import logo from './logo.svg';
import './App.css';
import * as signalR from '@aspnet/signalr';

class App extends React.Component {
    connection: signalR.HubConnection;
    /**
     *
     */
    constructor(props: any) {
        super(props);
        this.connection = new signalR.HubConnectionBuilder()
            .withUrl("https://localhost:5001/hubs/repoSyncJobUpdates")
            .configureLogging(signalR.LogLevel.Information)
            .build();
        this.connection.start().then(() => {
            console.log("connected")
        }).catch((reason) => {
            console.log(reason);
        })
        this.connection.on("PushUpdate", (itemStatus: {}, jobStatus: string) => {
            console.log(itemStatus, jobStatus);
        })
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <p>
                        Edit <code>src/App.tsx</code> and save to reload.
        </p>
                    <a
                        className="App-link"
                        href="https://reactjs.org"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Learn React
        </a>
                </header>
            </div>
        );
    }
}

export default App;