React native how to render items without using any loder? - react-native

Question

I have implemented a delete feature for the image editor app.
Case: If the user added a number of images in edit mode and wants to delete the unnecessary layer of the image from the editor then allows to delete the selected layer from the array.
Issue: when deleted the selected layer from the array the remaining image swaps its position and size to deleted image position and size. Even if I double-check the scale value and position remain the same as I fixed. This issue occurs if am not using the loder and if am using the loder then the image did not swap their position and scale.
Where I handled the states: I am handling the states in the component and I also checked if I handled the states in redux same error occurred. App speed to slow if handled with redux.
Here is my code.
const onDeleteLayerSequence = data => {
let indexing = data.length;
data.forEach(item => {
indexing--;
item.key = indexing;
});
setInputData(data);
setIsDelete(!isDelete);
};
const deleteLayer = index => {
const filterItem = [
...inputData.slice(0, index),
...inputData.slice(index + 1, inputData.length),
];
onDeleteLayerSequence(filterItem);
};
useEffect(() => {
setImageArray(inputData.filter(item => item.type == 'image'));
// setLoader(true);
}, [isDelete]);
return (
<>
<AutoDragSortableView
dataSource={inputData}
parentWidth={util.WP(100)}
childrenWidth={util.WP(100)}
childrenHeight={util.WP(12)}
keyExtractor={(item, index) => item.id}
renderItem={(item, index) => render_item(item, index)}
onDataChange={data => onSelectLayer(data)}
onClickItem={(data, i) => replaceImage(data, i)}
/>
</View>
</DraggablePanel>
<View style={styles.editImageWrapper}>
<ViewShot
ref={reference}
options={{format: 'jpg', quality: 1.0, result: 'base64'}}>
<ImageBackground
style={[
styles.templateContainer,
{backgroundColor: background},
]}
resizeMode="stretch"
source={selectTemplate}>
{isFocused &&
imageArray &&
imageArray.map((item, i) => {
return (
<component.PinchZoomView
minScale={0.1}
maxScale={5}
scale={item.scale}
translateX={item.translateX}
translateY={item.translateY}
data={value =>
modifyValues(value, item.layer, item.key)
}
key={i}
style={[
styles.pinchImagePosition,
{
zIndex: item.key,
},
]}>
<ImageCarousel>
<Image
source={{
uri: item.editImage,
height: util.WP(100),
width: util.WP(100),
}}
key={item}
resizeMode="contain"
/>
</ImageCarousel>
</component.PinchZoomView>
);
})}
</ImageBackground>
</ViewShot>
</View>
</>
)