software-mansion · kacperzolkiewski · Jun 16, 2026 · Jun 16, 2026 · Jun 16, 2026 · Jun 17, 2026
diff --git a/.maestro/enrichedInput/flows/custom_style_colors_visual.yaml b/.maestro/enrichedInput/flows/custom_style_colors_visual.yaml
@@ -0,0 +1,118 @@
+appId: swmansion.enriched.example
+---
+# Validates custom colors on plain text, inline styles, and paragraph styles.
+- launchApp
+
+- tapOn:
+    id: 'toggle-screen-button'
+
+- tapOn:
+    id: 'editor-input'
+
+# Section 1: Plain text with colors
+
+- tapOn:
+    id: 'toolbar-text-color'
+- tapOn:
+    id: 'color-swatch-FF0000'
+- inputText: 'Red text'
+- tapOn:
+    id: 'toolbar-text-color'
+- tapOn:
+    id: 'color-swatch-clear'
+- inputText: ' '
+
+- tapOn:
+    id: 'toolbar-bg-color'
+- tapOn:
+    id: 'color-swatch-FFFF00'
+- inputText: 'Yellow back'
+- tapOn:
+    id: 'toolbar-bg-color'
+- tapOn:
+    id: 'color-swatch-clear'
+- inputText: ' '
+
+- tapOn:
+    id: 'toolbar-text-color'
+- tapOn:
+    id: 'color-swatch-FF0000'
+- tapOn:
+    id: 'toolbar-bg-color'
+- tapOn:
+    id: 'color-swatch-FFFF00'
+- inputText: 'Red+Yellow'
+- tapOn:
+    id: 'toolbar-text-color'
+- tapOn:
+    id: 'color-swatch-clear'
+- tapOn:
+    id: 'toolbar-bg-color'
+- tapOn:
+    id: 'color-swatch-clear'
+- inputText: ' '
+
+# Section 2: Inline styles + color
+
+- tapOn:
+    id: 'toolbar-bold'
+- tapOn:
+    id: 'toolbar-text-color'
+- tapOn:
+    id: 'color-swatch-FF0000'
+- inputText: 'Bold red'
+- tapOn:
+    id: 'toolbar-bold'
+- tapOn:
+    id: 'toolbar-text-color'
+- tapOn:
+    id: 'color-swatch-clear'
+- inputText: ' '
+
+- tapOn:
+    id: 'toolbar-italic'
+- tapOn:
+    id: 'toolbar-bg-color'
+- tapOn:
+    id: 'color-swatch-FFFF00'
+- inputText: 'Italic yellow back'
+- tapOn:
+    id: 'toolbar-italic'
+- tapOn:
+    id: 'toolbar-bg-color'
+- tapOn:
+    id: 'color-swatch-clear'
+- inputText: ' '
+- pressKey: Enter
+
+# Section 3: Paragraph styles + color
+
+- tapOn:
+    id: 'toolbar-heading-5'
+- tapOn:
+    id: 'toolbar-text-color'
+- tapOn:
+    id: 'color-swatch-FF0000'
+- inputText: 'H5 red'
+- pressKey: Enter
+- tapOn:
+    id: 'toolbar-text-color'
+- tapOn:
+    id: 'color-swatch-clear'
+
+- tapOn:
+    id: 'toolbar-quote'
+- tapOn:
+    id: 'toolbar-bg-color'
+- tapOn:
+    id: 'color-swatch-FFFF00'
+- inputText: 'Quote yellow back'
+- tapOn:
+    id: 'toolbar-bg-color'
+- tapOn:
+    id: 'color-swatch-clear'
+
+- runFlow:
+    file: '../subflows/capture_or_assert_screenshot.yaml'
+    env:
+      SCREENSHOT_NAME: 'custom_style_colors'
diff --git a/.maestro/enrichedInput/screenshots/ios/custom_style_colors.png b/.maestro/enrichedInput/screenshots/ios/custom_style_colors.png
diff --git a/...stro/enrichedInput/screenshots/ios/mention_popup_closing_on_cursor_travel_1.png b/...stro/enrichedInput/screenshots/ios/mention_popup_closing_on_cursor_travel_1.png
diff --git a/...stro/enrichedInput/screenshots/ios/mention_popup_closing_on_cursor_travel_2.png b/...stro/enrichedInput/screenshots/ios/mention_popup_closing_on_cursor_travel_2.png
diff --git a/...stro/enrichedInput/screenshots/ios/mention_popup_closing_on_cursor_travel_3.png b/...stro/enrichedInput/screenshots/ios/mention_popup_closing_on_cursor_travel_3.png
diff --git a/.maestro/enrichedText/flows/custom_style_colors_visual.yaml b/.maestro/enrichedText/flows/custom_style_colors_visual.yaml
@@ -0,0 +1,28 @@
+appId: swmansion.enriched.example
+---
+# Validates that custom style colors are displayed correctly
+- launchApp
+
+- tapOn:
+    id: 'toggle-screen-button'
+
+- tapOn:
+    id: 'toggle-enriched-text-screen-button'
+
+- runFlow:
+    file: '../subflows/set_enriched_text_value.yaml'
+    env:
+      VALUE: >
+        <html>
+          <p><span style="color: #FF5733;">Standard 6-digit Hex text</span></p>
+          <p><span style="background-color: #000000; color: #FFFFFF;">White text on black background</span></p>
+          <p><span style="background-color: #00FF0040;">25% transparent green background</span></p>
+          <p><span style="color: #0000FF80;">50% transparent blue text</span></p>
+          <p><span style="color: #F00;">Red 3-digit shorthand text</span></p>
+          <h6><span style="background-color: #0F0; color: #000;">Black text on green</span></h6>
+        </html>
+
+- runFlow:
+    file: '../subflows/capture_or_assert_screenshot.yaml'
+    env:
+      SCREENSHOT_NAME: 'custom_style_colors_visual'
diff --git a/.maestro/enrichedText/screenshots/ios/custom_style_colors_visual.png b/.maestro/enrichedText/screenshots/ios/custom_style_colors_visual.png
diff --git a/android/src/main/java/com/swmansion/enriched/textinput/EnrichedTextInputViewManager.kt b/android/src/main/java/com/swmansion/enriched/textinput/EnrichedTextInputViewManager.kt
@@ -479,6 +479,13 @@ class EnrichedTextInputViewManager :
     view?.setTextAlignment(alignment)
   }
 
