react-native-external-keyboard 0.8.5 → 0.9.1

package/README.md

@@ -15,50 +15,10 @@ iOS | Android
 - Key press event handling.
 - Focus management for `TextInput` and `Pressable` components.
 - Customization of the `Halo Effect` and `tintColor` for iOS.
+- `defaultFocusHighlightEnabled` support for Android.
 - Keyboard focus order.
 - Focus Lock.
 
-## New Release: Focus Lock
-
-| iOS | Android |
-| :-- | :-- |
-| <img src="/.github/images/rnek-focus-lock-ios.gif" height="500" /> |  <img src="/.github/images/rnek-focus-lock-android.gif" height="500" />  |
-
-> A new type of focus lock functionality has been introduced, featuring two new components: `Focus.Frame` and `Focus.Trap`. These components help manage and lock focus within specific areas of the screen.
-
-<details>
-  <summary>More Information</summary>
-
-- On iOS, `Focus.Trap` uses the native `accessibilityViewIsModal` property to keep the focus within a defined area.
-- On Android, where no equivalent to `accessibilityViewIsModal` exists, custom logic has been implemented as a workaround. By default, Android uses a custom Activity or Modal to limit focus. While using a Modal is considered the best practice for focus locking on Android, some scenarios—such as issues with React Native's Modal or library-specific constraints—may require alternative implementations.
-
-#### How It Works
-
-The focus lock functionality should be used as a pair:
-
-- `Focus.Frame`: This component is used at the root level of a "screen" to detect focus leaks and ensure that focus remains contained.
-- `Focus.Trap`: This component wraps the content area where focus should be explicitly locked.
-
-| Prop | Description |
-| :-- | :-- |
-| ViewProps | Includes all standard React Native View properties, such as style, testID, etc. |
-
-```tsx
-<Focus.Frame>
-  ...
-  <Focus.Trap>
-    <Text accessibilityRole="header">Locked Area</Text>
-    <Button
-      title="Confirm"
-      accessibilityLabel="Confirm action"
-    />
-  </Focus.Trap>
-  ...
-</Focus.Frame>
-```
-
-</details>
-
 ## Installation
 
 ```sh
@@ -79,9 +39,9 @@ cd ios && pod install && cd ..
 The `withKeyboardFocus` HOC is a helper for integrating keyboard focus functionality. It significantly simplifies integration by wrapping the provided component in `KeyboardFocusView` and extending it with additional features, such as focus and blur events.
 
 ```js
-const KeybardedPressable = withKeyboardFocus(Pressable);
-const KeybardedTouchable = withKeyboardFocus(TouchableOpacity);
-const KeybardedButton = withKeyboardFocus(Button);
+const KeyboardPressable = withKeyboardFocus(Pressable);
+const KeyboardTouchable = withKeyboardFocus(TouchableOpacity);
+const KeyboardButton = withKeyboardFocus(Button);
 
 ...
 
