fix: Optimize BottomSheetTextInputComponent to Prevent Redundant Shar…

[erennyuksell]

PR Description

Motivation

Currently, the BottomSheetTextInputComponent updates the shared value shouldHandleKeyboardEvents.value on every focus and blur event without checking if an update is actually needed. This leads to a cascade of reanimated worklet executions, which, in turn, overloads the UI thread. On Android devices, this heavy processing can cause ANR (Application Not Responding) issues.

This PR aims to mitigate those issues by preventing unnecessary updates. By adding guard clauses that only update the shared value when its state actually changes, we can reduce the frequency of reanimated reactions and lighten the load on the UI thread, resulting in a smoother experience—especially on Android.

Changes

• Guard Clauses in Focus/Blur Handlers:
  The onFocus and onBlur callbacks in the BottomSheetTextInputComponent have been updated to check the current state of shouldHandleKeyboardEvents.value before performing any update. This prevents redundant updates that trigger a cascade of worklet executions.

Code Snippet

const BottomSheetTextInputComponent = forwardRef<
  TextInput,
  BottomSheetTextInputProps
>(({ onFocus, onBlur, ...rest }, ref) => {
  //#region hooks
  const { shouldHandleKeyboardEvents } = useBottomSheetInternal();
  //#endregion

  //#region callbacks
  const handleOnFocus = useCallback(
    (args: NativeSyntheticEvent<TextInputFocusEventData>) => {
      if (!shouldHandleKeyboardEvents.value) {
        // Schedule the update to avoid immediate work on the UI thread
        requestAnimationFrame(() => {
          shouldHandleKeyboardEvents.value = true;
        });
      }
      onFocus?.(args);
    },
    [onFocus, shouldHandleKeyboardEvents]
  );

  const handleOnBlur = useCallback(
    (args: NativeSyntheticEvent<TextInputFocusEventData>) => {
      if (shouldHandleKeyboardEvents.value) {
        requestAnimationFrame(() => {
          shouldHandleKeyboardEvents.value = false;
        });
      }
      onBlur?.(args);
    },
    [onBlur, shouldHandleKeyboardEvents]
  );
  //#endregion

  //#region effects
  useEffect(() => {
    return () => {
      // Reset the flag on unmount
      shouldHandleKeyboardEvents.value = false;
    };
  }, [shouldHandleKeyboardEvents]);
  //#endregion
  return (
    <TextInput
      ref={ref}
      onFocus={handleOnFocus}
      onBlur={handleOnBlur}
      {...rest}
    />
  );
});

Testing

• Behavior Verification:
  Confirmed that shouldHandleKeyboardEvents.value is only updated when its state needs to change.
• Event Handling:
  Verified that TextInput focus and blur events trigger the correct updates.
• Performance:
  Observed a reduction in unnecessary reanimated worklet executions, helping to mitigate ANR issues on Android.

---

Feedback and suggestions are welcome!