Why the all renderitem doesn't animate,,only one item aniamtes

[kaneki666]

Reaniamted 2

import {
  Dimensions,
  FlatList,
  Image,
  ImageBackground,
  Pressable,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import Animated, {
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import {colors} from '../../utils';
import {getIslamicEvents_API} from '../../utils/Api';

const {width, height} = Dimensions.get('window');
const AnimatedBackground = Animated.createAnimatedComponent(ImageBackground);
const IslamicEvents = ({navigation}) => {
  const [events, setEvents] = useState('');
  const mounted = useRef(false);
  const scale = useSharedValue(0);
  const opacity = useSharedValue(0);
  useEffect(() => {
    scale.value = 1;
    mounted.current = true;
    getIslamicEvents_API()
      .then(res => {
        setEvents(res.detail);
        opacity.value = 1;
      })
      .catch(err => err);
    return () => {
      mounted.current = false;
    };
  }, []);
  const scaleAnimation = useAnimatedStyle(() => {
    return {
      transform: [
        {
          scale: withTiming(scale.value, {
            duration: 400,
            easing: Easing.bezier(0.25, 0.1, 0.25, 1),
          }),
        },
      ],
    };
  });
  const opacityAnimation = useAnimatedStyle(() => {
    return {
      transform: [
        {
          scale: withTiming(opacity.value, {
            duration: 400,
            easing: Easing.bezier(0.25, 0.1, 0.25, 1),
          }),
        },
      ],
    };
  });
  const RenderItem = ({item}) => (
    <Pressable onPress={() => navigation.navigate('Player', {item})}>
      <AnimatedBackground
        style={[styles.itemImage, opacityAnimation]}
        source={require('../../assets/islamic_events/islamic_event_buttonxxxhdpi.png')}>
        <Text style={styles.itemTopic}>{item.topic}</Text>
      </AnimatedBackground>
    </Pressable>
  );
  return (
    <ImageBackground
      style={styles.container}
      source={require('../../assets/islamic_events/bg.png')}>
      <View style={styles.containerTop}>
        <View style={{top: 70}}>
          <Animated.Image
            style={[styles.imageTop, scaleAnimation]}
            source={require('../../assets/islamic_events/ramadan_bannerxxxhdpi.png')}
          />
        </View>
      </View>
      <View style={styles.containerBottom}>
        <FlatList
          contentContainerStyle={{
            justifyContent: 'center',
            alignItems: 'center',
          }}
          data={events}
          keyExtractor={item => `${item.id}`}
          renderItem={RenderItem}
        />
      </View>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  container: {
    width,
    height,
  },
  containerTop: {
    flex: 0.4,
    justifyContent: 'center',
    alignItems: 'center',
  },
  containerBottom: {
    flex: 0.6,
  },
  itemImage: {
    width: width * 0.9,
    height: 55,
    margin: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemTopic: {
    paddingLeft: 60,
    paddingRight: 60,
    color: colors.HEADERBG,
    opacity: 0.9,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  imageTop: {
    height: 180,
    width: width * 0.85,
    resizeMode: 'contain',
    borderRadius: 16,
  },
});

export default IslamicEvents;

[mrousavy]

If I understand the question correctly, you're trying to share an animated style. This does not work currently, but will be supported soon. See this PR: #1470