feat: android - allow setting up value imperatively (#42)

exploIF · web-flow · commit 66669c6715f1 · 2025-05-22T13:28:59.000+02:00
diff --git a/android/src/main/java/com/swmansion/reactnativerichtexteditor/ReactNativeRichTextEditorView.kt b/android/src/main/java/com/swmansion/reactnativerichtexteditor/ReactNativeRichTextEditorView.kt
@@ -44,7 +44,7 @@ class ReactNativeRichTextEditorView : AppCompatEditText {
   val paragraphStyles: ParagraphStyles? = ParagraphStyles(this)
   val listStyles: ListStyles? = ListStyles(this)
   val parametrizedStyles: ParametrizedStyles? = ParametrizedStyles(this)
-  var isSettingDefaultValue: Boolean = false
+  var isSettingValue: Boolean = false
 
   var linkHandler: LinkHandler? = LinkHandler(this)
   val mentionHandler: MentionHandler? = MentionHandler(this)
@@ -144,9 +144,9 @@ class ReactNativeRichTextEditorView : AppCompatEditText {
     setSelection(selection?.start ?: text?.length ?: 0)
   }
 
-  fun setDefaultValue(value: String?) {
+  fun setValue(value: String?) {
     if (value == null) return
-    isSettingDefaultValue = true
+    isSettingValue = true
 
     val isHtml = value.startsWith("<html>") && value.endsWith("</html>")
     if (isHtml) {
@@ -162,7 +162,7 @@ class ReactNativeRichTextEditorView : AppCompatEditText {
     // Scroll to the last line of text
     setSelection(text?.length ?: 0)
 
-    isSettingDefaultValue = false
+    isSettingValue = false
   }
 
   fun setAutoFocus(autoFocus: Boolean) {
diff --git a/android/src/main/java/com/swmansion/reactnativerichtexteditor/ReactNativeRichTextEditorViewManager.kt b/android/src/main/java/com/swmansion/reactnativerichtexteditor/ReactNativeRichTextEditorViewManager.kt
@@ -74,7 +74,7 @@ class ReactNativeRichTextEditorViewManager : SimpleViewManager<ReactNativeRichTe
 
   @ReactProp(name = "defaultValue")
   override fun setDefaultValue(view: ReactNativeRichTextEditorView?, value: String?) {
-    view?.setDefaultValue(value)
+    view?.setValue(value)
   }
 
   @ReactProp(name = "placeholder")
@@ -171,6 +171,10 @@ class ReactNativeRichTextEditorViewManager : SimpleViewManager<ReactNativeRichTe
     view?.clearFocus()
   }
 
+  override fun setValue(view: ReactNativeRichTextEditorView?, text: String) {
+    view?.setValue(text)
+  }
+
   override fun toggleBold(view: ReactNativeRichTextEditorView?) {
     view?.verifyAndToggleStyle(EditorSpans.BOLD)
   }
diff --git a/android/src/main/java/com/swmansion/reactnativerichtexteditor/watchers/EditorTextWatcher.kt b/android/src/main/java/com/swmansion/reactnativerichtexteditor/watchers/EditorTextWatcher.kt
@@ -22,7 +22,7 @@ class EditorTextWatcher(private val editorView: ReactNativeRichTextEditorView) :
   }
 
   override fun afterTextChanged(s: Editable?) {
-    if (s == null || editorView.isSettingDefaultValue) return
+    if (s == null || editorView.isSettingValue) return
 
     emitEvent(s)
     applyStyles(s)
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -101,6 +101,10 @@ export default function App() {
     ref.current?.blur();
   };
 
+  const handleSetValue = () => {
+    ref.current?.setValue('<html><b>Hello</b> <i>world</i></html>');
+  };
+
   const openLinkModal = () => {
     setIsLinkModalOpen(true);
   };
@@ -196,6 +200,7 @@ export default function App() {
         />
         <Button title="Focus" onPress={handleFocus} />
         <Button title="Blur" onPress={handleBlur} />
+        <Button title="Set value" onPress={handleSetValue} />
         {DEBUG_SCROLLABLE && <View style={styles.scrollPlaceholder} />}
       </ScrollView>
       <LinkModal
diff --git a/src/ReactNativeRichTextEditorViewNativeComponent.ts b/src/ReactNativeRichTextEditorViewNativeComponent.ts
@@ -87,6 +87,7 @@ interface NativeCommands {
   // General commands
   focus: (viewRef: React.ElementRef<ComponentType>) => void;
   blur: (viewRef: React.ElementRef<ComponentType>) => void;
+  setValue: (viewRef: React.ElementRef<ComponentType>, text: string) => void;
 
   // Text formatting commands
   toggleBold: (viewRef: React.ElementRef<ComponentType>) => void;
@@ -124,6 +125,7 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
     // General commands
     'focus',
     'blur',
+    'setValue',
 
     // Text formatting commands
     'toggleBold',
diff --git a/src/RichTextInput.tsx b/src/RichTextInput.tsx
@@ -32,6 +32,7 @@ export interface RichTextInputInstance extends NativeMethods {
   // General commands
   focus: () => void;
   blur: () => void;
+  setValue: (value: string) => void;
 
   // Text formatting commands
   toggleBold: () => void;
@@ -146,6 +147,9 @@ export const RichTextInput = ({
     blur: () => {
       Commands.blur(nullthrows(nativeRef.current));
     },
+    setValue: (value: string) => {
+      Commands.setValue(nullthrows(nativeRef.current), value);
+    },
     toggleBold: () => {
       Commands.toggleBold(nullthrows(nativeRef.current));
     },

Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,7 @@ class ReactNativeRichTextEditorViewManager : SimpleViewManager<ReactNativeRichTe`
`74`	`74`
`75`	`75`	`@ReactProp(name = "defaultValue")`
`76`	`76`	`override fun setDefaultValue(view: ReactNativeRichTextEditorView?, value: String?) {`
`77`		`- view?.setDefaultValue(value)`
	`77`	`+ view?.setValue(value)`
`78`	`78`	`}`
`79`	`79`
`80`	`80`	`@ReactProp(name = "placeholder")`
`@@ -171,6 +171,10 @@ class ReactNativeRichTextEditorViewManager : SimpleViewManager<ReactNativeRichTe`
`171`	`171`	`view?.clearFocus()`
`172`	`172`	`}`
`173`	`173`
	`174`	`+ override fun setValue(view: ReactNativeRichTextEditorView?, text: String) {`
	`175`	`+ view?.setValue(text)`
	`176`	`+ }`
	`177`	`+`
`174`	`178`	`override fun toggleBold(view: ReactNativeRichTextEditorView?) {`
`175`	`179`	`view?.verifyAndToggleStyle(EditorSpans.BOLD)`
`176`	`180`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ class EditorTextWatcher(private val editorView: ReactNativeRichTextEditorView) :`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`override fun afterTextChanged(s: Editable?) {`
`25`		`- if (s == null \|\| editorView.isSettingDefaultValue) return`
	`25`	`+ if (s == null \|\| editorView.isSettingValue) return`
`26`	`26`
`27`	`27`	`emitEvent(s)`
`28`	`28`	`applyStyles(s)`