@@ -123,8 +83,14 @@ focusable?: | Indicates if the component can be focused by keyboard | `boolean |
 tintColor?: | Color used for tinting the component | `string`
 tintType?: | Tint behavior type | `'default' \| 'hover' \| 'background' \| 'none'`
 FocusHoverComponent?: | Component displayed on focus | `\| ReactElement  \| FunctionComponent  \| (() => ReactElement);`
+renderContent?: | Render prop for components whose `children` is itself a render function (e.g. `Pressable`). Receives the component's own render state merged with `{ focused: boolean }`, so you can style content based on both the component state (e.g. `pressed`) and keyboard focus simultaneously. Only available when the wrapped component exposes a render-prop `children`. | `(state: ComponentRenderState & { focused: boolean }) => ReactNode`
+renderFocusable?: | Render prop available on any `withKeyboardFocus`-wrapped component. Replaces `children` and receives `{ focused: boolean }`, allowing you to render different content based on keyboard focus state. Use this when the wrapped component does not expose a render-prop `children`. | `(state: { focused: boolean }) => ReactNode`
 group?: | Indicates if the component is a focusable group | `boolean`
 haloEffect?: | Enables halo effect on focus (iOS only) | `boolean`
+defaultFocusHighlightEnabled?: | **Android only.** Enables Android's default focus highlight for the focused native view. | `boolean \| undefined`, default: `true`
+haloCornerRadius?: | Corner radius of the halo ring (iOS only) | `number`
+haloExpendX?: | Horizontal expansion of the halo ring in points (iOS only) | `number`
+haloExpendY?: | Vertical expansion of the halo ring in points (iOS only) | `number`
 ref?: | Provides a reference to the component, allowing programmatic focus control | `{ focus: () => void}`
 viewRef?: | Provides a reference to the underlying view component | `RefObject<View>`
 onBubbledContextMenuPress | Handler for bubbled long-press events triggered by the context menu command (iOS only) | () => void;
@@ -140,12 +106,51 @@ orderLeft? | ID of the target for navigation to the left. | `string`
 orderRight? | ID of the target for navigation to the right. | `string`
 orderUp? | ID of the target for navigation upward. | `string`
 orderDown? | ID of the target for navigation downward. | `string`
+orderGroup? | The name of the group for index-based focus ordering. | `string`
+orderIndex? | The order index of the element within its group. | `number`
 lockFocus? | An array of directions to lock focus. | Array of 'left' \| 'right' \| 'up' \| 'down' \| 'forward' \| 'backward' \| 'first' \| 'last'
 ...rest | Remaining component props  | `Type of Component`
 
+#### renderContent — Pressable with pressed + focused state
+
+`Pressable` passes a `{ pressed }` state to its `children` render prop. Use `renderContent` to access both `pressed` and the keyboard `focused` state at the same time:
+
+```tsx
+const KeyboardPressable = withKeyboardFocus(Pressable);
+
+<KeyboardPressable
+  onPress={onPress}
+  renderContent={({ pressed, focused }) => (
+    <View style={[
+      styles.button,
+      pressed && styles.pressed,
+      focused && styles.focused,
+    ]}>
+      <Text>{pressed ? 'Pressed' : focused ? 'Focused' : 'Default'}</Text>
+    </View>
+  )}
+/>
+```
+
+#### renderFocusable — TouchableOpacity and other components
+
+`TouchableOpacity` and similar components do not expose a render-prop `children`, so `renderContent` is not available. Use `renderFocusable` instead — it receives only `{ focused }`:
+
+```tsx
+const KeyboardTouchable = withKeyboardFocus(TouchableOpacity);
+
+<KeyboardTouchable
+  onPress={onPress}
+  renderFocusable={({ focused }) => (
+    <View style={[styles.button, focused && styles.focused]}>
+      <Text>{focused ? 'Focused' : 'Default'}</Text>
+    </View>
+  )}
+/>
+```
 
 > [!NOTE]
-> You may discover that `long press on spacebar` does not trigger a long press event on `iOS`. This is because `iOS` use a `Full Keyboard Access` system that provides commands for interacting with the system. Rather than holding down the spacebar, you can use `Tab+M` (the default action for opening the context menu).
+> You may discover that `long press on spacebar` does not trigger a long press event on `iOS`. This is because `iOS` uses the `Full Keyboard Access` system that provides commands for interacting with the system. Rather than holding down the spacebar, you can use `Tab+M` (the default action for opening the context menu).
 > You can change `Commands` in: `Full Keyboard Access` -> `Commands`
 
 
@@ -187,6 +192,10 @@ tintType?: | Tint behavior type | `'default' \| 'hover' \| 'background' \| 'none
 FocusHoverComponent?: | Component displayed on focus | `\| ReactElement  \| FunctionComponent  \| (() => ReactElement);`
 group?: | Indicates if the component is a focusable group | `boolean`
 haloEffect?: | Enables halo effect on focus (iOS only) | `boolean`
+defaultFocusHighlightEnabled?: | **Android only.** Enables Android's default focus highlight for the focused native view. | `boolean \| undefined`, default: `true`
+haloCornerRadius?: | Corner radius of the halo ring (iOS only) | `number`
+haloExpendX?: | Horizontal expansion of the halo ring in points (iOS only) | `number`
+haloExpendY?: | Vertical expansion of the halo ring in points (iOS only) | `number`
 triggerCodes?: | `onPress` and `onLongPress` trigger codes  | `number[] \| undefined`,  spacebar and enter by default
 enableA11yFocus?: | Can be used to move the screen reader focus within the keyboard using `ref.current.focus`.                                           | `boolean \| undefined`
 screenAutoA11yFocus?: | Enables screen reader auto-focus functionality. | `boolean \| undefined`
