Description

I’m trying to use animation for entering & exiting animation and In ios its work’s fine but on android its dosent works,

This is the code:

import { COLORS } from '@/src/constants/theme';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import Animated, {
  SlideInRight,
  SlideOutLeft,
} from 'react-native-reanimated';

const LIST_ITEM_COLOR = '#1798DE';

interface Item {
  id: number;
}

export default function App() {
  const initialMode = useRef<boolean>(true);

  useEffect(() => {
    initialMode.current = false;
  }, []);

  const [items, setItems] = useState<Item[]>(
    new Array(5).fill(0).map((_, index) => ({ id: index }))
  );

  const onAdd = useCallback(() => {
    setItems(currentItems => {
      const nextItemId = (currentItems[currentItems.length - 1]?.id ?? 0) + 1;
      return [...currentItems, { id: nextItemId }];
    });
  }, []);

  const onDelete = useCallback((itemId: number) => {
    setItems(currentItems => {
      return currentItems.filter(item => item.id !== itemId);
    });
  }, []);

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.floatingButton} onPress={onAdd}>
        <Text style={{ color: 'white', fontSize: 40 }}>+</Text>
      </TouchableOpacity>
      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{ paddingVertical: 50 }}
      >
        {items.map((item, index) => {
          return (
            <Animated.View
              key={item.id}
              entering={SlideInRight}
              exiting={SlideOutLeft}
              onTouchEnd={() => onDelete(item.id)}
              style={styles.listItem}
            />
          );
        })}
      </ScrollView>
    </View>
  );
}

The funny part is that the animation is works I try the your first animation code and width.value = withSpring(width.value + 50) Really animate the View, so the animation works but I need the entering prop to works… any ideas?

notice
on iOS works fine just android not work

Reanimated version

3.10.0 ( I try 3.6.1 too and same problem)

React Native version

0.73.6

Platforms

iOS (entering/exiting works)
Android (entering/exiting dosen’t works)

Architecture

Fabric (New Architecture)

Build type

eas build dev

Device model

several android devices & android emulator

Acknowledgements

Yes

Steps to reproduce

1.Click on “onAdd” function to add more items (expecting entering with animation)
2. Get no animation at all (only with entering and exiting)