react-native-external-keyboard 0.8.5 → 0.9.1

package/android/src/main/java/com/externalkeyboard/views/TextInputFocusWrapper/TextInputFocusWrapper.java

@@ -2,40 +2,42 @@ package com.externalkeyboard.views.TextInputFocusWrapper;
 
 import android.content.Context;
 import android.graphics.Rect;
+import android.os.Build;
 import android.text.Editable;
 import android.view.KeyEvent;
+import android.view.MotionEvent;
 import android.view.View;
-import android.view.ViewGroup;
 import android.widget.EditText;
 
 import androidx.annotation.NonNull;
 
 import com.externalkeyboard.events.EventHelper;
-import com.externalkeyboard.helper.ReactNativeVersionChecker;
 import com.externalkeyboard.modules.ExternalKeyboardModule;
+import com.externalkeyboard.views.base.FocusHighlightBase;
 import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.modules.systeminfo.ReactNativeVersion;
 import com.facebook.react.views.textinput.ReactEditText;
 
-import java.lang.reflect.Field;
-
-public class TextInputFocusWrapper extends ViewGroup implements View.OnFocusChangeListener {
+public class TextInputFocusWrapper extends FocusHighlightBase implements View.OnFocusChangeListener {
   private final Context context;
   public static final byte FOCUS_BY_PRESS = 1;
+
+  // RN version is a compile-time constant — cache it once instead of re-reading on every call.
+  private static final boolean IS_NATIVELY_FIXED_VERSION = resolveIsNativelyFixedVersion();
+
   private ReactEditText reactEditText = null;
   private boolean focusEventIgnore = false;
   private int focusType = 0;
-  private View.OnAttachStateChangeListener onAttachListener;
+  // Used only to re-apply focusability after React Native attaches the EditText to the window.
+  private View.OnAttachStateChangeListener focusabilityListener;
   private boolean blurOnSubmit = true;
   private boolean multiline = false;
   private boolean keyboardFocusable = true;
-  private static View focusedView = null;
-  public boolean getIsFocusByPress() {
-    return focusType == FOCUS_BY_PRESS;
-  }
-  private boolean getIsNativelyFixedVersion () {
+
+  private static boolean resolveIsNativelyFixedVersion() {
     try {
-      Object minorValue = ReactNativeVersion.VERSION.getOrDefault("minor", 0);
+      Object minorValue = com.facebook.react.modules.systeminfo.ReactNativeVersion.VERSION.containsKey("minor")
+          ? com.facebook.react.modules.systeminfo.ReactNativeVersion.VERSION.get("minor")
+          : 0;
       int minor = (minorValue instanceof Integer) ? (int) minorValue : 0;
       return minor >= 79;
     } catch (Exception e) {
@@ -43,84 +45,141 @@ public class TextInputFocusWrapper extends ViewGroup implements View.OnFocusChan
     }
   }
 
-  public void setKeyboardFocusable(boolean canBeFocusable) {
-    if (keyboardFocusable == canBeFocusable) {
-      return;
-    }
+  // For FOCUS_BY_PRESS: wrapper must always intercept focus so the user navigates
+  //   to the wrapper first, then presses Enter/Space to enter edit mode.
+  // For regular focus: pre-0.79 had a backward-direction bug, so the wrapper handled
+  //   focus transfer. In 0.79+ that is natively fixed and the EditText gets focus directly.
+  private boolean shouldWrapperBeFocusable() {
+    if (!keyboardFocusable) return false;
+    if (focusType == FOCUS_BY_PRESS) return true;
+    return !IS_NATIVELY_FIXED_VERSION;
+  }
 
-    keyboardFocusable = canBeFocusable;
+  private boolean shouldEditTextBeFocusable() {
+    return keyboardFocusable && !shouldWrapperBeFocusable();
+  }
 
-    this.setFocusable(keyboardFocusable);
+  private void updateFocusability() {
+    this.setFocusable(shouldWrapperBeFocusable());
     if (this.reactEditText != null) {
-      boolean isAlreadyFixed = getIsNativelyFixedVersion();
-      this.reactEditText.setFocusable(isAlreadyFixed);
+      this.reactEditText.setFocusable(shouldEditTextBeFocusable());
+    }
+  }
+
+  @Override
+  protected void syncFocusHighlight () {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+
+      this.setDefaultFocusHighlightEnabled(focusHighlight);
+      if(this.reactEditText != null) {
+        reactEditText.setDefaultFocusHighlightEnabled(focusHighlight);
+      }
+    }
+  }
+
+
+  @Override
+  public View getFirstChild() {
+    // In 0.79+ with regular focus, the EditText receives focus directly.
+    // For FOCUS_BY_PRESS the wrapper itself is the focus target.
+    if (IS_NATIVELY_FIXED_VERSION && focusType != FOCUS_BY_PRESS && this.reactEditText != null) {
+      return this.reactEditText;
+    }
+    return this;
+  }
+
+  @Override
+  public void setNextFocusForwardId(int nextFocusForwardId) {
+    super.setNextFocusForwardId(nextFocusForwardId);
+    if (reactEditText != null) {
+      reactEditText.setNextFocusForwardId(nextFocusForwardId);
+    }
+  }
+
+  // --- Child lifecycle (mirrors ExternalKeyboardView pattern) ---
+
+  // Overrides ViewOrderGroupBase.linkAddView so the manager can call it uniformly
+  // for all children — the ReactEditText filter lives here, not in the manager.
+  @Override
+  public void linkAddView(View child) {
+    if (!(child instanceof ReactEditText)) return;
+    setEditText((ReactEditText) child);  // configure listeners before linking
+    this.syncFocusHighlight();
+    super.linkAddView(child);            // store firstChild + call focusOrderDelegate.link()
+  }
+
+  // Symmetric to linkAddView: manager calls linkRemoveView for all children.
+  @Override
+  public void linkRemoveView(View view) {
+    if (view != this.reactEditText) return;
+    super.linkRemoveView(view);  // call focusOrderDelegate.unlink() + clear firstChild
+    setEditText(null);
+  }
+
+  // --- EditText setup / teardown ---
+
+  public void setEditText(ReactEditText editText) {
+    if (editText != null) {
+      this.reactEditText = editText;
+      updateFocusability();
+      this.reactEditText.addOnAttachStateChangeListener(getFocusabilityListener());
+      subscribeEditTextFocusListener();
+      onMultiplyBlurSubmitHandle();
+    } else {
+      clearEditText();
     }
   }
 
-  private View.OnAttachStateChangeListener getOnAttachListener() {
-    if (onAttachListener == null) {
-      onAttachListener = new View.OnAttachStateChangeListener() {
+  private View.OnAttachStateChangeListener getFocusabilityListener() {
+    if (focusabilityListener == null) {
+      focusabilityListener = new View.OnAttachStateChangeListener() {
         @Override
         public void onViewAttachedToWindow(@NonNull View view) {
-          boolean isAlreadyFixed = getIsNativelyFixedVersion();
-          view.setFocusable(isAlreadyFixed);
+          // Re-apply focusability after React Native attaches the view; the
+          // framework may reset it during the layout/commit phase.
+          view.setFocusable(shouldEditTextBeFocusable());
         }
-
         @Override
-        public void onViewDetachedFromWindow(@NonNull View view) {
-        }
+        public void onViewDetachedFromWindow(@NonNull View view) {}
       };
     }
-    return onAttachListener;
+    return focusabilityListener;
   }
 
   private void clearEditText() {
     if (this.reactEditText != null) {
+      focusOrderDelegate.unlink();
+      if (focusabilityListener != null) {
+        this.reactEditText.removeOnAttachStateChangeListener(focusabilityListener);
+      }
       this.reactEditText.setOnFocusChangeListener(null);
       this.reactEditText.setOnKeyListener(null);
-
-      if (onAttachListener != null) {
-        this.reactEditText.removeOnAttachStateChangeListener(onAttachListener);
-      }
     }
     this.reactEditText = null;
   }
 
-  public void setEditText(ReactEditText editText) {
-    if (editText != null) {
-      this.reactEditText = editText;
-      boolean isAlreadyFixed = getIsNativelyFixedVersion();
-      if(isAlreadyFixed) {
-        this.setFocusable(false);
+  private void subscribeEditTextFocusListener() {
+    OnFocusChangeListener reactListener = this.reactEditText.getOnFocusChangeListener();
+    this.reactEditText.setOnFocusChangeListener((textInput, hasTextEditFocus) -> {
+      reactListener.onFocusChange(textInput, hasTextEditFocus);
+      this.focusEventIgnore = false;
+      if (focusType != FOCUS_BY_PRESS || !hasTextEditFocus) {
+        onFocusChange(textInput, hasTextEditFocus);
       }
-
-      this.reactEditText.addOnAttachStateChangeListener(getOnAttachListener());
-      if (focusType == FOCUS_BY_PRESS) {
-        this.reactEditText.setFocusable(isAlreadyFixed);
+      if (hasTextEditFocus) {
+        ExternalKeyboardModule.setFocusedTextInput(textInput);
       }
-      OnFocusChangeListener reactListener = this.reactEditText.getOnFocusChangeListener();
-      this.reactEditText.setOnFocusChangeListener((textInput, hasTextEditFocus) -> {
-        reactListener.onFocusChange(textInput, hasTextEditFocus);
-        focusedView = textInput;
-        this.focusEventIgnore = false;
-        if (focusType != FOCUS_BY_PRESS || !hasTextEditFocus) {
-          onFocusChange(textInput, hasTextEditFocus);
-        }
-
-        if (hasTextEditFocus) {
-          ExternalKeyboardModule.setFocusedTextInput(textInput);
-        }
-        if (!hasTextEditFocus) {
-          this.setFocusable(!isAlreadyFixed);
-          this.reactEditText.setFocusable(isAlreadyFixed);
+      if (!hasTextEditFocus) {
+        updateFocusability();
+        if (focusType == FOCUS_BY_PRESS) {
+          post(() -> TextInputFocusWrapper.this.requestFocus());
         }
-      });
-      onMultiplyBlurSubmitHandle();
-    } else {
-      this.clearEditText();
-    }
+      }
+    });
   }
 
+  // --- Focus change event ---
+
   @Override
   public void onFocusChange(View v, boolean hasFocus) {
     if (!this.focusEventIgnore) {
@@ -132,22 +191,29 @@ public class TextInputFocusWrapper extends ViewGroup implements View.OnFocusChan
     this.setOnFocusChangeListener(this);
   }
 
+  // --- Props ---
+
+  public void setKeyboardFocusable(boolean canBeFocusable) {
+    if (keyboardFocusable == canBeFocusable) return;
+    keyboardFocusable = canBeFocusable;
+    updateFocusability();
+  }
+
   public void setFocusType(int focusType) {
+    if (this.focusType == focusType) return;
     this.focusType = focusType;
+    updateFocusability();
+    // On 0.79+ getFirstChild() switches between wrapper and reactEditText based on
+    // focusType. If the EditText is already attached, re-link so the delegate
+    // registers the correct child for the new mode.
+    if (reactEditText != null && reactEditText.isAttachedToWindow()) {
+      focusOrderDelegate.unlink();
+      focusOrderDelegate.link();
+    }
   }
 
   public void setBlurType(int blurType) {
-    // Stub, Android does not allow to type in EditField from another view. Even focus remains typing with soft or hard keyboard won't work
-  }
-
-  public TextInputFocusWrapper(Context context) {
-    super(context);
-    this.context = context;
-
-    if (keyboardFocusable) {
-      boolean isAlreadyFixed = getIsNativelyFixedVersion();
-      setFocusable(!isAlreadyFixed);
-    }
+    // Stub: Android does not allow typing in an EditText from another view.
   }
 
   public void setBlurOnSubmit(boolean blurOnSubmit) {
@@ -159,9 +225,20 @@ public class TextInputFocusWrapper extends ViewGroup implements View.OnFocusChan
     onMultiplyBlurSubmitHandle();
   }
 
+  // --- Constructor ---
+
+  public TextInputFocusWrapper(Context context) {
+    super(context);
+    this.context = context;
+    setFocusable(shouldWrapperBeFocusable());
+  }
+
+  // --- Key handling ---
+
   @Override
   public boolean onKeyDown(int keyCode, KeyEvent event) {
-    if (focusType == FOCUS_BY_PRESS) {
+    if (isFocusLocked(event)) return true;
+    if (focusType == FOCUS_BY_PRESS && this.reactEditText != null) {
       this.reactEditText.setFocusable(false);
     }
     if (keyCode == KeyEvent.KEYCODE_SPACE || keyCode == KeyEvent.KEYCODE_DPAD_CENTER || keyCode == KeyEvent.KEYCODE_ENTER) {
@@ -171,36 +248,69 @@ public class TextInputFocusWrapper extends ViewGroup implements View.OnFocusChan
     return super.onKeyDown(keyCode, event);
   }
 
-  public boolean requestFocus(int direction, Rect previouslyFocusedRect) {
-    boolean isAlreadyFixed = getIsNativelyFixedVersion();
-    if(isAlreadyFixed) {
-      return super.requestFocus(direction, previouslyFocusedRect);
+  // --- Touch handling ---
+
+  @Override
+  public boolean onInterceptTouchEvent(MotionEvent ev) {
+    // In FOCUS_BY_PRESS mode the EditText is non-focusable (wrapper holds focus).
+    // Intercept the down event so a tap activates edit mode, same as a keyboard press.
+    if (focusType == FOCUS_BY_PRESS && ev.getAction() == MotionEvent.ACTION_DOWN) {
+      handleTextInputFocus();
     }
-    if ((direction == View.FOCUS_FORWARD || direction == View.FOCUS_BACKWARD) && focusType != FOCUS_BY_PRESS) {
-      this.handleTextInputFocus();
-      return true;
+    return false; // don't consume — let the touch reach the EditText for cursor positioning
+  }
+
+  // --- Focus search / request ---
+
+  @Override
+  public View focusSearch(int direction) {
+    // focusSearch(View, int) is only called when a descendant is focused.
+    // When the wrapper itself is focused (FOCUS_BY_PRESS idle state), we must
+    // handle orderForward/orderBackward here instead.
+
+      if (focusType == FOCUS_BY_PRESS) {
+      if (direction == FOCUS_FORWARD && orderForward != null) {
+        View next = focusOrderDelegate.getLink(orderForward);
+        if (next != null && next.isAttachedToWindow()) return next;
+      }
+      if (direction == FOCUS_BACKWARD && orderBackward != null) {
+        View prev = focusOrderDelegate.getLink(orderBackward);
+        if (prev != null && prev.isAttachedToWindow()) return prev;
+      }
     }
+    return super.focusSearch(direction);
+  }
 
+  @Override
+  public boolean requestFocus(int direction, Rect previouslyFocusedRect) {
+    if (focusType != FOCUS_BY_PRESS) {
+      // 0.79+: wrapper is not focusable, pass through.
+      if (IS_NATIVELY_FIXED_VERSION) return super.requestFocus(direction, previouslyFocusedRect);
+      // Pre-0.79: intercept forward/backward and transfer focus directly to EditText.
+      if (direction == View.FOCUS_FORWARD || direction == View.FOCUS_BACKWARD) {
+        this.handleTextInputFocus();
+        return true;
+      }
+    }
     return super.requestFocus(direction, previouslyFocusedRect);
   }
 
+  // --- Internal helpers ---
+
   private void onMultiplyBlurSubmitHandle() {
     if (this.reactEditText == null) return;
     if (this.multiline) {
-      this.reactEditText.setOnKeyListener(new View.OnKeyListener() {
-        @Override
-        public boolean onKey(View v, int keyCode, KeyEvent event) {
-          if (event.getAction() == KeyEvent.ACTION_DOWN && keyCode == KeyEvent.KEYCODE_ENTER && !event.isShiftPressed()) {
-            Editable editableText = reactEditText.getText();
-            String text = editableText == null ? "" : String.valueOf(editableText);
-            EventHelper.multiplyTextSubmit((ReactContext) context, getId(), text);
-            if (blurOnSubmit && v instanceof EditText) {
-              v.clearFocus();
-              return true;
-            }
+      this.reactEditText.setOnKeyListener((v, keyCode, event) -> {
+        if (event.getAction() == KeyEvent.ACTION_DOWN && keyCode == KeyEvent.KEYCODE_ENTER && !event.isShiftPressed()) {
+          Editable editableText = reactEditText.getText();
+          String text = editableText == null ? "" : String.valueOf(editableText);
+          EventHelper.multiplyTextSubmit((ReactContext) context, getId(), text);
+          if (blurOnSubmit && v instanceof EditText) {
+            v.clearFocus();
+            return true;
           }
-          return false;
         }
+        return false;
       });
     } else {
       this.reactEditText.setOnKeyListener(null);
@@ -211,14 +321,11 @@ public class TextInputFocusWrapper extends ViewGroup implements View.OnFocusChan
     this.focusEventIgnore = true;
     this.setFocusable(false);
     this.reactEditText.setFocusable(true);
-
+    // focusableInTouchMode is required for requestFocus() to succeed when the device
+    // is in touch mode (canTakeFocus() returns false without it).
+    this.reactEditText.setFocusableInTouchMode(true);
     if (!this.reactEditText.hasFocus()) {
       this.reactEditText.requestFocusFromJS();
     }
   }
-
-  @Override
-  protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
-    // No-op since UIManagerModule handles actually laying out children.
-  }
 }

package/android/src/main/java/com/externalkeyboard/views/TextInputFocusWrapper/TextInputFocusWrapperManager.java

@@ -1,20 +1,15 @@
 package com.externalkeyboard.views.TextInputFocusWrapper;
 
-import android.view.View;
-import android.view.ViewGroup;
-
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 
+import java.util.Objects;
+
 import com.externalkeyboard.events.FocusChangeEvent;
 import com.externalkeyboard.events.MultiplyTextSubmit;
-import com.externalkeyboard.views.ExternalKeyboardView.ExternalKeyboardView;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.common.MapBuilder;
 import com.facebook.react.module.annotations.ReactModule;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.views.textinput.ReactEditText;
 import com.facebook.react.views.view.ReactViewGroup;
 
 import java.util.HashMap;
@@ -32,32 +27,14 @@ public class TextInputFocusWrapperManager extends com.externalkeyboard.TextInput
 
   @Override
   public TextInputFocusWrapper createViewInstance(ThemedReactContext context) {
-    return subscribeOnHierarchy(new TextInputFocusWrapper(context));
+    return new TextInputFocusWrapper(context);
   }
 
   @Override
-  protected void addEventEmitters(final ThemedReactContext reactContext, TextInputFocusWrapper viewGroup) {
-    viewGroup.subscribeOnFocus();
-  }
-
-  protected TextInputFocusWrapper subscribeOnHierarchy(TextInputFocusWrapper viewGroup) {
-    viewGroup.setOnHierarchyChangeListener(new ViewGroup.OnHierarchyChangeListener() {
-      @Override
-      public void onChildViewAdded(View parent, View child) {
-        if (child instanceof ReactEditText) {
-          viewGroup.setEditText((ReactEditText) child);
-        }
-      }
-
-      @Override
-      public void onChildViewRemoved(View parent, View child) {
-        if (child instanceof ReactEditText) {
-          viewGroup.setEditText(null);
-        }
-      }
-    });
-
-    return viewGroup;
+  protected void addEventEmitters(final ThemedReactContext reactContext, ReactViewGroup viewGroup) {
+    if(viewGroup instanceof TextInputFocusWrapper) {
+      ((TextInputFocusWrapper)viewGroup).subscribeOnFocus();
+    }
   }
 
   @Override
@@ -89,6 +66,96 @@ public class TextInputFocusWrapperManager extends com.externalkeyboard.TextInput
     //stub
   }
 
+  @Override
+  @ReactProp(name = "orderGroup")
+  public void setOrderGroup(TextInputFocusWrapper view, @Nullable String value) {
+    if (!Objects.equals(view.getOrderGroup(), value)) {
+      view.setOrderGroup(value);
+    }
+  }
+
+  @Override
+  @ReactProp(name = "orderIndex")
+  public void setOrderIndex(TextInputFocusWrapper view, int value) {
+    if (!Objects.equals(view.getOrderIndex(), value)) {
+      view.setOrderIndex(value);
+    }
+  }
+
+  @Override
+  @ReactProp(name = "orderId")
+  public void setOrderId(TextInputFocusWrapper view, @Nullable String value) {
+    if (!Objects.equals(view.orderId, value)) {
+      view.orderId = value;
+    }
+  }
+
+  @Override
+  @ReactProp(name = "orderLeft")
+  public void setOrderLeft(TextInputFocusWrapper view, @Nullable String value) {
+    if (!Objects.equals(view.getOrderLeft(), value)) {
+      view.setOrderLeft(value);
+    }
+  }
+
+  @Override
+  @ReactProp(name = "orderRight")
+  public void setOrderRight(TextInputFocusWrapper view, @Nullable String value) {
+    if (!Objects.equals(view.getOrderRight(), value)) {
+      view.setOrderRight(value);
+    }
+  }
+
+  @Override
+  @ReactProp(name = "orderUp")
+  public void setOrderUp(TextInputFocusWrapper view, @Nullable String value) {
+    if (!Objects.equals(view.getOrderUp(), value)) {
+      view.setOrderUp(value);
+    }
+  }
+
+  @Override
+  @ReactProp(name = "orderDown")
+  public void setOrderDown(TextInputFocusWrapper view, @Nullable String value) {
+    if (!Objects.equals(view.getOrderDown(), value)) {
+      view.setOrderDown(value);
+    }
+  }
+
+  @Override
+  @ReactProp(name = "orderForward")
+  public void setOrderForward(TextInputFocusWrapper view, @Nullable String value) {
+    if (!Objects.equals(view.orderForward, value)) {
+      view.orderForward = value;
+    }
+  }
+
+  @Override
+  @ReactProp(name = "orderBackward")
+  public void setOrderBackward(TextInputFocusWrapper view, @Nullable String value) {
+    if (!Objects.equals(view.orderBackward, value)) {
+      view.orderBackward = value;
+    }
+  }
+
+  @Override
+  @ReactProp(name = "lockFocus")
+  public void setLockFocus(TextInputFocusWrapper view, int value) {
+    if (view.lockFocus != value) {
+      view.lockFocus = value;
+    }
+  }
+
+  @Override
+  public void setOrderFirst(TextInputFocusWrapper view, @Nullable String value) {
+    //stub
+  }
+
+  @Override
+  public void setOrderLast(TextInputFocusWrapper view, @Nullable String value) {
+    //stub
+  }
+
 
   @Override
   @ReactProp(name = "canBeFocused", defaultBoolean = true)
@@ -97,8 +164,9 @@ public class TextInputFocusWrapperManager extends com.externalkeyboard.TextInput
   }
 
   @Override
+  @ReactProp(name = "haloEffect", defaultBoolean = true)
   public void setHaloEffect(TextInputFocusWrapper view, boolean value) {
-    //stub
+    view.setFocusHighlight(value);
   }
 
   @Override
@@ -107,9 +175,12 @@ public class TextInputFocusWrapperManager extends com.externalkeyboard.TextInput
   }
 
   @Override
-  public void onDropViewInstance(@NonNull TextInputFocusWrapper viewGroup) {
-    viewGroup.setEditText(null);
-    viewGroup.setOnFocusChangeListener(null);
+  public void onDropViewInstance(@NonNull ReactViewGroup viewGroup) {
+    if(viewGroup instanceof TextInputFocusWrapper) {
+      ((TextInputFocusWrapper)viewGroup).onDropViewInstance();
+      ((TextInputFocusWrapper)viewGroup).setEditText(null);
+      viewGroup.setOnFocusChangeListener(null);
+    }
     super.onDropViewInstance(viewGroup);
   }
 
@@ -129,4 +200,22 @@ public class TextInputFocusWrapperManager extends com.externalkeyboard.TextInput
 
     return export;
   }
+
+  @Override
+  @ReactProp(name = "haloExpendY")
+  public void setHaloExpendY(TextInputFocusWrapper view, float value) {
+
+  }
+
+  @Override
+  @ReactProp(name = "haloExpendX")
+  public void setHaloExpendX(TextInputFocusWrapper view, float value) {
+
+  }
+
+  @Override
+  @ReactProp(name = "haloCornerRadius")
+  public void setHaloCornerRadius(TextInputFocusWrapper view, float value) {
+
+  }
 }

package/android/src/main/java/com/externalkeyboard/views/base/FocusHighlightBase.java

@@ -0,0 +1,38 @@
+package com.externalkeyboard.views.base;
+
+import android.content.Context;
+import android.os.Build;
+import android.view.View;
+
+public class FocusHighlightBase extends ViewOrderGroupBase {
+  protected boolean focusHighlight = true;
+
+  public void setFocusHighlight (boolean defaultFocusHighlightEnabled) {
+    focusHighlight = defaultFocusHighlightEnabled;
+    syncFocusHighlight();
+  }
+
+  protected View getFocusHighlightView () {
+    return this.getFirstChild();
+  }
+
+  protected void syncFocusHighlight () {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+      View child = this.getFocusHighlightView();
+      if(child != null) {
+        child.setDefaultFocusHighlightEnabled(focusHighlight);
+      }
+    }
+  }
+
+  @Override
+  public void linkAddView(View child) {
+    super.linkAddView(child);
+    syncFocusHighlight();
+  }
+
+  public FocusHighlightBase(Context context) {
+    super(context);
+  }
+
+}

package/android/src/main/java/com/externalkeyboard/views/base/ViewGroupBase.java

@@ -0,0 +1,19 @@
+package com.externalkeyboard.views.base;
+
+import android.content.Context;
+import android.view.View;
+
+import com.externalkeyboard.helper.FocusHelper;
+import com.facebook.react.views.view.ReactViewGroup;
+
+public class ViewGroupBase extends ReactViewGroup {
+
+  public ViewGroupBase(Context context) {
+    super(context);
+  }
+
+  protected View getFocusingView() {
+    View focusableView = FocusHelper.getFocusableView(this);
+    return focusableView != null ? focusableView : this;
+  }
+}