text: import React from 'react';
  import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
  import {
    VerticalMotionExample,
    FadeOutExample,
    FadeInExample,
    PositiveScaleExample,
    NegativeScaleExample,
    IncreasingSizeExample,
    DecreasingSizeExample,
    RotateExample,
    RotateXExample,
    RotateYExample,
    ChangeColorExample,
    SpringVerticalMotionExample,
    LoopRotateExample,
    EasingBounceExample,
    SequenceExample,
    ParallelExample,
    DelayExample,
    StaggerExample,
    DecayExample
  } from './examples';
  
  const examples = {
    verticalMotion: {
      title: 'Vertical motion example',
      component: VerticalMotionExample
    },
    fadeOut: {
      title: 'Fade out example',
      component: FadeOutExample
    },
    fadeIn: {
      title: 'Fade in example',
      component: FadeInExample
    },
    positiveScale: {
      title: 'Positive scale example',
      component: PositiveScaleExample
    },
    negativeScale: {
      title: 'Negative scale example',
      component: NegativeScaleExample
    },
    increasingSize: {
      title: 'Increasing size example',
      component: IncreasingSizeExample
    },
    decreasingSize: {
      title: 'Decreasing size example',
      component: DecreasingSizeExample
    },
    rotate: {
      title: 'Rotate example',
      component: RotateExample
    },
    rotateX: {
      title: 'RotateX example',
      component: RotateXExample
    },
    rotateY: {
      title: 'RotateY example',
      component: RotateYExample
    },
    changeColor: {
      title: 'Change color example',
      component: ChangeColorExample
    },
    spring: {
      title: 'Spring example',
      component: SpringVerticalMotionExample
    },
    loop: {
      title: 'Loop example',
      component: LoopRotateExample
    },
    easingBounce: {
      title: 'Easing bounce example',
      component: EasingBounceExample
    },
    decay: {
      title: 'Decay example',
      component: DecayExample
    },
    sequence: {
      title: 'Sequence example',
      component: SequenceExample
    },
    parallel: {
      title: 'Parallel example',
      component: ParallelExample
    },
    delay: {
      title: 'Delay example',
      component: DelayExample
    },
    stagger: {
      title: 'Stagger example',
      component: StaggerExample
    }
  }
  
  export default class App extends React.Component {
    state = {
      currentExample: 'decay' // Change to see an example
    }
  
    render() {
      const { title, component } = examples[this.state.currentExample];
  
      return (
        <View style={styles.container}>
          <View style={styles.header}>
            <Text style={styles.headerText}>{title}</Text>
          </View>
  
          { React.createElement(component) }
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    header: {
      height: 60,
      width: '100%',
      justifyContent: 'center',
      alignItems: 'center',
      padding: 15,
      position: 'absolute',
      top: '5%'
    },
    headerText: {
      fontSize: 20,
      fontWeight: '600'
    }
  });
  