diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 93f0e8cb..f1ef615b 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -2690,9 +2690,9 @@ SPEC CHECKSUMS:
ReactAppDependencyProvider: 77a7129540c0e06ab6be9a2bcb887d3d2e594431
ReactCodegen: b62625187ce853918021a7a9178cc406e9820d56
ReactCommon: d07170f92e0e853091a70b2741b7c43f5dfdea73
- ReactNativeEnriched: b11d66700889cd36c9938a825736de1929349b24
+ ReactNativeEnriched: ce7a893fdefce993826a3177da6811b513e26526
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
- Yoga: 6af5d1e0290903c82b3e0cb6836a5f898c1c4634
+ Yoga: 47264cc34431da6b66b3687348be283084924f46
PODFILE CHECKSUM: 1b876ae6d1ea0597d954f2089c1213dd3ade28bc
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 3b514eed..48a164f3 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -4,6 +4,7 @@ import {
Text,
type NativeSyntheticEvent,
ScrollView,
+ Keyboard,
} from 'react-native';
import {
EnrichedTextInput,
@@ -62,7 +63,7 @@ const DEFAULT_LINK_STATE = {
end: 0,
};
-const DEBUG_SCROLLABLE = false;
+const DEBUG_SCROLLABLE = true;
// Enabling this prop fixes input flickering while auto growing.
// However, it's still experimental and not tested well.
@@ -293,6 +294,11 @@ export default function App() {
onPress={openValueModal}
style={styles.valueButton}
/>
+
{DEBUG_SCROLLABLE && }
diff --git a/src/EnrichedTextInput.tsx b/src/EnrichedTextInput.tsx
index 8ee4e242..cf5cda9a 100644
--- a/src/EnrichedTextInput.tsx
+++ b/src/EnrichedTextInput.tsx
@@ -2,6 +2,7 @@ import {
type Component,
type RefObject,
useImperativeHandle,
+ useLayoutEffect,
useMemo,
useRef,
} from 'react';
@@ -32,6 +33,9 @@ import type {
} from 'react-native';
import { normalizeHtmlStyle } from './normalizeHtmlStyle';
+//@ts-ignore
+import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
+
export interface EnrichedTextInputInstance extends NativeMethods {
// General commands
focus: () => void;
@@ -297,6 +301,19 @@ export const EnrichedTextInput = ({
},
}));
+ useLayoutEffect(() => {
+ const inputRef = nativeRef.current;
+ TextInputState.registerInput(inputRef);
+
+ return () => {
+ TextInputState.unregisterInput(inputRef);
+
+ if (TextInputState.currentlyFocusedInput() === inputRef) {
+ inputRef?.blur();
+ }
+ };
+ }, []);
+
const handleMentionEvent = (e: NativeSyntheticEvent) => {
const mentionText = e.nativeEvent.text;
const mentionIndicator = e.nativeEvent.indicator;
@@ -325,6 +342,16 @@ export const EnrichedTextInput = ({
onMentionDetected?.({ text, indicator, attributes });
};
+ const _onFocus = () => {
+ TextInputState.focusInput(nativeRef?.current);
+ onFocus?.();
+ };
+
+ const _onBlur = () => {
+ TextInputState.blurInput(nativeRef?.current);
+ onBlur?.();
+ };
+
return (