@@ -199,6 +208,8 @@ orderLeft? | ID of the target for navigation to the left. | `string`
 orderRight? | ID of the target for navigation to the right. | `string`
 orderUp? | ID of the target for navigation upward. | `string`
 orderDown? | ID of the target for navigation downward. | `string`
+orderGroup? | The name of the group for index-based focus ordering. | `string`
+orderIndex? | The order index of the element within its group. | `number`
 lockFocus? | An array of directions to lock focus. | Array of 'left' \| 'right' \| 'up' \| 'down' \| 'forward' \| 'backward' \| 'first' \| 'last'
 ...rest | Remaining View props  | `View`
 
@@ -225,6 +236,7 @@ onFocusChange?: | Callback for focus change handling | `(isFocused: boolean) =>
 focusType?: | Focus type can be `default`, `auto`, or `press`. Based on investigation, Android and iOS typically have different default behaviors. On Android, the `TextInput` is focused by default, while on iOS, you need to press to focus. `auto` is used for automatic focusing, while keyboard focus targets the input. With `press`, you need to press the spacebar to focus an input. | `"default" \\| "press" \\| "auto"`
 blurType?: | Only for iOS. This defines the behavior for blurring input when focus moves away from the component. By default, iOS allows typing when the keyboard focus is on another component. You can use disable to blur input when focus moves away. (Further investigation is needed for Android.) | `"default"\\| "disable" \\| "auto"`
 haloEffect?: | Enables halo effect on focus (iOS only) | `boolean`
+defaultFocusHighlightEnabled?: | **Android only.** Enables Android's default focus highlight for the focused native view. | `boolean \| undefined`, default: `true`
 tintColor?: | Color used for tinting the component | `string`
 style?: | Style for the inner TextInput | `StyleProp<ViewStyle>`
 focusStyle? | Style applied to the inner TextInput when focused | `FocusStyle`
@@ -263,6 +275,9 @@ onKeyDownPress | Handler for the key-down event | `(e: OnKeyPress) => void`
 onContextMenuPress?: | Handler for long press events triggered by the context menu command (iOS only) | () => void;
 onBubbledContextMenuPress | Handler for bubbled long-press events triggered by the context menu command (iOS only) | () => void;
 haloEffect | Enables halo effect on focus (iOS only) | `boolean \| undefined`
+haloCornerRadius? | Corner radius of the halo ring (iOS only) | `number`
+haloExpendX? | Horizontal expansion of the halo ring in points (iOS only) | `number`
+haloExpendY? | Vertical expansion of the halo ring in points (iOS only) | `number`
 autoFocus | Indicates if the component should automatically gain focus | `boolean \| undefined`
 tintColor | Color used for tinting the component | `string`
 ref->focus | Command to programmatically focus the component | () => void;
@@ -328,6 +343,40 @@ import { Keyboard } from 'react-native-external-keyboard';
 
 This is needed for hiding the soft keyboard using a hardware keyboard. Additionally, the soft keyboard can be hidden from the settings or by pressing `Alt + K`.
 
+### Focus.Frame and Focus.Trap
+
+`Focus.Frame` and `Focus.Trap` are two components that help manage and lock focus within specific areas of the screen.
+
+- On iOS, `Focus.Trap` uses the native `accessibilityViewIsModal` property to keep the screen reader focus within a defined area. For stronger containment — such as preventing focus from reaching system elements like navigation bars or headers — pass `forceLock`. It observes focus changes and moves focus back into the trap when it escapes. Note: because focus is corrected reactively, VoiceOver may briefly jump to an element outside the trap before being returned.
+- On Android, where no equivalent to `accessibilityViewIsModal` exists, custom logic has been implemented as a workaround. By default, Android uses a custom Activity or Modal to limit focus. While using a Modal is considered the best practice for focus locking on Android, some scenarios—such as issues with React Native's Modal or library-specific constraints—may require alternative implementations.
+
+#### How It Works
+
+The focus lock functionality should be used as a pair:
+
+- `Focus.Frame`: This component is used at the root level of a "screen" to detect focus leaks and ensure that focus remains contained.
+- `Focus.Trap`: This component wraps the content area where focus should be explicitly locked.
+
+| Prop | Description |
+| :-- | :-- |
+| ViewProps | Includes all standard React Native View properties, such as style, testID, etc. |
+| forceLock? | **iOS only.** Strengthens focus containment beyond `accessibilityViewIsModal` by observing focus changes and returning focus back into the trap whenever it escapes to system elements (e.g. navigation bars, headers). Note: because focus is corrected reactively, VoiceOver may briefly jump to an element outside the trap before being returned. |
+| lockDisabled? | **Android only.** Disables the focus lock when `true`. |
+
+```tsx
+<Focus.Frame>
+  ...
+  <Focus.Trap forceLock>
+    <Text accessibilityRole="header">Locked Area</Text>
+    <Button
+      title="Confirm"
+      accessibilityLabel="Confirm action"
+    />
+  </Focus.Trap>
+  ...
+</Focus.Frame>
+```
+
 ## Focus order features
 
 ## Link Focus Order
@@ -361,6 +410,37 @@ This is needed for hiding the soft keyboard using a hardware keyboard. Additiona
 </View>
 ```
 
