react-native-enriched 0.1.5 → 0.2.0

package/README.md

@@ -1,4 +1,4 @@
-<img src="https://github.com/user-attachments/assets/abc75d3b-495b-4a76-a72f-d87ce3ca1ff9" alt="react-native-enriched by Software Mansion" width="100%">
+<img src="https://github.com/user-attachments/assets/b010571e-e4a3-4d92-a409-4f9fe614025d" alt="react-native-enriched by Software Mansion" width="100%">
 
 # react-native-enriched
 
@@ -101,11 +101,11 @@ export default function App() {
     <View style={styles.container}>
       <EnrichedTextInput
         ref={ref}
-        onChangeState={(e) => setStylesState(e.nativeEvent)}
+        onChangeState={e => setStylesState(e.nativeEvent)}
         style={styles.input}
       />
       <Button
-        title="Toggle bold"
+        title={stylesState?.isBold ? 'Unbold' : 'Bold'}
         color={stylesState?.isBold ? 'green' : 'gray'}
         onPress={() => ref.current?.toggleBold()}
       />
@@ -152,9 +152,6 @@ Supported styles:
 - ordered list
 - unordered list
 
-> [!NOTE]
-> The iOS doesn't support codeblocks just yet, but it's planned in the near future!
-
 Each of the styles can be toggled the same way as in the example from [usage section](#usage); call a proper `toggle` function on the component ref.
 
 Each call toggles the style within the current text selection. We can still divide styles into two categories based on how they treat the selection:
@@ -212,9 +209,6 @@ You can insert an image into the input using [setImage](docs/API_REFERENCE.md#se
 
 The image will be put into a single line in the input and will affect the line's height as well as input's height. Keep in mind, that image will replace currently selected text or insert into the cursor position if there is no text selection.
 
-> [!NOTE]
-> The iOS doesn't support inline images just yet, but it's planned in the near future!
-
 ## Style Detection
 
 All of the above styles can be detected with the use of [onChangeState](docs/API_REFERENCE.md#onchangestate) event payload.

package/android/generated/java/com/facebook/react/viewmanagers/EnrichedTextInputViewManagerDelegate.java

@@ -55,6 +55,9 @@ public class EnrichedTextInputViewManagerDelegate<T extends View, U extends Base
       case "htmlStyle":
         mViewManager.setHtmlStyle(view, (ReadableMap) value);
         break;
+      case "scrollEnabled":
+        mViewManager.setScrollEnabled(view, value == null ? false : (boolean) value);
+        break;
       case "color":
         mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
         break;
@@ -133,7 +136,7 @@ public class EnrichedTextInputViewManagerDelegate<T extends View, U extends Base
         mViewManager.addLink(view, args.getInt(0), args.getInt(1), args.getString(2), args.getString(3));
         break;
       case "addImage":
-        mViewManager.addImage(view, args.getString(0));
+        mViewManager.addImage(view, args.getString(0), (float) args.getDouble(1), (float) args.getDouble(2));
         break;
       case "startMention":
         mViewManager.startMention(view, args.getString(0));

package/android/generated/java/com/facebook/react/viewmanagers/EnrichedTextInputViewManagerInterface.java

@@ -26,6 +26,7 @@ public interface EnrichedTextInputViewManagerInterface<T extends View> extends V
   void setSelectionColor(T view, @Nullable Integer value);
   void setAutoCapitalize(T view, @Nullable String value);
   void setHtmlStyle(T view, @Nullable ReadableMap value);
+  void setScrollEnabled(T view, boolean value);
   void setColor(T view, @Nullable Integer value);
   void setFontSize(T view, float value);
   void setFontFamily(T view, @Nullable String value);
@@ -49,7 +50,7 @@ public interface EnrichedTextInputViewManagerInterface<T extends View> extends V
   void toggleOrderedList(T view);
   void toggleUnorderedList(T view);
   void addLink(T view, int start, int end, String text, String url);
-  void addImage(T view, String uri);
+  void addImage(T view, String uri, float width, float height);
   void startMention(T view, String indicator);
   void addMention(T view, String indicator, String text, String payload);
 }

package/android/generated/jni/react/renderer/components/RNEnrichedTextInputViewSpec/Props.cpp

@@ -30,6 +30,7 @@ EnrichedTextInputViewProps::EnrichedTextInputViewProps(
     selectionColor(convertRawProp(context, rawProps, "selectionColor", sourceProps.selectionColor, {})),
     autoCapitalize(convertRawProp(context, rawProps, "autoCapitalize", sourceProps.autoCapitalize, {})),
     htmlStyle(convertRawProp(context, rawProps, "htmlStyle", sourceProps.htmlStyle, {})),
+    scrollEnabled(convertRawProp(context, rawProps, "scrollEnabled", sourceProps.scrollEnabled, {false})),
     color(convertRawProp(context, rawProps, "color", sourceProps.color, {})),
     fontSize(convertRawProp(context, rawProps, "fontSize", sourceProps.fontSize, {0.0})),
     fontFamily(convertRawProp(context, rawProps, "fontFamily", sourceProps.fontFamily, {})),
@@ -94,6 +95,10 @@ folly::dynamic EnrichedTextInputViewProps::getDiffProps(
     result["htmlStyle"] = toDynamic(htmlStyle);
   }
     
+  if (scrollEnabled != oldProps->scrollEnabled) {
+    result["scrollEnabled"] = scrollEnabled;
+  }
+    
   if (color != oldProps->color) {
     result["color"] = *color;
   }

package/android/generated/jni/react/renderer/components/RNEnrichedTextInputViewSpec/Props.h

@@ -309,45 +309,6 @@ static inline folly::dynamic toDynamic(const EnrichedTextInputViewHtmlStyleAStru
 }
 #endif
 
-struct EnrichedTextInputViewHtmlStyleImgStruct {
-  Float width{0.0};
-  Float height{0.0};
-
-#ifdef RN_SERIALIZABLE_STATE
-  bool operator==(const EnrichedTextInputViewHtmlStyleImgStruct&) const = default;
-
-  folly::dynamic toDynamic() const {
-    folly::dynamic result = folly::dynamic::object();
-    result["width"] = width;
-    result["height"] = height;
-    return result;
-  }
-#endif
-};
-
-static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, EnrichedTextInputViewHtmlStyleImgStruct &result) {
-  auto map = (std::unordered_map<std::string, RawValue>)value;
-
-  auto tmp_width = map.find("width");
-  if (tmp_width != map.end()) {
-    fromRawValue(context, tmp_width->second, result.width);
-  }
-  auto tmp_height = map.find("height");
-  if (tmp_height != map.end()) {
-    fromRawValue(context, tmp_height->second, result.height);
-  }
-}
-
-static inline std::string toString(const EnrichedTextInputViewHtmlStyleImgStruct &value) {
-  return "[Object EnrichedTextInputViewHtmlStyleImgStruct]";
-}
-
-#ifdef RN_SERIALIZABLE_STATE
-static inline folly::dynamic toDynamic(const EnrichedTextInputViewHtmlStyleImgStruct &value) {
-  return value.toDynamic();
-}
-#endif
-
 struct EnrichedTextInputViewHtmlStyleOlStruct {
   Float gapWidth{0.0};
   Float marginLeft{0.0};
@@ -459,7 +420,6 @@ struct EnrichedTextInputViewHtmlStyleStruct {
   EnrichedTextInputViewHtmlStyleCodeStruct code{};
   EnrichedTextInputViewHtmlStyleAStruct a{};
   folly::dynamic mention{};
-  EnrichedTextInputViewHtmlStyleImgStruct img{};
   EnrichedTextInputViewHtmlStyleOlStruct ol{};
   EnrichedTextInputViewHtmlStyleUlStruct ul{};
 
@@ -476,7 +436,6 @@ struct EnrichedTextInputViewHtmlStyleStruct {
     result["code"] = ::facebook::react::toDynamic(code);
     result["a"] = ::facebook::react::toDynamic(a);
     result["mention"] = mention;
-    result["img"] = ::facebook::react::toDynamic(img);
     result["ol"] = ::facebook::react::toDynamic(ol);
     result["ul"] = ::facebook::react::toDynamic(ul);
     return result;
@@ -519,10 +478,6 @@ static inline void fromRawValue(const PropsParserContext& context, const RawValu
   if (tmp_mention != map.end()) {
     fromRawValue(context, tmp_mention->second, result.mention);
   }
-  auto tmp_img = map.find("img");
-  if (tmp_img != map.end()) {
-    fromRawValue(context, tmp_img->second, result.img);
-  }
   auto tmp_ol = map.find("ol");
   if (tmp_ol != map.end()) {
     fromRawValue(context, tmp_ol->second, result.ol);
@@ -559,6 +514,7 @@ class EnrichedTextInputViewProps final : public ViewProps {
   SharedColor selectionColor{};
   std::string autoCapitalize{};
   EnrichedTextInputViewHtmlStyleStruct htmlStyle{};
+  bool scrollEnabled{false};
   SharedColor color{};
   Float fontSize{0.0};
   std::string fontFamily{};

package/android/src/main/java/com/swmansion/enriched/EnrichedTextInputView.kt

@@ -29,6 +29,7 @@ import com.facebook.react.views.text.ReactTypefaceUtils.parseFontWeight
 import com.swmansion.enriched.events.MentionHandler
 import com.swmansion.enriched.events.OnInputBlurEvent
 import com.swmansion.enriched.events.OnInputFocusEvent
+import com.swmansion.enriched.spans.EnrichedImageSpan
 import com.swmansion.enriched.spans.EnrichedSpans
 import com.swmansion.enriched.styles.InlineStyles
 import com.swmansion.enriched.styles.ListStyles
@@ -54,12 +55,14 @@ class EnrichedTextInputView : AppCompatEditText {
   val parametrizedStyles: ParametrizedStyles? = ParametrizedStyles(this)
   var isDuringTransaction: Boolean = false
   var isRemovingMany: Boolean = false
+  var scrollEnabled: Boolean = true
 
   val mentionHandler: MentionHandler? = MentionHandler(this)
   var htmlStyle: HtmlStyle = HtmlStyle(this, null)
   var spanWatcher: EnrichedSpanWatcher? = null
   var layoutManager: EnrichedTextInputViewLayoutManager = EnrichedTextInputViewLayoutManager(this)
 
+  var shouldEmitHtml: Boolean = true
   var experimentalSynchronousEvents: Boolean = false
 
   var fontSize: Float? = null
@@ -70,6 +73,8 @@ class EnrichedTextInputView : AppCompatEditText {
   private var fontFamily: String? = null
   private var fontStyle: Int = ReactConstants.UNSET
   private var fontWeight: Int = ReactConstants.UNSET
+  private var defaultValue: CharSequence? = null
+  private var defaultValueDirty: Boolean = false
 
   private var inputMethodManager: InputMethodManager? = null
 
@@ -137,6 +142,14 @@ class EnrichedTextInputView : AppCompatEditText {
     return super.onTouchEvent(ev)
   }
 
+  override fun canScrollVertically(direction: Int): Boolean {
+    return scrollEnabled
+  }
+
+  override fun canScrollHorizontally(direction: Int): Boolean {
+    return scrollEnabled
+  }
+
   override fun onSelectionChanged(selStart: Int, selEnd: Int) {
     super.onSelectionChanged(selStart, selEnd)
     selection?.onSelection(selStart, selEnd)
@@ -243,6 +256,7 @@ class EnrichedTextInputView : AppCompatEditText {
       val newText = parseText(value)
       setText(newText)
 
+      observeAsyncImages()
       // Assign SpanWatcher one more time as our previous spannable has been replaced
       addSpanWatcher(EnrichedSpanWatcher(this))
 
@@ -251,6 +265,20 @@ class EnrichedTextInputView : AppCompatEditText {
     }
   }
 
+  /**
+   * Finds all async images in the current text and sets up listeners
+   * to redraw the text layout when they finish downloading.
+   */
+  private fun observeAsyncImages() {
+    val liveText = text ?: return
+
+    val spans = liveText.getSpans(0, liveText.length, EnrichedImageSpan::class.java)
+
+    for (span in spans) {
+      span.observeAsyncDrawableLoaded(liveText)
+    }
+  }
+
   fun setAutoFocus(autoFocus: Boolean) {
     this.autoFocus = autoFocus
   }
@@ -306,7 +334,7 @@ class EnrichedTextInputView : AppCompatEditText {
 
     // This ensured that newly created spans will take the new font size into account
     htmlStyle.invalidateStyles()
-    layoutManager.invalidateLayout(text)
+    layoutManager.invalidateLayout()
   }
 
   fun setFontFamily(family: String?) {
@@ -360,7 +388,24 @@ class EnrichedTextInputView : AppCompatEditText {
     return false
   }
 
-  fun updateTypeface() {
+  fun afterUpdateTransaction() {
+    updateTypeface()
+    updateDefaultValue()
+  }
+
+  fun setDefaultValue(value: CharSequence?) {
+    defaultValue = value
+    defaultValueDirty = true
+  }
+
+  private fun updateDefaultValue() {
+    if (!defaultValueDirty) return
+
+    defaultValueDirty = false
+    setValue(defaultValue ?: "")
+  }
+
+  private fun updateTypeface() {
     if (!typefaceDirty) return
     typefaceDirty = false
 
@@ -368,7 +413,7 @@ class EnrichedTextInputView : AppCompatEditText {
     typeface = newTypeface
     paint.typeface = newTypeface
 
-    layoutManager.invalidateLayout(text)
+    layoutManager.invalidateLayout()
   }
 
   private fun toggleStyle(name: String) {
@@ -388,7 +433,7 @@ class EnrichedTextInputView : AppCompatEditText {
       else -> Log.w("EnrichedTextInputView", "Unknown style: $name")
     }
 
-    layoutManager.invalidateLayout(text)
+    layoutManager.invalidateLayout()
   }
 
   private fun removeStyle(name: String, start: Int, end: Int): Boolean {
@@ -438,7 +483,7 @@ class EnrichedTextInputView : AppCompatEditText {
   }
 
   private fun verifyStyle(name: String): Boolean {
-    val mergingConfig = EnrichedSpans.mergingConfig[name] ?: return true
+    val mergingConfig = EnrichedSpans.getMergingConfigForStyle(name, htmlStyle) ?: return true
     val conflictingStyles = mergingConfig.conflictingStyles
     val blockingStyles = mergingConfig.blockingStyles
     val isEnabling = spanState?.getStart(name) == null
@@ -499,11 +544,12 @@ class EnrichedTextInputView : AppCompatEditText {
     parametrizedStyles?.setLinkSpan(start, end, text, url)
   }
 
-  fun addImage(src: String) {
+  fun addImage(src: String, width: Float, height: Float) {
     val isValid = verifyStyle(EnrichedSpans.IMAGE)
     if (!isValid) return
 
-    parametrizedStyles?.setImageSpan(src)
+    parametrizedStyles?.setImageSpan(src, width, height)
+    layoutManager.invalidateLayout()
   }
 
   fun startMention(indicator: String) {
@@ -542,11 +588,6 @@ class EnrichedTextInputView : AppCompatEditText {
     didAttachToWindow = true
   }
 
-  override fun onDetachedFromWindow() {
-    layoutManager.cleanup()
-    super.onDetachedFromWindow()
-  }
-
   companion object {
     const val CLIPBOARD_TAG = "react-native-enriched-clipboard"
   }

package/android/src/main/java/com/swmansion/enriched/EnrichedTextInputViewLayoutManager.kt

@@ -1,24 +1,16 @@
 package com.swmansion.enriched
 
-import android.graphics.text.LineBreaker
-import android.os.Build
-import android.text.Editable
-import android.text.StaticLayout
 import com.facebook.react.bridge.Arguments
-import com.facebook.react.uimanager.PixelUtil
 
 class EnrichedTextInputViewLayoutManager(private val view: EnrichedTextInputView) {
-  private var cachedSize: Pair<Float, Float> = Pair(0f, 0f)
-  private var cachedYogaWidth: Float = 0f
   private var forceHeightRecalculationCounter: Int = 0
 
-  fun cleanup() {
-    forceHeightRecalculationCounter = 0
-  }
+  fun invalidateLayout() {
+    val text = view.text
+    val paint = view.paint
 
-  // Update shadow node's state in order to recalculate layout
-  fun invalidateLayout(text: Editable?) {
-    measureSize(text ?: "")
+    val needUpdate = MeasurementStore.store(view.id, text, paint)
+    if (!needUpdate) return
 
     val counter = forceHeightRecalculationCounter
     forceHeightRecalculationCounter++
@@ -27,48 +19,7 @@ class EnrichedTextInputViewLayoutManager(private val view: EnrichedTextInputView
     view.stateWrapper?.updateState(state)
   }
 
-  fun getMeasuredSize(maxWidth: Float): Pair<Float, Float> {
-    if (maxWidth == cachedYogaWidth) {
-      return cachedSize
-    }
-
-    val text = view.text ?: ""
-    val result = measureAndCacheSize(text, maxWidth)
-    cachedYogaWidth = maxWidth
-    return result
-  }
-
-  fun measureSize(text: CharSequence): Pair<Float, Float> {
-    return measureAndCacheSize(text, cachedYogaWidth)
-  }
-
-  private fun measureAndCacheSize(text: CharSequence, maxWidth: Float): Pair<Float, Float> {
-    val result = measureSize(text, maxWidth)
-    cachedSize = result
-    return result
-  }
-
-  private fun measureSize(text: CharSequence, maxWidth: Float): Pair<Float, Float> {
-    val paint = view.paint
-    val textLength = text.length
-
-    val builder = StaticLayout.Builder
-      .obtain(text, 0, textLength, paint, maxWidth.toInt())
-      .setIncludePad(true)
-      .setLineSpacing(0f, 1f)
-
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-      builder.setBreakStrategy(LineBreaker.BREAK_STRATEGY_HIGH_QUALITY)
-    }
-
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
-      builder.setUseLineSpacingFromFallbacks(true)
-    }
-
-    val staticLayout = builder.build()
-    val heightInSP = PixelUtil.toDIPFromPixel(staticLayout.height.toFloat())
-    val widthInSP = PixelUtil.toDIPFromPixel(maxWidth)
-
-    return Pair(widthInSP, heightInSP)
+  fun releaseMeasurementStore() {
+    MeasurementStore.release(view.id)
   }
 }

package/android/src/main/java/com/swmansion/enriched/EnrichedTextInputViewManager.kt

@@ -15,7 +15,6 @@ import com.facebook.react.uimanager.annotations.ReactProp
 import com.facebook.react.viewmanagers.EnrichedTextInputViewManagerDelegate
 import com.facebook.react.viewmanagers.EnrichedTextInputViewManagerInterface
 import com.facebook.yoga.YogaMeasureMode
-import com.facebook.yoga.YogaMeasureOutput
 import com.swmansion.enriched.events.OnInputBlurEvent
 import com.swmansion.enriched.events.OnChangeHtmlEvent
 import com.swmansion.enriched.events.OnChangeSelectionEvent
@@ -32,12 +31,8 @@ import com.swmansion.enriched.utils.jsonStringToStringMap
 @ReactModule(name = EnrichedTextInputViewManager.NAME)
 class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
   EnrichedTextInputViewManagerInterface<EnrichedTextInputView> {
-  private val mDelegate: ViewManagerDelegate<EnrichedTextInputView>
-  private var view: EnrichedTextInputView? = null
-
-  init {
-    mDelegate = EnrichedTextInputViewManagerDelegate(this)
-  }
+  private val mDelegate: ViewManagerDelegate<EnrichedTextInputView> =
+    EnrichedTextInputViewManagerDelegate(this)
 
   override fun getDelegate(): ViewManagerDelegate<EnrichedTextInputView>? {
     return mDelegate
@@ -48,10 +43,12 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
   }
 
   public override fun createViewInstance(context: ThemedReactContext): EnrichedTextInputView {
-    val view = EnrichedTextInputView(context)
-    this.view = view
+    return EnrichedTextInputView(context)
+  }
 
-    return view
+  override fun onDropViewInstance(view: EnrichedTextInputView) {
+    super.onDropViewInstance(view)
+    view.layoutManager.releaseMeasurementStore()
   }
 
   override fun updateState(
@@ -80,7 +77,7 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
 
   @ReactProp(name = "defaultValue")
   override fun setDefaultValue(view: EnrichedTextInputView?, value: String?) {
-    view?.setValue(value)
+    view?.setDefaultValue(value)
   }
 
   @ReactProp(name = "placeholder")
@@ -157,9 +154,14 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
     view?.setFontStyle(style)
   }
 
+  @ReactProp(name = "scrollEnabled")
+  override fun setScrollEnabled(view: EnrichedTextInputView, scrollEnabled: Boolean) {
+    view.scrollEnabled = scrollEnabled
+  }
+
   override fun onAfterUpdateTransaction(view: EnrichedTextInputView) {
     super.onAfterUpdateTransaction(view)
-    view.updateTypeface()
+    view.afterUpdateTransaction()
   }
 
   override fun setPadding(
@@ -175,7 +177,7 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
   }
 
   override fun setIsOnChangeHtmlSet(view: EnrichedTextInputView?, value: Boolean) {
-    // this prop isn't used on Android as of now, but the setter must be present
+    view?.shouldEmitHtml = value
   }
 
   override fun setAutoCapitalize(view: EnrichedTextInputView?, flag: String?) {
@@ -253,8 +255,8 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
     view?.addLink(start, end, text, url)
   }
 
-  override fun addImage(view: EnrichedTextInputView?, src: String) {
-    view?.addImage(src)
+  override fun addImage(view: EnrichedTextInputView?, src: String, width: Float, height: Float) {
+    view?.addImage(src, width, height)
   }
 
   override fun startMention(view: EnrichedTextInputView?, indicator: String) {
@@ -277,13 +279,8 @@ class EnrichedTextInputViewManager : SimpleViewManager<EnrichedTextInputView>(),
     heightMode: YogaMeasureMode?,
     attachmentsPositions: FloatArray?
   ): Long {
-    val size = this.view?.layoutManager?.getMeasuredSize(width)
-
-    if (size != null) {
-      return YogaMeasureOutput.make(size.first, size.second)
-    }
-
-    return YogaMeasureOutput.make(0, 0)
+    val id = localData?.getInt("viewTag")
+    return MeasurementStore.getMeasureById(context, id, width, props)
   }
 
   companion object {

package/android/src/main/java/com/swmansion/enriched/EnrichedTextInputViewPackage.kt

@@ -4,10 +4,12 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ViewManager
+import com.swmansion.enriched.utils.ResourceManager
 import java.util.ArrayList
 
 class EnrichedTextInputViewPackage : ReactPackage {
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    ResourceManager.init(reactContext.applicationContext)
     val viewManagers: MutableList<ViewManager<*, *>> = ArrayList()
     viewManagers.add(EnrichedTextInputViewManager())
     return viewManagers

package/android/src/main/java/com/swmansion/enriched/MeasurementStore.kt

@@ -0,0 +1,158 @@
+package com.swmansion.enriched
+
+import android.content.Context
+import android.graphics.Typeface
+import android.graphics.text.LineBreaker
+import android.os.Build
+import android.text.Spannable
+import android.text.StaticLayout
+import android.text.TextPaint
+import android.util.Log
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.views.text.ReactTypefaceUtils.applyStyles
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontStyle
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontWeight
+import com.facebook.yoga.YogaMeasureOutput
+import com.swmansion.enriched.styles.HtmlStyle
+import com.swmansion.enriched.utils.EnrichedParser
+import java.util.concurrent.ConcurrentHashMap
+import kotlin.math.ceil
+
+object MeasurementStore {
+  data class PaintParams(
+    val typeface: Typeface,
+    val fontSize: Float,
+  )
+
+  data class MeasurementParams(
+    val initialized: Boolean,
+
+    val cachedWidth: Float,
+    val cachedSize: Long,
+
+    val spannable: CharSequence?,
+    val paintParams: PaintParams,
+  )
+
+  private val data = ConcurrentHashMap<Int, MeasurementParams>()
+
+  fun store(id: Int, spannable: Spannable?, paint: TextPaint): Boolean {
+    val cachedWidth = data[id]?.cachedWidth ?: 0f
+    val cachedSize = data[id]?.cachedSize ?: 0L
+    val initialized = data[id]?.initialized ?: true
+
+    val size = measure(cachedWidth, spannable, paint)
+    val paintParams = PaintParams(paint.typeface, paint.textSize)
+
+    data[id] = MeasurementParams(initialized, cachedWidth, size, spannable, paintParams)
+    return cachedSize != size
+  }
+
+  fun release(id: Int) {
+    data.remove(id)
+  }
+
+  private fun measure(maxWidth: Float, spannable: CharSequence?, paintParams: PaintParams): Long {
+    val paint = TextPaint().apply {
+      typeface = paintParams.typeface
+      textSize = paintParams.fontSize
+    }
+
+    return measure(maxWidth, spannable, paint)
+  }
+
+  private fun measure(maxWidth: Float, spannable: CharSequence?, paint: TextPaint): Long {
+    val text = spannable ?: ""
+    val textLength = text.length
+    val builder = StaticLayout.Builder
+      .obtain(text, 0, textLength, paint, maxWidth.toInt())
+      .setIncludePad(true)
+      .setLineSpacing(0f, 1f)
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+      builder.setBreakStrategy(LineBreaker.BREAK_STRATEGY_HIGH_QUALITY)
+    }
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+      builder.setUseLineSpacingFromFallbacks(true)
+    }
+
+    val staticLayout = builder.build()
+    val heightInSP = PixelUtil.toDIPFromPixel(staticLayout.height.toFloat())
+    val widthInSP = PixelUtil.toDIPFromPixel(maxWidth)
+    return YogaMeasureOutput.make(widthInSP, heightInSP)
+  }
+
+  // Returns either: Spannable parsed from HTML defaultValue, or plain text defaultValue, or "I" if no defaultValue
+  private fun getInitialText(defaultView: EnrichedTextInputView, props: ReadableMap?): CharSequence {
+    val defaultValue = props?.getString("defaultValue")
+
+    // If there is no default value, assume text is one line, "I" is a good approximation of height
+    if (defaultValue == null) return "I"
+
+    val isHtml = defaultValue.startsWith("<html>") && defaultValue.endsWith("</html>")
+    if (!isHtml) return defaultValue
+
+    try {
+      val htmlStyle = HtmlStyle(defaultView, props.getMap("htmlStyle"))
+      val parsed = EnrichedParser.fromHtml(defaultValue, htmlStyle, null)
+      return parsed.trimEnd('\n')
+    } catch (e: Exception) {
+      Log.w("MeasurementStore", "Error parsing initial HTML text: ${e.message}")
+      return defaultValue
+    }
+  }
+
+  private fun getInitialFontSize(defaultView: EnrichedTextInputView, props: ReadableMap?): Float {
+    val propsFontSize = props?.getDouble("fontSize")?.toFloat()
+    if (propsFontSize == null) return defaultView.textSize
+
+    return ceil(PixelUtil.toPixelFromSP(propsFontSize))
+  }
+
+  // Called when view measurements are not available in the store
+  // Most likely first measurement, we can use defaultValue, as no native state is set yet
+  private fun initialMeasure(context: Context, id: Int?, width: Float, props: ReadableMap?): Long {
+    val defaultView = EnrichedTextInputView(context)
+
+    val text = getInitialText(defaultView, props)
+    val fontSize = getInitialFontSize(defaultView, props)
+
+    val fontFamily = props?.getString("fontFamily")
+    val fontStyle = parseFontStyle(props?.getString("fontStyle"))
+    val fontWeight = parseFontWeight(props?.getString("fontWeight"))
+
+    val typeface = applyStyles(defaultView.typeface, fontStyle, fontWeight, fontFamily, context.assets)
+    val paintParams = PaintParams(typeface, fontSize)
+    val size = measure(width, text, PaintParams(typeface, fontSize))
+
+    if (id != null) {
+      data[id] = MeasurementParams(true, width, size, text, paintParams)
+    }
+
+    return size
+  }
+
+  fun getMeasureById(context: Context, id: Int?, width: Float, props: ReadableMap?): Long {
+    val id = id ?: return initialMeasure(context, id, width, props)
+    val value = data[id] ?: return initialMeasure(context, id, width, props)
+
+    // First measure has to be done using initialMeasure
+    // That way it's free of any side effects and async initializations
+    if (!value.initialized) return initialMeasure(context, id, width, props)
+
+    if (width == value.cachedWidth) {
+      return value.cachedSize
+    }
+
+    val paint = TextPaint().apply {
+      typeface = value.paintParams.typeface
+      textSize = value.paintParams.fontSize
+    }
+
+    val size = measure(width, value.spannable, paint)
+    data[id] = MeasurementParams(true, width, size, value.spannable, value.paintParams)
+    return size
+  }
+}