Add config component for layout animations

Common/cpp/LayoutAnimations/LayoutAnimationsManager.cpp

@@ -28,6 +28,16 @@ void LayoutAnimationsManager::configureAnimation(
   }
 }
 
+void LayoutAnimationsManager::disableExiting(int tag) {
+  auto lock = std::unique_lock<std::mutex>(animationsMutex_);
+  disableExiting_.emplace(tag);
+}
+
+bool LayoutAnimationsManager::isDisabledExiting(int tag) {
+  auto lock = std::unique_lock<std::mutex>(animationsMutex_);
+  return collection::contains(disableExiting_, tag);
+}
+
 bool LayoutAnimationsManager::hasLayoutAnimation(
     int tag,
     LayoutAnimationType type) {
@@ -65,6 +75,7 @@ void LayoutAnimationsManager::clearLayoutAnimationConfig(int tag) {
   }
   viewTagToSharedTag_.erase(tag);
   ignoreProgressAnimationForTag_.erase(tag);
+  disableExiting_.erase(tag);
 }
 
 void LayoutAnimationsManager::startLayoutAnimation(

Common/cpp/LayoutAnimations/LayoutAnimationsManager.h

@@ -32,6 +32,8 @@ class LayoutAnimationsManager {
       LayoutAnimationType type,
       const std::string &sharedTransitionTag,
       std::shared_ptr<Shareable> config);
+  void disableExiting(int tag);
+  bool isDisabledExiting(int tag);
   bool hasLayoutAnimation(int tag, LayoutAnimationType type);
   void startLayoutAnimation(
       jsi::Runtime &rt,
@@ -61,6 +63,7 @@ class LayoutAnimationsManager {
   std::unordered_map<int, std::string> viewsScreenSharedTagMap_;
 #endif
 
+  std::unordered_set<int> disableExiting_;
   std::unordered_map<int, std::shared_ptr<Shareable>> enteringAnimations_;
   std::unordered_map<int, std::shared_ptr<Shareable>> exitingAnimations_;
   std::unordered_map<int, std::shared_ptr<Shareable>> layoutAnimations_;

Common/cpp/NativeModules/NativeReanimatedModule.cpp

@@ -321,6 +321,13 @@ jsi::Value NativeReanimatedModule::configureLayoutAnimation(
   return jsi::Value::undefined();
 }
 
+jsi::Value NativeReanimatedModule::disableExiting(
+    jsi::Runtime &rt,
+    const jsi::Value &viewTag) {
+  layoutAnimationsManager_.disableExiting(viewTag.asNumber());
+  return jsi::Value::undefined();
+}
+
 bool NativeReanimatedModule::isAnyHandlerWaitingForEvent(
     const std::string &eventName,
     const int emitterReactTag) {

Common/cpp/NativeModules/NativeReanimatedModule.h

@@ -94,6 +94,8 @@ class NativeReanimatedModule : public NativeReanimatedModuleSpec {
       const jsi::Value &type,
       const jsi::Value &sharedTransitionTag,
       const jsi::Value &config) override;
+  jsi::Value disableExiting(jsi::Runtime &rt, const jsi::Value &viewTag)
+      override;
 
   void onRender(double timestampMs);
 

Common/cpp/NativeModules/NativeReanimatedModuleSpec.cpp

@@ -176,6 +176,15 @@ static jsi::Value SPEC_PREFIX(configureLayoutAnimation)(
           std::move(args[3]));
 }
 
+static jsi::Value SPEC_PREFIX(disableExiting)(
+    jsi::Runtime &rt,
+    TurboModule &turboModule,
+    const jsi::Value *args,
+    size_t) {
+  return static_cast<NativeReanimatedModuleSpec *>(&turboModule)
+      ->disableExiting(rt, std::move(args[0]));
+}
+
 NativeReanimatedModuleSpec::NativeReanimatedModuleSpec(
     std::shared_ptr<CallInvoker> jsInvoker)
     : TurboModule("NativeReanimated", jsInvoker) {
@@ -213,5 +222,7 @@ NativeReanimatedModuleSpec::NativeReanimatedModuleSpec(
 
   methodMap_["configureLayoutAnimation"] =
       MethodMetadata{4, SPEC_PREFIX(configureLayoutAnimation)};
+  methodMap_["disableExitingAnimation"] =
+      MethodMetadata{1, SPEC_PREFIX(disableExiting)};
 }
 } // namespace reanimated

Common/cpp/NativeModules/NativeReanimatedModuleSpec.h

@@ -102,6 +102,10 @@ class JSI_EXPORT NativeReanimatedModuleSpec : public TurboModule {
       const jsi::Value &type,
       const jsi::Value &sharedTransitionTag,
       const jsi::Value &config) = 0;
+
+  virtual jsi::Value disableExiting(
+      jsi::Runtime &rt,
+      const jsi::Value &viewTag) = 0;
 };
 
 } // namespace reanimated

android/src/fabric/java/com/swmansion/reanimated/NativeProxy.java

@@ -80,6 +80,11 @@ public int findPrecedingViewTagForTransition(int tag) {
                 return -1;
             }
 
+            @Override
+            public boolean isDisabledExiting(int tag) {
+                return false;
+            }
+
             @Override
             public boolean hasAnimation(int tag, int type) {
                 return false;

android/src/main/cpp/LayoutAnimations.cpp

@@ -47,6 +47,11 @@ void LayoutAnimations::setHasAnimationBlock(
   this->hasAnimationBlock_ = hasAnimationBlock;
 }
 
+void LayoutAnimations::setIsDisabledExitingBlock(
+    IsDisabledExitingBlock isDisabledExitingBlock) {
+  this->isDisabledExitingBlock_ = isDisabledExitingBlock;
+}
+
 #ifdef DEBUG
 void LayoutAnimations::setCheckDuplicateSharedTag(
     CheckDuplicateSharedTag checkDuplicateSharedTag) {
@@ -62,6 +67,10 @@ bool LayoutAnimations::hasAnimationForTag(int tag, int type) {
   return hasAnimationBlock_(tag, type);
 }
 
+bool LayoutAnimations::isDisabledExiting(int tag) {
+  return isDisabledExitingBlock_(tag);
+}
+
 void LayoutAnimations::setClearAnimationConfigBlock(
     ClearAnimationConfigBlock clearAnimationConfigBlock) {
   this->clearAnimationConfigBlock_ = clearAnimationConfigBlock;
@@ -102,6 +111,8 @@ void LayoutAnimations::registerNatives() {
           "startAnimationForTag", LayoutAnimations::startAnimationForTag),
       makeNativeMethod(
           "hasAnimationForTag", LayoutAnimations::hasAnimationForTag),
+      makeNativeMethod(
+          "isDisabledExiting", LayoutAnimations::isDisabledExiting),
       makeNativeMethod(
           "clearAnimationConfigForTag",
           LayoutAnimations::clearAnimationConfigForTag),

android/src/main/cpp/LayoutAnimations.h

@@ -15,6 +15,7 @@ class LayoutAnimations : public jni::HybridClass<LayoutAnimations> {
   using AnimationStartingBlock =
       std::function<void(int, int, alias_ref<JMap<jstring, jstring>>)>;
   using HasAnimationBlock = std::function<bool(int, int)>;
+  using IsDisabledExitingBlock = std::function<bool(int)>;
 #ifdef DEBUG
   using CheckDuplicateSharedTag = std::function<void(int, int)>;
 #endif
@@ -34,10 +35,12 @@ class LayoutAnimations : public jni::HybridClass<LayoutAnimations> {
       int type,
       alias_ref<JMap<jstring, jstring>> values);
   bool hasAnimationForTag(int tag, int type);
+  bool isDisabledExiting(int tag);
   bool isLayoutAnimationEnabled();
 
   void setAnimationStartingBlock(AnimationStartingBlock animationStartingBlock);
   void setHasAnimationBlock(HasAnimationBlock hasAnimationBlock);
+  void setIsDisabledExitingBlock(IsDisabledExitingBlock isDisabledExitingBlock);
 #ifdef DEBUG
   void setCheckDuplicateSharedTag(
       CheckDuplicateSharedTag checkDuplicateSharedTag);
@@ -64,6 +67,7 @@ class LayoutAnimations : public jni::HybridClass<LayoutAnimations> {
   jni::global_ref<LayoutAnimations::javaobject> javaPart_;
   AnimationStartingBlock animationStartingBlock_;
   HasAnimationBlock hasAnimationBlock_;
+  IsDisabledExitingBlock isDisabledExitingBlock_;
   ClearAnimationConfigBlock clearAnimationConfigBlock_;
   CancelAnimationBlock cancelAnimationBlock_;
   FindPrecedingViewTagForTransitionBlock

android/src/main/cpp/NativeProxy.cpp

@@ -498,6 +498,15 @@ void NativeProxy::setupLayoutAnimations() {
         return false;
       });
 
+  layoutAnimations_->cthis()->setIsDisabledExitingBlock(
+      [weakNativeReanimatedModule](int tag) {
+        if (auto nativeReanimatedModule = weakNativeReanimatedModule.lock()) {
+          return nativeReanimatedModule->layoutAnimationsManager()
+              .isDisabledExiting(tag);
+        }
+        return false;
+      });
+
 #ifdef DEBUG
   layoutAnimations_->cthis()->setCheckDuplicateSharedTag(
       [weakNativeReanimatedModule](int viewTag, int screenTag) {

android/src/main/java/com/swmansion/reanimated/layoutReanimation/AnimationsManager.java

@@ -86,7 +86,7 @@ public void onViewRemoval(View view, ViewGroup parent, Runnable callback) {
     Integer tag = view.getId();
     mCallbacks.put(tag, callback);
 
-    if (!removeOrAnimateExitRecursive(view, true)) {
+    if (!removeOrAnimateExitRecursive(view, true, true)) {
       removeView(view, parent);
     }
   }
@@ -489,6 +489,10 @@ public void updateLayout(
     }
   }
 
+  public boolean isDisabledExiting(int tag) {
+    return mNativeMethodsHolder.isDisabledExiting(tag);
+  }
+
   public boolean hasAnimationForTag(int tag, int type) {
     return mNativeMethodsHolder.hasAnimation(tag, type);
   }
@@ -497,7 +501,8 @@ public boolean isLayoutAnimationEnabled() {
     return mNativeMethodsHolder != null && mNativeMethodsHolder.isLayoutAnimationEnabled();
   }
 
-  private boolean removeOrAnimateExitRecursive(View view, boolean shouldRemove) {
+  private boolean removeOrAnimateExitRecursive(
+      View view, boolean shouldRemove, boolean shouldAnimate) {
     int tag = view.getId();
     ViewManager viewManager = resolveViewManager(tag);
 
@@ -512,8 +517,11 @@ private boolean removeOrAnimateExitRecursive(View view, boolean shouldRemove) {
       }
     }
 
+    shouldAnimate &= !isDisabledExiting(tag);
+
     boolean hasExitAnimation =
-        hasAnimationForTag(tag, LayoutAnimations.Types.EXITING) || mExitingViews.containsKey(tag);
+        (hasAnimationForTag(tag, LayoutAnimations.Types.EXITING) || mExitingViews.containsKey(tag))
+            && shouldAnimate;
     boolean hasAnimatedChildren = false;
     shouldRemove = shouldRemove && !hasExitAnimation;
 
@@ -531,7 +539,7 @@ private boolean removeOrAnimateExitRecursive(View view, boolean shouldRemove) {
       ViewGroup viewGroup = (ViewGroup) view;
       for (int i = viewGroup.getChildCount() - 1; i >= 0; i--) {
         View child = viewGroup.getChildAt(i);
-        if (removeOrAnimateExitRecursive(child, shouldRemove)) {
+        if (removeOrAnimateExitRecursive(child, shouldRemove, shouldAnimate)) {
           hasAnimatedChildren = true;
         } else if (shouldRemove && child.getId() != -1) {
           toBeRemoved.add(child);

android/src/main/java/com/swmansion/reanimated/layoutReanimation/LayoutAnimations.java

@@ -40,6 +40,8 @@ public LayoutAnimations(ReactApplicationContext context) {
 
   public native boolean hasAnimationForTag(int tag, int type);
 
+  public native boolean isDisabledExiting(int tag);
+
   public native void checkDuplicateSharedTag(int viewTag, int screenTag);
 
   public native void clearAnimationConfigForTag(int tag);

android/src/main/java/com/swmansion/reanimated/layoutReanimation/NativeMethodsHolder.java

@@ -5,6 +5,8 @@
 public interface NativeMethodsHolder {
   void startAnimation(int tag, int type, HashMap<String, Object> values);
 
+  boolean isDisabledExiting(int tag);
+
   boolean hasAnimation(int tag, int type);
 
   void clearAnimationConfig(int tag);

android/src/paper/java/com/swmansion/reanimated/NativeProxy.java

@@ -72,6 +72,15 @@ public void startAnimation(int tag, int type, HashMap<String, Object> values) {
                 }
             }
 
+            @Override
+            public boolean isDisabledExiting(int tag) {
+                LayoutAnimations layoutAnimations = weakLayoutAnimations.get();
+                if (layoutAnimations != null) {
+                    return layoutAnimations.isDisabledExiting(tag);
+                }
+                return false;
+            }
+
             @Override
             public boolean isLayoutAnimationEnabled() {
                 LayoutAnimations layoutAnimations = weakLayoutAnimations.get();

app/src/examples/LayoutAnimations/FlatListSkipLayout.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import { Button, StyleSheet } from 'react-native';
+import Animated, {
+  FadeInUp,
+  LayoutAnimationConfig,
+  PinwheelIn,
+  PinwheelOut,
+  SlideInRight,
+  SlideOutLeft,
+} from 'react-native-reanimated';
+
+const digits = [...Array(3).keys()];
+
+export default function FlatListSkipLayout() {
+  return <List />;
+}
+
+function List() {
+  const [show, setShow] = useState(true);
+  const [data, setData] = useState(digits);
+
+  return (
+    <>
+      <Button onPress={() => setShow(!show)} title="toggle" />
+      <Button
+        title="add"
+        onPress={() =>
+          setData((data) => {
+            return [...data, data.length];
+          })
+        }
+      />
+      <Button
+        title="remove"
+        onPress={() =>
+          setData((data) => {
+            data.pop();
+            return [...data];
+          })
+        }
+      />
+      {show && (
+        <Animated.FlatList
+          skipLayoutAnimations
+          style={styles.container}
+          contentContainerStyle={[styles.contentContainer]}
+          decelerationRate="fast"
+          data={data}
+          renderItem={() => <Item />}
+        />
+      )}
+    </>
+  );
+}
+
+function Item() {
+  return (
+    <Animated.View
+      entering={SlideInRight.duration(500)}
+      exiting={SlideOutLeft}
+      style={styles.card}>
+      <Animated.View
+        entering={FadeInUp.duration(1000).delay(500)}
+        style={styles.outerBox}>
+        <LayoutAnimationConfig skipEntering={false}>
+          <Animated.View
+            style={styles.box}
+            entering={PinwheelIn.duration(2000)}
+            exiting={PinwheelOut}
+          />
+        </LayoutAnimationConfig>
+      </Animated.View>
+      <Animated.View
+        entering={FadeInUp.duration(1000).delay(500)}
+        style={styles.outerBox}>
+        <Animated.View
+          style={styles.box}
+          entering={PinwheelIn.duration(2000)}
+          exiting={PinwheelOut}
+        />
+      </Animated.View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    margin: 10,
+  },
+  contentContainer: {
+    alignItems: 'center',
+    height: 1000,
+  },
+  card: {
+    width: 330,
+    height: 100,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    borderColor: '#eee',
+    borderWidth: 1,
+    margin: 10,
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  outerBox: {
+    width: 50,
+    height: 50,
+    backgroundColor: '#b58df1',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 80,
+    borderRadius: 5,
+  },
+  box: {
+    width: 30,
+    height: 30,
+    backgroundColor: '#782aeb',
+  },
+});