feat: add foreground color style by IvanIhnatsiuk · Pull Request #266 · software-mansion/react-native-enriched

IvanIhnatsiuk · 2025-11-19T22:28:01Z

Summary

In this PR, I added foreground color style support for iOS. Currently, it allows changing color in any kind of style, and it uses the font tag to identify colored parts of attributed text from HTML. To track color in already colored styles, we need to check that the current location is in this style and the color is not the same as the configured one.

Also, I'm not sure about the onSelectionColor event, do we need to run it only when we're in the color style, or would it be better to do it always?

Test Plan

Open an app
Try to add any colored text
Check the HTML output

Screenshots / Videos

Screen.Recording.2025-11-19.at.23.18.54.mov

Include any visual proof that helps reviewers understand the change — UI updates, bug reproduction or the result of the fix.

Compatibility

OS	Implemented
iOS	✅
Android	✅

szydlovsky · 2025-11-24T10:15:07Z

Hey @IvanIhnatsiuk, it's super nice to get such verbose contribution from the community! While the feature is potentially interesting for us we cannot really proceed with it for now; we want the API and new features to be working on both mobile platforms from the get-go. Either way, great work!

exploIF

I've added couple general comments. iOS part is still not reviewed.

Our main goal currently is to have consistent behavior and functionality between platforms. So I'm afraid we won't be able to ship that until Android part is implemented.
However, if this feature is something that community would like to see, we may consider implementing Android part ourselves

exploIF · 2025-12-05T12:57:13Z

android/src/main/new_arch/CMakeLists.txt

Those changes seems completely unrelated to PR scope

exploIF · 2025-12-05T12:57:31Z

.gitignore

Redundant change

exploIF · 2025-12-05T12:58:02Z

example/react-native.config.js

Same here, let's keep this comment

exploIF · 2025-12-05T13:01:25Z

example/src/components/ColorPreview.tsx

+  color: string;
+};
+
+const ColorPreview: React.FC<Props> = ({ color }) => {


As a convention, we do not rely on global variables. so FC should be imported from React

exploIF · 2025-12-05T13:02:12Z

example/src/components/ColorPreview.tsx

+  },
+});
+
+export default ColorPreview;


As a convention, we use named exports

exploIF · 2025-12-05T13:03:14Z

example/src/components/ToolbarColorButton.tsx

+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      { backgroundColor: isActive ? color : 'rgba(0, 26, 114, 0.8)' },
+    ],
+    [isActive, color]
+  );


useMemo seems redundant here, it's simple computation

I added this because of the warning about inline styles.

useMemo is useful here because it is an array that will create a new reference each time it is re-rendered and cause re-rendering in child components. Ideally, all values that are callbacks, arrays and objects should be wrapped with useCallback/useMemo if you are not using react-compiler (sometimes even if you are using it).

Component is relatively simple, there is nothing wrong with re-renders if they are cheap (I believe this one is not complex at all). Any memoization method shouldn't be overused, it comes with a cost, and in this scenario can be avoided.

Also, you are not memoizing styles in ColorPreview, and there is no need to do that here

As I mentioned earlier, I added it to suppress the warning about the built-in style 🙂

In ColorPreview, I didn't get this warning, so I just ignored this case since it's a project example 🙂 . However, in real projects, it's better to wrap all reference props in a memo/useMemo/useCallback.

Let's say you've updated the state in some component that passes styles as an array of styles in a View(generated, of course, during rendering). This array of styles must be pre-processed each time before sending styles to the native side (flattening, colour processing, marginHorizontal, etc.). It then calls C++(new arch) or serializes(old arch) this data and calls native methods that update the styles, but the styles remain the same.

exploIF · 2025-12-05T13:03:50Z

package.json

Out of scope change

exploIF · 2025-12-05T13:05:19Z

src/EnrichedTextInputNativeComponent.ts

    text: string,
    payload: string
  ) => void;
+  toggleColor: (


I think it should be rather called setColor, as we are explicitly passing color that should be used. We use toggle for two state styles (which is either enabled or disabled)

IvanIhnatsiuk · 2026-01-13T08:54:36Z

@exploIF @szydlovsky kind reminder 🙂

exploIF · 2026-01-13T13:05:05Z

As we discussed, let's hold on with this PR for a while. It may potentially introduce regression on iOS, we are also thinking about using different - more flexible API. Once we solve current iOS implementation limitations we can come back to this one

nathan-hadley · 2026-02-13T17:01:58Z

Just wanted to add a voice from the community here — foreground color styling is a must-have for our use case, and the lack of it is the main reason we haven't been able to adopt react-native-enriched yet. Great to see that @IvanIhnatsiuk has added Android support too — we would need both platforms. Let me know if there is anything we can do to help.

IvanIhnatsiuk changed the title ~~feat: add foreground color style for iOS~~ feat: add foreground color style on iOS Nov 20, 2025

IvanIhnatsiuk force-pushed the feat/foreground-color-style-for-iOS branch 2 times, most recently from 2605503 to e3133c6 Compare November 27, 2025 09:59

IvanIhnatsiuk force-pushed the feat/foreground-color-style-for-iOS branch from 910ce22 to cae71fd Compare December 2, 2025 11:01

exploIF requested changes Dec 5, 2025

View reviewed changes

IvanIhnatsiuk force-pushed the feat/foreground-color-style-for-iOS branch 2 times, most recently from 83c7f25 to 7e1cbde Compare December 5, 2025 22:20

IvanIhnatsiuk force-pushed the feat/foreground-color-style-for-iOS branch from 606218a to 1b9b225 Compare January 13, 2026 00:15

IvanIhnatsiuk added 11 commits January 13, 2026 01:47

feat: add foreground color style for iOS

8272e25

fix: remove unused file

4a1814c

fix: rebase with latest main

e0b99b8

fix: add setColor and removeColor methods

4ecf7af

fix: build on iOS

d4dd655

fix: use removeColor method

ff2502b

fix: remove useMemo

720c40c

fix: properly handle new colours in parser

ca7a0a3

fix: rebase with latest main

9a8de53

feat: add colored style on android

af1c209

fix: rebase with latest main

66e09a2

IvanIhnatsiuk force-pushed the feat/foreground-color-style-for-iOS branch from 300f1e1 to 66e09a2 Compare January 13, 2026 00:56

IvanIhnatsiuk changed the title ~~feat: add foreground color style on iOS~~ feat: add foreground color style Jan 13, 2026

fix: update onChangeStateDeprecated

8f55ffe

Conversation

IvanIhnatsiuk commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test Plan

Screenshots / Videos

Compatibility

Uh oh!

szydlovsky commented Nov 24, 2025

Uh oh!

exploIF left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

IvanIhnatsiuk Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

IvanIhnatsiuk commented Jan 13, 2026

Uh oh!

exploIF commented Jan 13, 2026

Uh oh!

nathan-hadley commented Feb 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

IvanIhnatsiuk commented Nov 19, 2025 •

edited

Loading

IvanIhnatsiuk Dec 5, 2025 •

edited

Loading