DoubleTapTabBar.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TabBarIOS
} from 'react-native';

const DOUBLE_TAP_THRESHOLD = 300;

export default class TabBarDoubleTap extends Component {
  state = { didDoubleTap: false }

  tapTimeout = null

  clearTapTimeout = () => {
    clearTimeout(this.tapTimeout);
    this.tapTimeout = null;
  }

  tap = () => {
    if (this.tapTimeout !== null) {
      this.clearTapTimeout()
      this.setState({ didDoubleTap: true });
    } else {
      this.tapTimeout = setTimeout(this.clearTapTimeout, DOUBLE_TAP_THRESHOLD);
    }
  }

  render() {
    const { didDoubleTap } = this.state;

    return (
      <TabBarIOS style={styles.container}>
        <TabBarIOS.Item
          systemIcon="history"
          title="Test"
          onPress={this.tap}
          selected
        >
          <View style={styles.container}>
            <Text style={styles.message}>
              You {didDoubleTap ? 'DID' : 'did not'} double tap
            </Text>
          </View>
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  message: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('TabBarDoubleTap', () => TabBarDoubleTap);