Component Creation

/**
 * Creates an animatable version of any React Native component
 * @param WrappedComponent - The React Native component to make animatable
 * @returns Animatable component with animation capabilities
 */
function createAnimatableComponent<P, S>(
  WrappedComponent: ComponentClass<P> | FunctionComponent<P> | ClassicComponentClass<P>
): AnimatableComponent<P, S>;

import * as Animatable from 'react-native-animatable';
import { TouchableOpacity, ScrollView, Modal } from 'react-native';

// Create animatable versions of standard components
const AnimatedButton = Animatable.createAnimatableComponent(TouchableOpacity);
const AnimatedScrollView = Animatable.createAnimatableComponent(ScrollView);
const AnimatedModal = Animatable.createAnimatableComponent(Modal);

// Use them with full animation support
<AnimatedButton 
  animation="pulse" 
  iterationCount="infinite"
  onPress={this.handlePress}
  style={styles.button}
>
  <Text>Animated Button</Text>
</AnimatedButton>

<AnimatedScrollView 
  animation="slideInUp"
  duration={800}
  style={styles.scrollView}
>
  {/* Content */}
</AnimatedScrollView>

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import * as Animatable from 'react-native-animatable';

// Custom component
const Card = ({ title, children, style }) => (
  <View style={[styles.card, style]}>
    <Text style={styles.title}>{title}</Text>
    {children}
  </View>
);

// Make it animatable
const AnimatedCard = Animatable.createAnimatableComponent(Card);

// Use with animations
<AnimatedCard 
  title="Welcome"
  animation="fadeInUp"
  duration={1000}
  delay={200}
  style={{ margin: 10 }}
>
  <Text>This card animates smoothly!</Text>
</AnimatedCard>

const styles = StyleSheet.create({
  card: {
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
});

import * as Animatable from 'react-native-animatable';
import { Button } from 'react-native-elements';
import { Card } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialIcons';

// Make third-party components animatable
const AnimatedButton = Animatable.createAnimatableComponent(Button);
const AnimatedCard = Animatable.createAnimatableComponent(Card);
const AnimatedIcon = Animatable.createAnimatableComponent(Icon);

// Use with full animation support
<AnimatedButton
  title="Tap me"
  animation="pulse"
  iterationCount="infinite"
  buttonStyle={{ backgroundColor: '#007AFF' }}
  onPress={this.handlePress}
/>

<AnimatedCard
  animation="slideInLeft"
  duration={600}
  style={{ margin: 16 }}
>
  <Card.Title title="Animated Card" />
  <Card.Content>
    <Text>This card slides in from the left!</Text>
  </Card.Content>
</AnimatedCard>

<AnimatedIcon
  name="favorite"
  size={30}
  color="red"
  animation="rubberBand"
  iterationCount="infinite"
  iterationDelay={2000}
/>

import React, { forwardRef } from 'react';
import * as Animatable from 'react-native-animatable';

const CustomInput = forwardRef(({ placeholder, onChangeText, style }, ref) => (
  <TextInput
    ref={ref}
    placeholder={placeholder}
    onChangeText={onChangeText}
    style={[styles.input, style]}
  />
));

const AnimatedInput = Animatable.createAnimatableComponent(CustomInput);

// Usage with ref access
class FormComponent extends Component {
  inputRef = React.createRef();
  
  focusInput = () => {
    this.inputRef.current.focus();
    this.inputRef.current.shake(400);
  };
  
  render() {
    return (
      <AnimatedInput
        ref={this.inputRef}
        placeholder="Enter text"
        animation="fadeInUp"
        delay={300}
      />
    );
  }
}

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

// Create HOC for common animation patterns
const withFadeIn = (Component, duration = 1000) => {
  const AnimatedComponent = Animatable.createAnimatableComponent(Component);
  
  return (props) => (
    <AnimatedComponent
      animation="fadeIn"
      duration={duration}
      {...props}
    />
  );
};

// Usage
const FadeInView = withFadeIn(View);
const FadeInText = withFadeIn(Text, 1500);

<FadeInView style={{ padding: 20 }}>
  <FadeInText>This text fades in slower</FadeInText>
</FadeInView>

interface AnimatableComponent<P extends {}, S extends {}> 
  extends NativeMethods, Component, ClassicComponentClass<AnimatableProps<S> & P> {
  
  animate(animation: Animation | CustomAnimation, duration?: number, iterationDelay?: number): Promise<{ finished: boolean }>;
  stopAnimation(): void;
  transition<T extends S>(fromValues: T, toValues: T, duration?: number, easing?: Easing): void;
  transitionTo<T extends S>(toValues: T, duration?: number, easing?: Easing): void;
  setNativeProps(nativeProps: object): void;
  
  // All built-in animations as methods
  [K in Animation]: (duration?: number) => Promise<{ finished: boolean }>;
}