Built-in Animations

type AttentionSeekerAnimations = 
  | 'bounce'      // Bouncing effect animation
  | 'flash'       // Flashing opacity animation  
  | 'jello'       // Jello-like skew animation
  | 'pulse'       // Pulsing scale animation
  | 'rotate'      // Full 360-degree rotation
  | 'rubberBand'  // Rubber band stretch effect
  | 'shake'       // Horizontal shaking motion
  | 'swing'       // Pendulum swing rotation
  | 'tada'        // Celebration-style scale and rotation
  | 'wobble';     // Wobbling translation and rotation

// Continuous pulse for heart icon
<Animatable.Text 
  animation="pulse" 
  easing="ease-out" 
  iterationCount="infinite" 
  style={{ textAlign: 'center' }}
>
  ❤️
</Animatable.Text>

// Shake on error
<Animatable.View animation="shake" duration={500}>
  <Text style={{ color: 'red' }}>Invalid input!</Text>
</Animatable.View>

// Celebrate success
<Animatable.View animation="tada" duration={1000}>
  <Text>🎉 Success!</Text>
</Animatable.View>

type BouncingEntranceAnimations = 
  | 'bounceIn'      // Bounce in from scale
  | 'bounceInDown'  // Bounce in from top
  | 'bounceInUp'    // Bounce in from bottom
  | 'bounceInLeft'  // Bounce in from left
  | 'bounceInRight'; // Bounce in from right

type BouncingExitAnimations = 
  | 'bounceOut'      // Bounce out with scale
  | 'bounceOutDown'  // Bounce out to bottom
  | 'bounceOutUp'    // Bounce out to top
  | 'bounceOutLeft'  // Bounce out to left
  | 'bounceOutRight'; // Bounce out to right

type FadingEntranceAnimations = 
  | 'fadeIn'         // Simple fade in
  | 'fadeInDown'     // Fade in from top with translation
  | 'fadeInUp'       // Fade in from bottom with translation
  | 'fadeInLeft'     // Fade in from left with translation
  | 'fadeInRight'    // Fade in from right with translation
  | 'fadeInDownBig'  // Fade in from far top
  | 'fadeInUpBig'    // Fade in from far bottom
  | 'fadeInLeftBig'  // Fade in from far left
  | 'fadeInRightBig'; // Fade in from far right

// Simple fade in for modal
<Animatable.View animation="fadeIn" duration={300}>
  <Modal>
    <Text>Modal content</Text>
  </Modal>
</Animatable.View>

// Staggered list item entrances
{items.map((item, index) => (
  <Animatable.View 
    key={item.id}
    animation="fadeInUp"
    delay={index * 100}
    duration={600}
  >
    <ListItem data={item} />
  </Animatable.View>
))}

type FadingExitAnimations = 
  | 'fadeOut'         // Simple fade out
  | 'fadeOutDown'     // Fade out to bottom with translation
  | 'fadeOutUp'       // Fade out to top with translation
  | 'fadeOutLeft'     // Fade out to left with translation
  | 'fadeOutRight'    // Fade out to right with translation
  | 'fadeOutDownBig'  // Fade out to far bottom
  | 'fadeOutUpBig'    // Fade out to far top
  | 'fadeOutLeftBig'  // Fade out to far left
  | 'fadeOutRightBig'; // Fade out to far right

type FlipperAnimations = 
  | 'flipInX'   // Flip in around X axis
  | 'flipInY'   // Flip in around Y axis
  | 'flipOutX'  // Flip out around X axis
  | 'flipOutY'; // Flip out around Y axis

// Card flip animation
<Animatable.View 
  animation={this.state.showBack ? "flipInY" : "flipOutY"}
  duration={600}
  style={styles.card}
>
  {this.state.showBack ? <BackContent /> : <FrontContent />}
</Animatable.View>

type LightspeedAnimations = 
  | 'lightSpeedIn'  // Light speed entrance with skew
  | 'lightSpeedOut'; // Light speed exit with skew

type SlidingEntranceAnimations = 
  | 'slideInDown'  // Slide in from top
  | 'slideInUp'    // Slide in from bottom
  | 'slideInLeft'  // Slide in from left
  | 'slideInRight'; // Slide in from right

type SlidingExitAnimations = 
  | 'slideOutDown'  // Slide out to bottom
  | 'slideOutUp'    // Slide out to top
  | 'slideOutLeft'  // Slide out to left
  | 'slideOutRight'; // Slide out to right

// Drawer animation
<Animatable.View 
  animation={this.state.drawerOpen ? "slideInLeft" : "slideOutLeft"}
  duration={300}
  style={styles.drawer}
>
  <DrawerContent />
</Animatable.View>

// Page transitions
<Animatable.View 
  animation="slideInRight" 
  duration={400}
  style={styles.page}
>
  <PageContent />
</Animatable.View>

type ZoomingEntranceAnimations = 
  | 'zoomIn'      // Zoom in from scale
  | 'zoomInDown'  // Zoom in from top
  | 'zoomInUp'    // Zoom in from bottom
  | 'zoomInLeft'  // Zoom in from left
  | 'zoomInRight'; // Zoom in from right

type ZoomingExitAnimations = 
  | 'zoomOut'      // Zoom out to scale
  | 'zoomOutDown'  // Zoom out to bottom
  | 'zoomOutUp'    // Zoom out to top
  | 'zoomOutLeft'  // Zoom out to left
  | 'zoomOutRight'; // Zoom out to right

// Button press feedback
<Animatable.TouchableOpacity 
  animation="zoomIn" 
  duration={150}
  onPress={this.handlePress}
>
  <Text>Press me!</Text>
</Animatable.TouchableOpacity>

// Image gallery entrance
<Animatable.Image 
  source={{ uri: imageUrl }}
  animation="zoomInUp"
  duration={800}
  style={styles.galleryImage}
/>

type Animation = 
  | AttentionSeekerAnimations
  | BouncingEntranceAnimations 
  | BouncingExitAnimations
  | FadingEntranceAnimations
  | FadingExitAnimations
  | FlipperAnimations
  | LightspeedAnimations
  | SlidingEntranceAnimations
  | SlidingExitAnimations
  | ZoomingEntranceAnimations
  | ZoomingExitAnimations;

// Stagger multiple elements
const items = ['item1', 'item2', 'item3'];

{items.map((item, index) => (
  <Animatable.View
    key={item}
    animation="fadeInUp"
    delay={index * 150}
    duration={600}
  >
    <Text>{item}</Text>
  </Animatable.View>
))}

// Screen transition
<Animatable.View 
  animation={this.state.entering ? "slideInRight" : "slideOutLeft"}
  duration={300}
  style={{ flex: 1 }}
>
  <ScreenContent />
</Animatable.View>

// Loading indicator
<Animatable.View 
  animation="pulse" 
  iterationCount="infinite"
  easing="ease-in-out"
>
  <ActivityIndicator size="large" />
</Animatable.View>

// Shake on validation error
{this.state.hasError && (
  <Animatable.View animation="shake" duration={500}>
    <Text style={styles.error}>Please fix the errors above</Text>
  </Animatable.View>
)}