feat: add streaming animation support for newly appended content (#139)

* feat: add streaming animation support for newly appended content

* refactor: replace ValueAnimator with TailFadeInAnimator for improved fade-in effect

* refactor: enhance fade-in animation handling by consolidating animator logic

* feat: add TODO for streaming animation support in github flavor

Author: hryhoriiK97

android/src/main/java/com/swmansion/enriched/markdown/EnrichedMarkdownManager.kt

@@ -123,6 +123,15 @@ class EnrichedMarkdownManager :
     // No-op on Android — only used on iOS
   }
 
+  @ReactProp(name = "streamingAnimation", defaultBoolean = false)
+  override fun setStreamingAnimation(
+    view: EnrichedMarkdown?,
+    streamingAnimation: Boolean,
+  ) {
+    // TODO: Add streaming animation support for github flavor.
+    // Currently only supported with flavor="commonmark" (single TextView).
+  }
+
   override fun setPadding(
     view: EnrichedMarkdown,
     left: Int,

android/src/main/java/com/swmansion/enriched/markdown/EnrichedMarkdownText.kt

@@ -16,6 +16,7 @@ import com.swmansion.enriched.markdown.parser.Md4cFlags
 import com.swmansion.enriched.markdown.parser.Parser
 import com.swmansion.enriched.markdown.renderer.Renderer
 import com.swmansion.enriched.markdown.styles.StyleConfig
+import com.swmansion.enriched.markdown.utils.text.TailFadeInAnimator
 import com.swmansion.enriched.markdown.utils.text.interaction.CheckboxTouchHelper
 import com.swmansion.enriched.markdown.utils.text.view.LinkLongPressMovementMethod
 import com.swmansion.enriched.markdown.utils.text.view.applySelectableState
@@ -66,6 +67,10 @@ class EnrichedMarkdownText
     private var maxFontSizeMultiplier: Float = 0f
     private var allowTrailingMargin: Boolean = false
 
+    private var streamingAnimation: Boolean = false
+    private var previousTextLength: Int = 0
+    private var fadeAnimator: TailFadeInAnimator? = null
+
     init {
       setupAsMarkdownTextView(accessibilityHelper)
     }
@@ -130,6 +135,18 @@ class EnrichedMarkdownText
       scheduleRenderIfNeeded()
     }
 
+    fun setStreamingAnimation(enabled: Boolean) {
+      if (streamingAnimation == enabled) return
+      streamingAnimation = enabled
+      if (enabled) {
+        previousTextLength = text?.length ?: 0
+      } else {
+        fadeAnimator?.cancelAll()
+        fadeAnimator = null
+        previousTextLength = 0
+      }
+    }
+
     private fun updateMeasurementStoreFontScaling() {
       MeasurementStore.updateFontScalingSettings(id, allowFontScaling, maxFontSizeMultiplier)
     }
@@ -189,22 +206,28 @@ class EnrichedMarkdownText
     }
 
     private fun applyRenderedText(styledText: CharSequence) {
+      val tailStart = previousTextLength
+
       text = styledText
 
-      // setText on a selectable TextView can reset movementMethod, so re-apply if needed
       if (movementMethod !is LinkLongPressMovementMethod) {
         movementMethod = LinkLongPressMovementMethod.createInstance()
       }
 
-      // Register ImageSpans from the collector
       renderer.getCollectedImageSpans().forEach { span ->
         span.registerTextView(this)
       }
 
       layoutManager.invalidateLayout()
-
-      // Update accessibility items for TalkBack navigation
       accessibilityHelper.invalidateAccessibilityItems()
+
+      if (streamingAnimation) {
+        if (fadeAnimator == null) {
+          fadeAnimator = TailFadeInAnimator(this)
+        }
+        fadeAnimator?.animate(tailStart, styledText.length)
+        previousTextLength = styledText.length
+      }
     }
 
     fun setIsSelectable(selectable: Boolean) {

android/src/main/java/com/swmansion/enriched/markdown/EnrichedMarkdownTextManager.kt

@@ -144,6 +144,14 @@ class EnrichedMarkdownTextManager :
     // Required by the codegen interface but is a no-op on Android.
   }
 
