Entering/exiting dosen't works on android

[razamsalem]

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?

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)

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

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[arasrezaei]

Same here

[razamsalem]

Same here

I'd love for you to let me know if you find a solution.

[bartlomiejbloniarz]

Hi @razamsalem. I'm a bit confused about this issue. Layout animations are not implemented yet for the new architecture, so they shouldn't be working on both platforms.

It might be that you are using the old architecture on iOS and new architecture on Android. This would explain your problems.

If you enabled new architecture, you should have:

• newArchEnabled=true in 𝚊𝚗𝚍𝚛𝚘𝚒𝚍/𝚐𝚛𝚊𝚍𝚕𝚎.𝚙𝚛𝚘𝚙𝚎𝚛𝚝𝚒𝚎𝚜
• ['RCT_NEW_ARCH_ENABLED'] = '1' in 𝚒𝚘𝚜/𝙿𝚘𝚍𝚏𝚒𝚕𝚎 (pods reinstall is required)