content: /**
   * Copyright (c) 2013-present, Facebook, Inc.
   * All rights reserved.
   *
   * This source code is licensed under the BSD-style license found in the
   * LICENSE file in the root directory of this source tree. An additional grant
   * of patent rights can be found in the PATENTS file in the same directory.
   *
   * The examples provided by Facebook are for non-commercial testing and
   * evaluation purposes only.
   *
   * Facebook reserves all rights not expressly granted.
   *
   * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
   * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
   * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
   * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
   * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   *
   * @flow
   */
  'use strict';
  
  import React, { Component } from 'react';
  import { ActivityIndicator, StyleSheet, View } from 'react-native';
  
  /**
   * Optional Flowtype state and timer types definition
   */
  type State = { animating: boolean; };
  type Timer = number;
  
  class ToggleAnimatingActivityIndicator extends Component {
    /**
     * Optional Flowtype state and timer types
     */
    state: State;
    _timer: Timer;
  
    constructor(props) {
      super(props);
      this.state = {
        animating: true,
      };
    }
  
    componentDidMount() {
      this.setToggleTimeout();
    }
  
    componentWillUnmount() {
      clearTimeout(this._timer);
    }
  
    setToggleTimeout() {
      this._timer = setTimeout(() => {
        this.setState({animating: !this.state.animating});
        this.setToggleTimeout();
      }, 2000);
    }
  
    render() {
      return (
        <ActivityIndicator
          animating={this.state.animating}
          style={[styles.centering, {height: 80}]}
          size="large"
        />
      );
    }
  }
  
  
  
  exports.displayName = (undefined: ?string);
  exports.framework = 'React';
  exports.title = '<ActivityIndicator>';
  exports.description = 'Animated loading indicators.';
  
  exports.examples = [
    {
      title: 'Default (small, white)',
      render() {
        return (
          <ActivityIndicator
            style={[styles.centering, styles.gray]}
            color="white"
          />
        );
      }
    },
    {
      title: 'Gray',
      render() {
        return (
          <View>
            <ActivityIndicator
              style={[styles.centering]}
            />
            <ActivityIndicator
              style={[styles.centering, {backgroundColor: '#eeeeee'}]}
            />
          </View>
        );
      }
    },
    {
      title: 'Custom colors',
      render() {
        return (
          <View style={styles.horizontal}>
            <ActivityIndicator color="#0000ff" />
            <ActivityIndicator color="#aa00aa" />
            <ActivityIndicator color="#aa3300" />
            <ActivityIndicator color="#00aa00" />
          </View>
        );
      }
    },
    {
      title: 'Large',
      render() {
        return (
          <ActivityIndicator
            style={[styles.centering, styles.gray]}
            size="large"
            color="white"
          />
        );
      }
    },
    {
      title: 'Large, custom colors',
      render() {
        return (
          <View style={styles.horizontal}>
            <ActivityIndicator
              size="large"
              color="#0000ff"
            />
            <ActivityIndicator
              size="large"
              color="#aa00aa"
            />
            <ActivityIndicator
              size="large"
              color="#aa3300"
            />
            <ActivityIndicator
              size="large"
              color="#00aa00"
            />
          </View>
        );
      }
    },
    {
      title: 'Start/stop',
      render() {
        return <ToggleAnimatingActivityIndicator />;
      }
    },
    {
      title: 'Custom size',
      render() {
        return (
          <ActivityIndicator
            style={[styles.centering, {transform: [{scale: 1.5}]}]}
            size="large"
          />
        );
      }
    },
    {
      platform: 'android',
      title: 'Custom size (size: 75)',
      render() {
        return (
          <ActivityIndicator
            style={styles.centering}
            size={75}
          />
        );
      }
    },
  ];
  
  
  const styles = StyleSheet.create({
    centering: {
      alignItems: 'center',
      justifyContent: 'center',
      padding: 8,
    },
    gray: {
      backgroundColor: '#cccccc',
    },
    horizontal: {
      flexDirection: 'row',
      justifyContent: 'space-around',
      padding: 8,
    },
  });
  