import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, Animated } from 'react-native';

const MyAnimatedComponent = () => {
  const fadeAnim = new Animated.Value(0);

  const fadeIn = () => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animated.View
        style={{
          opacity: fadeAnim,
        }}>
        <Text>Hello, Animated!</Text>
      </Animated.View>

      <TouchableOpacity onPress={fadeIn}>
        <Text>Fade In</Text>
      </TouchableOpacity>
    </View>
  );
};

export default MyAnimatedComponent;

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, LayoutAnimation } from 'react-native';

const MyLayoutAnimatedComponent = () => {
  const [expanded, setExpanded] = useState(false);

  const toggleExpand = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setExpanded(!expanded);
  };

  return (
    <View style={{ padding: 16 }}>
      <TouchableOpacity onPress={toggleExpand}>
        <Text>Toggle Expand</Text>
      </TouchableOpacity>

      {expanded && (
        <View style={{ height: 100, backgroundColor: 'lightblue', marginTop: 16 }}>
          <Text>Expanded Content</Text>
        </View>
      )}
    </View>
  );
};

export default MyLayoutAnimatedComponent;