+  @ReactProp(name = "streamingAnimation", defaultBoolean = false)
+  override fun setStreamingAnimation(
+    view: EnrichedMarkdownText?,
+    streamingAnimation: Boolean,
+  ) {
+    view?.setStreamingAnimation(streamingAnimation)
+  }
+
   override fun setPadding(
     view: EnrichedMarkdownText,
     left: Int,

android/src/main/java/com/swmansion/enriched/markdown/spans/FadeInSpan.kt

@@ -0,0 +1,25 @@
+package com.swmansion.enriched.markdown.spans
+
+import android.text.TextPaint
+import android.text.style.CharacterStyle
+import androidx.annotation.FloatRange
+
+class FadeInSpan : CharacterStyle() {
+  @set:FloatRange(from = 0.0, to = 1.0)
+  var alpha: Float = 0f
+
+  override fun updateDrawState(tp: TextPaint) {
+    tp.color = multiplyAlpha(tp.color, alpha)
+    tp.underlineColor = multiplyAlpha(tp.underlineColor, alpha)
+  }
+
+  private fun multiplyAlpha(
+    color: Int,
+    alpha: Float,
+  ): Int {
+    if (alpha >= 1f) return color
+    if (alpha <= 0f) return color and 0x00FFFFFF
+    val a = ((color ushr 24) * alpha).toInt()
+    return (a shl 24) or (color and 0x00FFFFFF)
+  }
+}

android/src/main/java/com/swmansion/enriched/markdown/utils/text/TailFadeInAnimator.kt

@@ -0,0 +1,74 @@
+package com.swmansion.enriched.markdown.utils.text
+
+import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
+import android.animation.ValueAnimator
+import android.text.Spannable
+import android.view.animation.LinearInterpolator
+import android.widget.TextView
+import com.swmansion.enriched.markdown.spans.FadeInSpan
+import java.lang.ref.WeakReference
+
+class TailFadeInAnimator(
+  textView: TextView,
+) {
+  private val viewRef = WeakReference(textView)
+
+  private val activeAnimations = mutableMapOf<FadeInSpan, ValueAnimator>()
+
+  fun animate(
+    tailStart: Int,
+    tailEnd: Int,
+  ) {
+    if (tailEnd <= tailStart) return
+
+    val textView = viewRef.get() ?: return
+    val spannable = textView.text as? Spannable ?: return
+
+    val fadeSpan = FadeInSpan().apply { alpha = 0f }
+    spannable.setSpan(fadeSpan, tailStart, tailEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+
+    val animator =
+      ValueAnimator.ofFloat(0f, 1f).apply {
+        duration = FADE_DURATION_MS
+        interpolator = LinearInterpolator()
+
+        addUpdateListener { anim ->
+          fadeSpan.alpha = anim.animatedValue as Float
+          viewRef.get()?.invalidate()
+        }
+
+        addListener(
+          object : AnimatorListenerAdapter() {
+            override fun onAnimationEnd(animation: Animator) {
+              cleanup(fadeSpan)
+            }
+
+            override fun onAnimationCancel(animation: Animator) {
+              cleanup(fadeSpan)
+            }
+          },
+        )
+      }
+
+    activeAnimations[fadeSpan] = animator
+    animator.start()
+  }
+
+  private fun cleanup(span: FadeInSpan) {
+    activeAnimations.remove(span)
+    val spannable = viewRef.get()?.text as? Spannable ?: return
+    span.alpha = 1f
+    spannable.removeSpan(span)
+  }
+
+  fun cancelAll() {
+    val spans = activeAnimations.keys.toList()
+    spans.forEach { activeAnimations[it]?.cancel() }
+    activeAnimations.clear()
+  }
+
+  companion object {
+    private const val FADE_DURATION_MS = 150L
+  }
+}

ios/EnrichedMarkdownText.mm

@@ -4,6 +4,7 @@
 #import "CodeBlockBackground.h"
 #import "ENRMImageAttachment.h"
 #import "ENRMMarkdownParser.h"
+#import "ENRMTailFadeInAnimator.h"
 #import "EditMenuUtils.h"
 #import "FontScaleObserver.h"
 #import "FontUtils.h"
@@ -64,6 +65,10 @@ @implementation EnrichedMarkdownText {
   CGFloat _lastElementMarginBottom;
   BOOL _allowTrailingMargin;
   BOOL _enableLinkPreview;
+  BOOL _streamingAnimation;
+
+  NSUInteger _previousTextLength;
+  ENRMTailFadeInAnimator *_fadeAnimator;
 
   AccessibilityInfo *_accessibilityInfo;
   NSMutableArray<UIAccessibilityElement *> *_accessibilityElements;
@@ -332,12 +337,13 @@ - (void)renderMarkdownSynchronously:(NSString *)markdownString
 
 - (void)applyRenderedText:(NSMutableAttributedString *)attributedText
 {
+  NSUInteger tailStart = _previousTextLength;
+
   NSLayoutManager *layoutManager = _textView.layoutManager;
   if ([layoutManager isKindOfClass:[TextViewLayoutManager class]]) {
     [layoutManager setValue:_config forKey:@"config"];
   }
 
-  // Attachments access the text view via associated object on the container
   objc_setAssociatedObject(_textView.textContainer, kTextViewKey, _textView, OBJC_ASSOCIATION_ASSIGN);
 
   _textView.attributedText = attributedText;
@@ -356,10 +362,17 @@ - (void)applyRenderedText:(NSMutableAttributedString *)attributedText
 
   _accessibilityNeedsRebuild = YES;
 
-  // Next run loop — layout must settle before revealing content
   if (_textView.hidden) {
     dispatch_async(dispatch_get_main_queue(), ^{ self->_textView.hidden = NO; });
   }
+
+  if (_streamingAnimation) {
+    if (!_fadeAnimator) {
+      _fadeAnimator = [[ENRMTailFadeInAnimator alloc] initWithTextView:_textView];
+    }
+    [_fadeAnimator animateFrom:tailStart to:attributedText.length];
+    _previousTextLength = attributedText.length;
+  }
 }
 
 - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
@@ -431,6 +444,17 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
 
   _enableLinkPreview = newViewProps.enableLinkPreview;
 
+  if (newViewProps.streamingAnimation != oldViewProps.streamingAnimation) {
+    _streamingAnimation = newViewProps.streamingAnimation;
+    if (_streamingAnimation) {
+      _previousTextLength = _textView.attributedText.length;
+    } else {
+      [_fadeAnimator cancel];
+      _fadeAnimator = nil;
+      _previousTextLength = 0;
+    }
+  }
+
   if (markdownChanged || stylePropChanged || md4cFlagsChanged || allowTrailingMarginChanged) {
     NSString *markdownString = [[NSString alloc] initWithUTF8String:newViewProps.markdown.c_str()];
     [self renderMarkdownContent:markdownString];

ios/utils/ENRMTailFadeInAnimator.h

@@ -0,0 +1,15 @@
+#pragma once
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface ENRMTailFadeInAnimator : NSObject
+
+- (instancetype)initWithTextView:(UITextView *)textView;
+
+- (void)animateFrom:(NSUInteger)tailStart to:(NSUInteger)tailEnd;
+- (void)cancel;
+
+@end
+
+NS_ASSUME_NONNULL_END