Pre-built Components

/**
 * Animatable View component with full animation support
 * Inherits all ViewProps from React Native plus animation props
 */
const View: AnimatableComponent<ViewProps, ViewStyle>;

import * as Animatable from 'react-native-animatable';

// Basic animated view
<Animatable.View animation="fadeIn" duration={1000}>
  <Text>I will fade in</Text>
</Animatable.View>

// View with complex animation configuration
<Animatable.View 
  animation="slideInDown" 
  duration={800}
  delay={200}
  easing="ease-out"
  iterationCount={2}
  direction="alternate"
>
  <Text>I will slide and bounce</Text>
</Animatable.View>

// Transition on style changes
<Animatable.View 
  transition="backgroundColor" 
  style={{ backgroundColor: this.state.bgColor }}
>
  <Text>My background animates</Text>
</Animatable.View>

/**
 * Animatable Text component with full animation support
 * Inherits all TextProps from React Native plus animation props
 */
const Text: AnimatableComponent<TextProps, TextStyle>;

import * as Animatable from 'react-native-animatable';

// Animated text with attention seeker
<Animatable.Text animation="pulse" iterationCount="infinite">
  ❤️
</Animatable.Text>

// Text with entrance animation
<Animatable.Text 
  animation="bounceInUp" 
  duration={1200}
  style={{ fontSize: 24, textAlign: 'center' }}
>
  Welcome!
</Animatable.Text>

// Looping text animation
<Animatable.Text 
  animation="slideInDown" 
  iterationCount={5} 
  direction="alternate"
>
  Up and down you go
</Animatable.Text>

/**
 * Animatable Image component with full animation support
 * Inherits all ImageProps from React Native plus animation props
 */
const Image: AnimatableComponent<ImageProps, ImageStyle>;

import * as Animatable from 'react-native-animatable';

// Animated image entrance
<Animatable.Image 
  source={{ uri: 'https://example.com/image.jpg' }}
  animation="zoomIn"
  duration={1000}
  style={{ width: 200, height: 200 }}
/>

// Image with flip animation
<Animatable.Image 
  source={require('./logo.png')}
  animation="flipInY"
  delay={500}
  style={{ width: 100, height: 100 }}
/>

// Image with transition effects
<Animatable.Image 
  source={{ uri: this.state.imageUrl }}
  transition={['opacity', 'scale']}
  style={{ 
    opacity: this.state.visible ? 1 : 0,
    transform: [{ scale: this.state.scale }]
  }}
/>

interface AnimatableProps {
  /** Name of the animation or custom animation object */
  animation?: Animation | string | CustomAnimation;
  /** Animation duration in milliseconds (default: 1000) */
  duration?: number;
  /** Animation delay in milliseconds (default: 0) */
  delay?: number;
  /** Animation direction (default: 'normal') */
  direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
  /** Easing function (default: 'ease') */
  easing?: Easing;
  /** Number of iterations or 'infinite' (default: 1) */
  iterationCount?: number | 'infinite';
  /** Delay between iterations in milliseconds (default: 0) */
  iterationDelay?: number;
  /** Style properties to transition on change */
  transition?: string | string[];
  /** Use native animation driver (default: false) */
  useNativeDriver?: boolean;
  /** Create interaction handle (default: false for finite animations) */
  isInteraction?: boolean;
  /** Called when animation begins */
  onAnimationBegin?: () => void;
  /** Called when animation ends */
  onAnimationEnd?: (endState: { finished: boolean }) => void;
  /** Called when transition begins */
  onTransitionBegin?: (property: string) => void;
  /** Called when transition ends */
  onTransitionEnd?: (property: string) => void;
}

interface AnimatableComponentMethods {
  /** Execute an animation imperatively */
  animate(animation: Animation | CustomAnimation, duration?: number, iterationDelay?: number): Promise<{ finished: boolean }>;
  /** Stop any running animation */
  stopAnimation(): void;
  /** Transition between specific style values */
  transition(fromValues: object, toValues: object, duration?: number, easing?: Easing): void;
  /** Transition to specific style values from current state */
  transitionTo(toValues: object, duration?: number, easing?: Easing): void;
  /** All built-in animations available as methods */
  [K in Animation]: (duration?: number) => Promise<{ finished: boolean }>;
}

class AnimatedComponent extends Component {
  handleViewRef = ref => this.view = ref;
  
  animateView = () => {
    // Use specific animation method
    this.view.bounce(800).then(endState => {
      console.log('Bounce finished:', endState.finished);
    });
    
    // Or use generic animate method
    this.view.animate('pulse', 1000);
    
    // Transition to new values
    this.view.transitionTo({ opacity: 0.5, scale: 1.2 }, 500);
  };
  
  render() {
    return (
      <Animatable.View ref={this.handleViewRef}>
        <Text>Tap me to animate</Text>
      </Animatable.View>
    );
  }
}