+> [!IMPORTANT]
+> `orderId` values are global. If the same IDs appear more than once on screen — e.g. in a list where each row renders the same component — duplicate IDs will cause incorrect focus jumps. Use `KeyboardOrderFocusGroup` or `orderPrefix` to keep IDs unique per instance.
+>
+> When a link prop is used without any prefix, a console warning is shown reminding you to add one.
+>
+> **`KeyboardOrderFocusGroup` (auto namespace).** Wraps a component tree and automatically namespaces all `orderId` values inside. Ideal for screens and containers where uniqueness is needed but the exact prefix doesn't matter.
+>
+> ```tsx
+> // Each card gets its own isolated namespace
+> {items.map((item) => (
+>   <KeyboardOrderFocusGroup key={item.id}>
+>     <Pressable orderId="title" orderForward="action">…</Pressable>
+>     <Pressable orderId="action" orderBackward="title">…</Pressable>
+>   </KeyboardOrderFocusGroup>
+> ))}
+> ```
+>
+> **Static namespace with `groupId` / `orderPrefix`.** Use an explicit string when you need a stable, predictable namespace — for example, to create intentional focus links between two sibling components that know about each other.
+>
+> ```tsx
+> // groupId on KeyboardOrderFocusGroup
+> <KeyboardOrderFocusGroup groupId="card_42">
+>   <Pressable orderId="title" orderForward="action">…</Pressable>
+>   <Pressable orderId="action" orderBackward="title">…</Pressable>
+> </KeyboardOrderFocusGroup>
+>
+> // or orderPrefix directly on each component
+> <Pressable orderPrefix="card_42" orderId="title" orderForward="action">…</Pressable>
+> <Pressable orderPrefix="card_42" orderId="action" orderBackward="title">…</Pressable>
+> ```
+
 You can find more examples here: [Focus Link Order](https://github.com/ArturKalach/react-native-external-keyboard/blob/release/0.6.0-rc/example/src/components/FocusOrderExample/FocusLinkOrder.tsx), [DPad Order](https://github.com/ArturKalach/react-native-external-keyboard/blob/release/0.6.0-rc/example/src/components/FocusOrderExample/FocusDPadOrder.tsx)
 
 | Props | Description | Type |
@@ -372,45 +452,48 @@ You can find more examples here: [Focus Link Order](https://github.com/ArturKala
 | orderRight? | ID of the target for navigation to the right. | `string` |
 | orderUp? | ID of the target for navigation upward. | `string` |
 | orderDown? | ID of the target for navigation downward. | `string` |
+| orderPrefix? | Prefix prepended to this component's `orderId` and all `order*` target IDs. Use to namespace IDs in repeated components (lists, cards) or alongside a static `groupId`. | `string` |
 
 ## Indexes Focus Order
 
-Linking is one of the best ways to set up focus order. However, there may be cases where you need to define the order of multiple elements, such as groups. As an alternative solution, you can use Indexes.
+Linking is one of the best ways to set up focus order. However, there may be cases where you need to define the order of multiple elements within a group. As an alternative, you can use index-based ordering.
+
+### KeyboardOrderFocusGroup
+
+`KeyboardOrderFocusGroup` is a context provider that defines a named focus group. All children that declare `orderIndex` will be ordered within that group. You can optionally provide a `groupId`; if omitted, a unique ID is generated automatically.
 
 ```tsx
+import { KeyboardOrderFocusGroup } from 'react-native-external-keyboard';
+
 <KeyboardOrderFocusGroup>
   <View>
-    <Pressable
-      onPress={onPress}
-      orderIndex={0}
-    >
+    <Pressable onPress={onPress} orderIndex={0}>
       <Text>First</Text>
     </Pressable>
-    <Pressable
-      onPress={onPress}
-      orderIndex={2}
-    >
+    <Pressable onPress={onPress} orderIndex={2}>
       <Text>Third</Text>
     </Pressable>
-    <Pressable
-      onPress={onPress}
-      orderIndex={1}
-    >
+    <Pressable onPress={onPress} orderIndex={1}>
       <Text>Second</Text>
     </Pressable>
   </View>
 </KeyboardOrderFocusGroup>
 ```
-Indexing requres `orderGroup` param for proper order set,  you can use `KeyboardOrderFocusGroup` or provide `orderGroup` to the component.
+
+| Props | Description | Type |
+| :-- | :-- | :-- |
+| groupId? | Optional explicit group name. Auto-generated when omitted. | `string` |
+| children? | Child components | `ReactNode` |
+
+Alternatively, provide `orderGroup` directly on each component to skip the wrapper:
 
 ```tsx
- <Pressable
-      orderGroup="main"
-      onPress={onPress}
-      orderIndex={2}
-    >
-      <Text>Back</Text>
-  </Pressable>
+<Pressable orderGroup="main" onPress={onPress} orderIndex={0}>
+  <Text>First</Text>
+</Pressable>
+<Pressable orderGroup="main" onPress={onPress} orderIndex={1}>
+  <Text>Second</Text>
+</Pressable>
 ```
 
 | Props | Description | Type |
@@ -418,7 +501,6 @@ Indexing requres `orderGroup` param for proper order set,  you can use `Keyboard
 | orderGroup? | The name of the group containing ordered elements. | `string` |
 | orderIndex? | The order index of the element within the group. | `number` |
 
-
 You can find more examples here: [Focus Order via indexes](https://github.com/ArturKalach/react-native-external-keyboard/blob/release/0.6.0-rc/example/src/components/FocusOrderExample/FocusOrder.tsx)
 
 ## Focus Lock

package/android/src/main/java/com/externalkeyboard/delegates/FocusOrderDelegate.java

@@ -5,10 +5,22 @@ import android.view.View;
 import com.externalkeyboard.helper.Linking.A11yOrderLinking;
 import com.externalkeyboard.services.FocusLinkObserver.FocusLinkObserver;
 import com.externalkeyboard.services.FocusLinkObserver.FocusLinkObserverSingleton;
-import com.externalkeyboard.views.ExternalKeyboardView.ExternalKeyboardView;
+
+import java.lang.ref.WeakReference;
 
 public class FocusOrderDelegate {
-  private final ExternalKeyboardView delegate;
+  private final FocusOrderDelegateHost delegate;
+
+  // The view that was registered during the last link() call. Stored here so
+  // that unlink() does not depend on getFirstChild() returning the same value
+  // (it may have changed by the time unlink() is called, e.g. after reactEditText
+  // is cleared or focusType switches between FOCUS_BY_PRESS and regular focus).
+  // WeakReference so a detached view is not kept alive by this delegate.
+  private WeakReference<View> linkedChild = null;
+
+  private View getLinkedChild() {
+    return linkedChild != null ? linkedChild.get() : null;
+  }
 
   FocusLinkObserver.LinkUpdatedCallback leftUpdated = null;
   FocusLinkObserver.LinkRemovedCallback leftRemoved = null;
@@ -19,14 +31,15 @@ public class FocusOrderDelegate {
   FocusLinkObserver.LinkUpdatedCallback downUpdated = null;
   FocusLinkObserver.LinkRemovedCallback downRemoved = null;
 
-
-  public FocusOrderDelegate(ExternalKeyboardView delegate) {
+  public FocusOrderDelegate(FocusOrderDelegateHost delegate) {
     super();
     this.delegate = delegate;
   }
 
   public void link() {
     View child = delegate.getFirstChild();
+    this.linkedChild = child != null ? new WeakReference<>(child) : null;
+
     String orderGroup = delegate.getOrderGroup();
     Integer orderIndex = delegate.getOrderIndex();
     String orderId = delegate.getOrderId();
@@ -41,6 +54,8 @@ public class FocusOrderDelegate {
       A11yOrderLinking.getInstance().addOrderLink(child, orderId);
     }
 
+    // Lambdas capture the local strong reference — fine for the subscription lifetime;
+    // subscriptions are released in unlink().
     if (delegate.getOrderLeft() != null && child != null) {
       leftUpdated = link -> child.setNextFocusLeftId(link.getId());
       leftRemoved = () -> child.setNextFocusLeftId(View.NO_ID);
@@ -66,8 +81,44 @@ public class FocusOrderDelegate {
     }
   }
 
+  public void unlink() {
+    View child = getLinkedChild();
+    String orderGroup = delegate.getOrderGroup();
+    Integer orderIndex = delegate.getOrderIndex();
+    String orderId = delegate.getOrderId();
+
+    if (orderGroup != null && orderIndex != null) {
+      A11yOrderLinking.getInstance().removeRelationship(orderGroup, orderIndex);
+    }
+
+    if (orderId != null) {
+      FocusLinkObserver observer = FocusLinkObserverSingleton.getInstance();
+      View storedView = A11yOrderLinking.getInstance().getOrderLink(orderId);
+      if (storedView == child) {
+        observer.emitRemove(orderId);
+        A11yOrderLinking.getInstance().removeOrderLink(orderId);
+      }
+    }
+
+    FocusLinkObserver observer = FocusLinkObserverSingleton.getInstance();
+    if (delegate.getOrderLeft() != null) {
+      observer.unsubscribe(delegate.getOrderLeft(), leftUpdated, leftRemoved);
+    }
+    if (delegate.getOrderRight() != null) {
+      observer.unsubscribe(delegate.getOrderRight(), rightUpdated, rightRemoved);
+    }
+    if (delegate.getOrderUp() != null) {
+      observer.unsubscribe(delegate.getOrderUp(), upUpdated, upRemoved);
+    }
+    if (delegate.getOrderDown() != null) {
+      observer.unsubscribe(delegate.getOrderDown(), downUpdated, downRemoved);
+    }
+
+    this.linkedChild = null;
+  }
+
   public void refreshOrder() {
-    View child = delegate.getFirstChild();
+    View child = getLinkedChild();
     String orderGroup = delegate.getOrderGroup();
     Integer orderIndex = delegate.getOrderIndex();
 
@@ -78,15 +129,13 @@ public class FocusOrderDelegate {
 
   public void refreshLeft(String prev, String next) {
     FocusLinkObserver observer = FocusLinkObserverSingleton.getInstance();
+    View child = getLinkedChild();
     if (prev != null && leftUpdated != null && leftRemoved != null) {
       observer.unsubscribe(prev, leftUpdated, leftRemoved);
-      View child = delegate.getFirstChild();
-      if(child != null) {
+      if (child != null) {
         child.setNextFocusLeftId(View.NO_ID);
       }
     }
-
-    View child = delegate.getFirstChild();
     if (next != null && child != null) {
       leftUpdated = link -> child.setNextFocusLeftId(link.getId());
       leftRemoved = () -> child.setNextFocusLeftId(View.NO_ID);
@@ -96,15 +145,13 @@ public class FocusOrderDelegate {
 
   public void refreshRight(String prev, String next) {
     FocusLinkObserver observer = FocusLinkObserverSingleton.getInstance();
-    if (rightUpdated != null && rightRemoved != null) {
+    View child = getLinkedChild();
+    if (prev != null && rightUpdated != null && rightRemoved != null) {
       observer.unsubscribe(prev, rightUpdated, rightRemoved);
-      View child = delegate.getFirstChild();
-      if(child != null) {
+      if (child != null) {
         child.setNextFocusRightId(View.NO_ID);
       }
     }
-
-    View child = delegate.getFirstChild();
     if (next != null && child != null) {
       rightUpdated = link -> child.setNextFocusRightId(link.getId());
       rightRemoved = () -> child.setNextFocusRightId(View.NO_ID);
@@ -114,16 +161,13 @@ public class FocusOrderDelegate {
 
   public void refreshUp(String prev, String next) {
     FocusLinkObserver observer = FocusLinkObserverSingleton.getInstance();
+    View child = getLinkedChild();
     if (prev != null && upUpdated != null && upRemoved != null) {
       observer.unsubscribe(prev, upUpdated, upRemoved);
-
-      View child = delegate.getFirstChild();
-      if(child != null) {
+      if (child != null) {
         child.setNextFocusUpId(View.NO_ID);
       }
     }
-
-    View child = delegate.getFirstChild();
     if (next != null && child != null) {
       upUpdated = link -> child.setNextFocusUpId(link.getId());
       upRemoved = () -> child.setNextFocusUpId(View.NO_ID);
@@ -131,27 +175,15 @@ public class FocusOrderDelegate {
     }
   }
 
-  public void updateOrderGroup(String prev, String next) {
-    View child = delegate.getFirstChild();
-    Integer position = delegate.getOrderIndex();
-
-    if (child != null && position != null) {
-      A11yOrderLinking.getInstance().updateGroup(prev, next, position, child);
-    }
-  }
-
   public void refreshDown(String prev, String next) {
     FocusLinkObserver observer = FocusLinkObserverSingleton.getInstance();
+    View child = getLinkedChild();
     if (prev != null && downUpdated != null && downRemoved != null) {
       observer.unsubscribe(prev, downUpdated, downRemoved);
-
-      View child = delegate.getFirstChild();
-      if(child != null) {
+      if (child != null) {
         child.setNextFocusDownId(View.NO_ID);
       }
     }
-
-    View child = delegate.getFirstChild();
     if (next != null && child != null) {
       downUpdated = link -> child.setNextFocusDownId(link.getId());
       downRemoved = () -> child.setNextFocusDownId(View.NO_ID);
@@ -159,44 +191,11 @@ public class FocusOrderDelegate {
     }
   }
 
-
-  public void unlink(View unlinkView) {
-    String orderGroup = delegate.getOrderGroup();
-    Integer orderIndex = delegate.getOrderIndex();
-    String orderId = delegate.getOrderId();
-
-    if (orderGroup != null && orderIndex != null) {
-      A11yOrderLinking.getInstance().removeRelationship(orderGroup, orderIndex);
-    }
-
-    if (orderId != null) {
-      FocusLinkObserver observer = FocusLinkObserverSingleton.getInstance();
-      View storedView = A11yOrderLinking.getInstance().getOrderLink(orderId);
-      if(storedView == unlinkView) {
-        observer.emitRemove(orderId);
-        A11yOrderLinking.getInstance().removeOrderLink(orderId);
-      }
-    }
-
-
-    if (delegate.getOrderLeft() != null) {
-      FocusLinkObserver observer = FocusLinkObserverSingleton.getInstance();
-      observer.unsubscribe(delegate.getOrderLeft(), leftUpdated, leftRemoved);
-    }
-
-    if (delegate.getOrderRight() != null) {
-      FocusLinkObserver observer = FocusLinkObserverSingleton.getInstance();
-      observer.unsubscribe(delegate.getOrderRight(), rightUpdated, rightRemoved);
-    }
-
-    if (delegate.getOrderUp() != null) {
-      FocusLinkObserver observer = FocusLinkObserverSingleton.getInstance();
-      observer.unsubscribe(delegate.getOrderUp(), upUpdated, upRemoved);
-    }
-
-    if (delegate.getOrderDown() != null) {
-      FocusLinkObserver observer = FocusLinkObserverSingleton.getInstance();
-      observer.unsubscribe(delegate.getOrderDown(), downUpdated, downRemoved);
+  public void updateOrderGroup(String prev, String next) {
+    View child = getLinkedChild();
+    Integer position = delegate.getOrderIndex();
+    if (child != null && position != null) {
+      A11yOrderLinking.getInstance().updateGroup(prev, next, position, child);
     }
   }
 
@@ -204,10 +203,17 @@ public class FocusOrderDelegate {
     return A11yOrderLinking.getInstance().getOrderLink(linkId);
   }
 
-  public void clear(View view) {
-    if(view != null) {
-      unlink(view);
+  public void cleanByOrderId(String orderId) {
+    if (orderId == null) return;
+
+    String orderGroup = delegate.getOrderGroup();
+    Integer orderIndex = delegate.getOrderIndex();
+    if (orderGroup != null && orderIndex != null) {
+      A11yOrderLinking.getInstance().removeRelationship(orderGroup, orderIndex);
     }
-  }
 
+    FocusLinkObserver observer = FocusLinkObserverSingleton.getInstance();
+    observer.emitRemove(orderId);
+    A11yOrderLinking.getInstance().removeOrderLink(orderId);
+  }
 }

package/android/src/main/java/com/externalkeyboard/delegates/FocusOrderDelegateHost.java

@@ -0,0 +1,14 @@
+package com.externalkeyboard.delegates;
+
+import android.view.View;
+
+public interface FocusOrderDelegateHost {
+  View getFirstChild();
+  String getOrderGroup();
+  Integer getOrderIndex();
+  String getOrderId();
+  String getOrderLeft();
+  String getOrderRight();
+  String getOrderUp();
+  String getOrderDown();
+}

package/android/src/main/java/com/externalkeyboard/helper/Linking/A11yOrderLinking.java

@@ -1,5 +1,6 @@
 package com.externalkeyboard.helper.Linking;
 
+import android.util.Log;
 import android.view.View;
 
 import java.util.HashMap;
@@ -59,6 +60,10 @@ public class A11yOrderLinking {
     if (queue == null) return;
 
     queue.removeFromOrder(index);
+
+    if (queue.isEmpty()) {
+      relationships.remove(key);
+    }
   }
 
   public void updateGroup(String prev, String next, Integer position, View child) {

package/android/src/main/java/com/externalkeyboard/modules/ExternalKeyboardModule.java

@@ -9,33 +9,33 @@ import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactMethod;
 
+import java.lang.ref.WeakReference;
+
 public class ExternalKeyboardModule extends ExternalKeyboardModuleSpec {
   public static final String NAME = "ExternalKeyboardModule";
-  private static View focusedView = null;
-  private final ReactApplicationContext context;
-
+  private static WeakReference<View> focusedViewRef = new WeakReference<>(null);
 
   private boolean dismiss() {
-    if(focusedView == null) return false;
+    View focusedView = focusedViewRef.get();
+    if (focusedView == null) return false;
     try {
-      InputMethodManager imm = (InputMethodManager) context.getSystemService(Context.INPUT_METHOD_SERVICE);
+      InputMethodManager imm = (InputMethodManager) getReactApplicationContext().getSystemService(Context.INPUT_METHOD_SERVICE);
       if (imm != null) {
         imm.hideSoftInputFromWindow(focusedView.getWindowToken(), 0);
         return true;
       }
-    } catch (Exception ignored){}
+    } catch (Exception ignored) {
+    }
 
     return false;
   }
 
-
-  public static void setFocusedTextInput (View _focusedView) {
-    focusedView = _focusedView;
+  public static void setFocusedTextInput(View _focusedView) {
+    focusedViewRef = new WeakReference<>(_focusedView);
   }
 
   public ExternalKeyboardModule(ReactApplicationContext reactContext) {
     super(reactContext);
-    context = reactContext;
   }
 
   @Override