+  override fun setStyle(
+    view: EnrichedTextInputView?,
+    styleJSON: String,
+  ) {
+    // TODO: Implement
+  }
+
   override fun measure(
     context: Context,
     localData: ReadableMap?,

diff --git a/apps/example/ios/Podfile.lock b/apps/example/ios/Podfile.lock
@@ -2108,7 +2108,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   FBLazyVector: b3e7ad108f0d882e30445c5527d774e3fd432f3d
-  hermes-engine: 78997c9592858f3aeaacad4f0062cd700ba8dda2
+  hermes-engine: 03c4f027614fa33388949bb373cbf7a4892b8e5f
   RCTDeprecation: 2a74a2c57675e64419bd89078efde81f7c1de90b
   RCTRequired: 30451112e6fef4e6f31b4e7eee0845156e35e4b0
   RCTSwiftUI: 5aaf0b07e747ba749dc6acc94d8bd41eea4b570f

diff --git a/apps/example/src/components/ColorPickerRow.tsx b/apps/example/src/components/ColorPickerRow.tsx
@@ -0,0 +1,92 @@
+import { type FC } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text } from 'react-native';
+
+interface Props {
+  colors: string[];
+  activeColor: string;
+  onSelectColor: (color: string) => void;
+  onClear: () => void;
+}
+
+export const ColorPickerRow: FC<Props> = ({
+  colors,
+  activeColor,
+  onSelectColor,
+  onClear,
+}) => {
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={styles.container}
+      contentContainerStyle={styles.content}
+    >
+      <Pressable
+        testID="color-swatch-clear"
+        style={styles.clearButton}
+        onPress={onClear}
+      >
+        <Text style={styles.clearText}>✕</Text>
+      </Pressable>
+      {colors.map((color) => {
+        const isActive = color.toLowerCase() === activeColor?.toLowerCase();
+        const swatchId = `color-swatch-${color.replace('#', '').toUpperCase()}`;
+        return (
+          <Pressable
+            key={color}
+            testID={swatchId}
+            onPress={() => onSelectColor(color)}
+            style={[
+              styles.swatch,
+              { backgroundColor: color },
+              isActive && styles.swatchActive,
+              color === '#FFFFFF' && styles.swatchBordered,
+            ]}
+          />
+        );
+      })}
+    </ScrollView>
+  );
+};
+
+const SWATCH_SIZE = 28;
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    backgroundColor: 'rgba(0, 26, 114, 0.9)',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    gap: 8,
+  },
+  clearButton: {
+    width: SWATCH_SIZE,
+    height: SWATCH_SIZE,
+    borderRadius: SWATCH_SIZE / 2,
+    backgroundColor: 'rgba(255,255,255,0.15)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  clearText: {
+    color: 'white',
+    fontSize: 14,
+    lineHeight: 16,
+  },
+  swatch: {
+    width: SWATCH_SIZE,
+    height: SWATCH_SIZE,
+    borderRadius: SWATCH_SIZE / 2,
+  },
+  swatchActive: {
+    borderWidth: 3,
+    borderColor: 'white',
+  },
+  swatchBordered: {
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.25)',
+  },
+});