React native reanimated layout problem not showing right height if remove

Question

I use react-native-animated to show my list items with animations. It works greatly but if I remove an Item, then the half of the button is not showing. Loot at the video:

enter link description here

Code:

import React, { useCallback, useState } from 'react';
import { Dimensions, Pressable, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { GestureDetector, GestureHandlerRootView, PanGestureHandler, PanGestureHandlerGestureEvent, ScrollView } from 'react-native-gesture-handler';
import Animated, { FadeIn, FadeOut, Layout, useAnimatedGestureHandler, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring, ZoomIn } from 'react-native-reanimated';

const LIST_ITEM_COLOR = '#1798DE';

interface Item {
  id: number;
}

const AnPressable = Animated.createAnimatedComponent(Pressable);

export default function App() {

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

  const onAdd = useCallback(() => {

    setItems((cur) => {
    
      const nextItemID = (cur[cur.length - 1]?.id ?? 0) + 1
      return [...cur, { id: nextItemID }]
    })
  }, []);

  const onRemove = useCallback((id) => {
    setItems((cur) => cur.filter((el) => el.id !== id))
  }, []);

  return (
    <GestureHandlerRootView style={s.container}>
      <TouchableOpacity onPress={onAdd} style={s.btn}>
        <Text style={{fontSize: 40, color: 'white'}}>+</Text>  
      </TouchableOpacity>
      <ScrollView style={{flex: 1}} contentContainerStyle={{paddingVertical: 50}}>
        {
          items.map((item) => (
            <AnPressable 
            exiting={FadeOut}
             entering={FadeIn}
             layout={Layout}
              onTouchEnd={() => onRemove(item.id)} key={item.id} style={s.listItem} />
          ))
        }
      </ScrollView>
    </GestureHandlerRootView>
  )
}

const s = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  listItem: {
    height: 100,
    backgroundColor: LIST_ITEM_COLOR,
    width: '90%',
    marginVertical: 10,
    borderRadius: 20,
    alignSelf: 'center',
    elevation: 5
  },
  btn: {
    width: 80,
    aspectRatio: 1,
    backgroundColor: 'black',
    borderRadius: 40,
    position: 'absolute',
    right: '5%',
    bottom: 10,
    zIndex: 10,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

What I am doing wrong ?

....................................................................................................................................................................................................................................................................................................................................................

React native reanimated layout problem not showing right height if remove

0 Answers0