react-native-external-keyboard 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2023 Artur Kalach
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,113 @@
+# React Native External Keyboard
+### react-native-external-keyboard
+
+React Native library for extended external keyboard support.
+
+
+
+## Features
+- Forcing keyboard focus (moving the keyboard focus to the specific element)
+- A key press handling
+
+## Installation
+
+```sh
+npm install react-native-external-keyboard
+```
+
+iOS:
+```sh
+cd ios && pod install && cd ..
+```
+
+## Usage
+
+
+### Pressable
+Updated pressable component with handling long press events on a keyboard 
+```js
+import { Pressable,  } from "react-native-external-keyboard";
+
+// ...
+
+ <Pressable
+    focusStyle={{ backgroundColor: '#cdf2ef' }}
+    onPress={() => console.log('onPress')}
+    onPressIn={() => console.log('onPressIn')}
+    onPressOut={() => console.log('onPressOut')}
+    onLongPress={() => console.log('onLongPress')}
+    >
+    <Text>On Press Check</Text>
+</Pressable>
+```
+
+### KeyboardFocusView
+The KeyboardFocusView component is core component for keyboard handling, it is used for force focusing and handling `onFocusChange` event
+```js
+import { KeyboardFocusView } from "react-native-external-keyboard";
+// ...
+
+<KeyboardFocusView
+    focusStyle={{ backgroundColor: '#a0dcbe' }}
+    onFocusChange={(e) => console.log(e.nativeEvent.isFocused)}
+>
+    <Text>Focusable</Text>
+</KeyboardFocusView>
+```
+
+If you want to move keyboard focus, you need to have a `ref` for the target component. It is important to use `KeyboardFocusView` as the target component (There can be a problem with moving focus for iOS if you use any component other than `KeyboardFocusView`).
+
+
+```js
+import {
+  KeyboardFocusView,
+  A11yModule,
+  Pressable as KPressable,
+} from 'react-native-external-keyboard';
+// ...
+ <KPressable onPress={() => A11yModule.setKeyboardFocus(ref)}>
+   <Text>On Press Check</Text>
+ </KPressable>
+ <KeyboardFocusView
+    onFocusChange={(e) => console.log(e.nativeEvent.isFocused)}
+    >
+    <Text>Focusable</Text>
+ </KeyboardFocusView>
+```
+
+### ExternalKeyboardView
+It is a bare `Native` component. It is better to use `KeyboardFocusView` if you don't need your own specific implementation.
+
+Important: If you use `KeyboardFocusView` on Android, you need to use a children component with the `accessible` prop.
+
+
+```js
+import { ExternalKeyboardView } from 'react-native-external-keyboard';
+// ...
+<ExternalKeyboardView
+        onKeyDownPress={...}
+        onKeyUpPress={...}
+        canBeFocused
+      >
+    <View accessible>
+        <Text>Content</Text>
+    </View>
+</ExternalKeyboardView>
+```
+
+# Important
+## iOS
+New versions of iOS have specific `commands` for `physical keyboards`. If you can't handle a `long press event` on iOS, it may be that the `space` key is bound to an `Activate` command. Clearing the `Activate` command will help with handling of the `long press` event. There is no known way to handle this (if you have any ideas, please share).
+
+User can change `Commands` in:
+`Settings` -> `Accessibility` -> `Keyboards` -> `Full Keyboard Access` -> `Commands`
+
+
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/android/Android.mk

@@ -0,0 +1,45 @@
+THIS_DIR := $(call my-dir)
+
+include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
+
+include ${GENERATED_SRC_DIR}/codegen/jni/Android.mk
+
+include $(CLEAR_VARS)
+
+LOCAL_PATH := $(THIS_DIR)
+
+# Define the library name here.
+LOCAL_MODULE := ${CODEGEN_MODULE_NAME}_registration
+
+LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp)
+
+LOCAL_SHARED_LIBRARIES := \
+  libfabricjni \
+  libfbjni \
+  libglog \
+  libjsi \
+  libreact_codegen_rncore \
+  libreact_codegen_${CODEGEN_MODULE_NAME} \
+  libreact_debug \
+  libreact_nativemodule_core \
+  libreact_render_componentregistry \
+  libreact_render_core \
+  libreact_render_debug \
+  libreact_render_graphics \
+  librrc_view \
+  libruntimeexecutor \
+  libturbomodulejsijni \
+  libyoga
+
+ifneq ($(filter $(call modules-get-list),folly_runtime),)
+  LOCAL_SHARED_LIBRARIES += libfolly_runtime # since react-native@0.69
+else
+  LOCAL_SHARED_LIBRARIES += libfolly_futures libfolly_json # react-native@0.68
+endif
+
+LOCAL_CFLAGS := \
+  -DLOG_TAG=\"ReactNative\" \
+  -DCODEGEN_COMPONENT_DESCRIPTOR_H="<react/renderer/components/${CODEGEN_MODULE_NAME}/ComponentDescriptors.h>"
+LOCAL_CFLAGS += -fexceptions -frtti -std=c++17 -Wall
+
+include $(BUILD_SHARED_LIBRARY)

package/android/build.gradle

@@ -0,0 +1,139 @@
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:7.2.1"
+  }
+}
+
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+
+import groovy.json.JsonSlurper
+
+// https://github.com/callstack/react-native-builder-bob/discussions/359
+def registrationCompat = {
+  def reactNativeManifest = file("$projectDir/../node_modules/react-native/package.json").exists()
+    ? file("$projectDir/../node_modules/react-native/package.json") // developer mode, to run example app
+    : file("$projectDir/../../react-native/package.json")
+  def reactNativeVersion = new JsonSlurper().parseText(reactNativeManifest.text).version as String
+  // Fabric was introduced at react-native@0.68, full CMake support were introduced at react-native@0.71
+  // Use Android.mk for compatibility with react-native@0.68/0.69
+  reactNativeVersion.matches('(0.68.*|0.69.*)')
+}()
+
+def codegenViewLibraryName = "ExternalKeyboardView"
+def codegenViewModuleName = {
+  // Autolink for Fabric uses codegenConfig.name in package.json since react-native@0.70
+  // Use codegenViewLibraryName for compatibility with react-native@0.68/0.69
+  def libraryManifestJson = new JsonSlurper().parseText(file("$projectDir/../package.json").text)
+  registrationCompat ? codegenViewLibraryName : libraryManifestJson.codegenConfig.name
+}()
+
+def appProject = rootProject.allprojects.find { it.plugins.hasPlugin('com.android.application') }
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["ExternalKeyboard_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["ExternalKeyboard_" + name]).toInteger()
+}
+
+android {
+  ndkVersion getExtOrDefault("ndkVersion")
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+    buildConfigField "String", "CODEGEN_MODULE_REGISTRATION", (isNewArchitectureEnabled() && registrationCompat ? "\"${codegenViewModuleName}_registration\"" : "null")
+    if (isNewArchitectureEnabled() && registrationCompat) {
+      def reactAndroidProject = project(':ReactAndroid')
+      externalNativeBuild {
+        ndkBuild {
+          arguments "APP_PLATFORM=android-21",
+                    "APP_STL=c++_shared",
+                    "NDK_TOOLCHAIN_VERSION=clang",
+                    "GENERATED_SRC_DIR=$buildDir/generated/source", // for react_codegen_* in this library's codegen/jni
+                    "PROJECT_BUILD_DIR=${appProject.buildDir}", // for REACT_NDK_EXPORT_DIR in ReactAndroid's Android-prebuilt.mk
+                    "REACT_ANDROID_DIR=${reactAndroidProject.projectDir}",
+                    "REACT_ANDROID_BUILD_DIR=${reactAndroidProject.buildDir}",
+                    "CODEGEN_MODULE_NAME=$codegenViewModuleName"
+          cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1"
+          cppFlags "-std=c++17"
+          targets "${codegenViewModuleName}_registration"
+        }
+      }
+    }
+  }
+  if (isNewArchitectureEnabled() && registrationCompat) {
+    // We configure the NDK build only if you decide to opt-in for the New Architecture.
+    externalNativeBuild {
+      ndkBuild {
+        path "Android.mk"
+      }
+    }
+  }
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+  sourceSets {
+    main {
+      if (isNewArchitectureEnabled()) {
+        java.srcDirs += [
+          "src/newarch",
+          // This is needed to build Kotlin project with NewArch enabled
+          "${project.buildDir}/generated/source/codegen/java"
+        ]
+      } else {
+        java.srcDirs += ["src/oldarch"]
+      }
+    }
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+
+dependencies {
+  // For < 0.71, this will be from the local maven repo
+  // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
+  //noinspection GradleDynamicVersion
+  implementation "com.facebook.react:react-native:+"
+}
+
+if (isNewArchitectureEnabled()) {
+  react {
+    jsRootDir = file("../src/")
+
+    libraryName = codegenViewLibraryName
+    codegenJavaPackageName = "com.externalkeyboard"
+  }
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+ExternalKeyboard_kotlinVersion=1.7.0
+ExternalKeyboard_minSdkVersion=21
+ExternalKeyboard_targetSdkVersion=31
+ExternalKeyboard_compileSdkVersion=31
+ExternalKeyboard_ndkversion=21.4.7075529

package/android/registration.cpp

@@ -0,0 +1,18 @@
+#include <CoreComponentsRegistry.h>
+#include CODEGEN_COMPONENT_DESCRIPTOR_H
+
+namespace facebook {
+namespace react {
+
+void registerProviders() {
+    auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
+    providerRegistry->add(concreteComponentDescriptorProvider<ExternalKeyboardViewComponentDescriptor>());
+}
+
+}
+}
+
+JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
+    facebook::react::registerProviders();
+    return JNI_VERSION_1_6;
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.externalkeyboard">
+
+</manifest>

package/android/src/main/java/com/externalkeyboard/A11yKeyboardModule.java

@@ -0,0 +1,46 @@
+package com.externalkeyboard;
+
+import androidx.annotation.NonNull;
+
+import com.externalkeyboard.services.KeyboardService;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactMethod;
+
+public class A11yKeyboardModule extends com.externalkeyboard.A11yKeyboardModuleSpec {
+  public static final String NAME = "A11yKeyboardModule";
+  private final KeyboardService keyboardService;
+
+  public A11yKeyboardModule(ReactApplicationContext context) {
+    super(context);
+    keyboardService = new KeyboardService(context);
+  }
+
+  @ReactMethod
+  @Override
+  public void setKeyboardFocus(double nativeTag, double _nextTag) {
+    this.keyboardService.setKeyboardFocus((int) nativeTag);
+  }
+
+  @Override
+  public void setPreferredKeyboardFocus(double nativeTag, double nextTag) {
+    //stub
+  }
+
+  @Override
+  @NonNull
+  public String getName() {
+    return NAME;
+  }
+
+
+  // Required for rn built in EventEmitter Calls.
+  @ReactMethod
+  public void addListener(String eventName) {
+
+  }
+
+  @ReactMethod
+  public void removeListeners(Integer count) {
+
+  }
+}

package/android/src/main/java/com/externalkeyboard/ExternalKeyboardViewPackage.java

@@ -0,0 +1,63 @@
+package com.externalkeyboard;
+
+
+import androidx.annotation.Nullable;
+
+import com.externalkeyboard.views.ExternalKeyboardView.ExternalKeyboardViewManager;
+import com.facebook.react.TurboReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.module.model.ReactModuleInfo;
+import com.facebook.react.module.model.ReactModuleInfoProvider;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+
+public class ExternalKeyboardViewPackage extends TurboReactPackage {
+  @Nullable
+  @Override
+  public NativeModule getModule(String name, ReactApplicationContext reactContext) {
+    if (name.equals(A11yKeyboardModule.NAME)) {
+      return new A11yKeyboardModule(reactContext);
+    } else {
+      return null;
+    }
+  }
+
+  @Override
+  public ReactModuleInfoProvider getReactModuleInfoProvider() {
+    return () -> {
+      final Map<String, ReactModuleInfo> moduleInfos = new HashMap<>();
+      boolean isTurboModule = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
+      moduleInfos.put(
+        A11yKeyboardModule.NAME,
+        new ReactModuleInfo(
+          A11yKeyboardModule.NAME,
+          A11yKeyboardModule.NAME,
+          false, // canOverrideExistingModule
+          false, // needsEagerInit
+          true, // hasConstants
+          false, // isCxxModule
+          isTurboModule // isTurboModule
+        ));
+      return moduleInfos;
+    };
+  }
+
+  @Override
+  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+    List<ViewManager> viewManagers = new ArrayList<>();
+    viewManagers.add(new ExternalKeyboardViewManager());
+    return viewManagers;
+  }
+
+  @Override
+  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+    return Collections.emptyList();
+  }
+}

package/android/src/main/java/com/externalkeyboard/events/FocusChangeEvent.java

@@ -0,0 +1,39 @@
+package com.externalkeyboard.events;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+
+public class FocusChangeEvent extends Event<FocusChangeEvent> {
+  public static String EVENT_NAME = "topOnFocusChange";
+  public WritableMap mExtraData;
+
+  public FocusChangeEvent(int id, Boolean hasFocus) {
+    super(id);
+    WritableMap eventPayload = Arguments.createMap();
+    eventPayload.putBoolean("isFocused", hasFocus);
+    this.mExtraData = eventPayload;
+  }
+
+  @Override
+  public void dispatch(RCTEventEmitter rCTEventEmitter) {
+    rCTEventEmitter.receiveEvent(this.getViewTag(), this.getEventName(), this.mExtraData);
+  }
+
+  @Override
+  public short getCoalescingKey() {
+    return 0;
+  }
+
+  @Override
+  public boolean canCoalesce() {
+    return false;
+  }
+
+  @Override
+  public String getEventName() {
+    return EVENT_NAME;
+  }
+}

package/android/src/main/java/com/externalkeyboard/events/KeyPressDownEvent.java

@@ -0,0 +1,49 @@
+package com.externalkeyboard.events;
+
+import android.view.KeyEvent;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+public class KeyPressDownEvent extends Event<KeyPressDownEvent> {
+  public static String EVENT_NAME = "topOnKeyDownPress";
+  public WritableMap mExtraData;
+
+  public KeyPressDownEvent(int id, int keyCode, KeyEvent keyEvent) {
+    super(id);
+
+    WritableMap eventPayload = Arguments.createMap();
+    eventPayload.putInt("keyCode", keyCode);
+    eventPayload.putBoolean("isLongPress", keyEvent.isLongPress());
+    eventPayload.putBoolean("isAltPressed", keyEvent.isAltPressed());
+    eventPayload.putBoolean("isShiftPressed", keyEvent.isShiftPressed());
+    eventPayload.putBoolean("isCtrlPressed", keyEvent.isCtrlPressed());
+    eventPayload.putBoolean("isCapsLockOn", keyEvent.isCapsLockOn());
+    eventPayload.putBoolean("hasNoModifiers", keyEvent.hasNoModifiers());
+
+    this.mExtraData = eventPayload;
+  }
+
+  @Override
+  public void dispatch(RCTEventEmitter rCTEventEmitter) {
+    rCTEventEmitter.receiveEvent(this.getViewTag(), this.getEventName(), this.mExtraData);
+  }
+
+  @Override
+  public short getCoalescingKey() {
+    return 0;
+  }
+
+  @Override
+  public boolean canCoalesce() {
+    return false;
+  }
+
+  @Override
+  public String getEventName() {
+    return EVENT_NAME;
+  }
+
+}

package/android/src/main/java/com/externalkeyboard/events/KeyPressUpEvent.java

@@ -0,0 +1,49 @@
+package com.externalkeyboard.events;
+
+import android.view.KeyEvent;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+public class KeyPressUpEvent extends Event<KeyPressUpEvent> {
+  public static String EVENT_NAME = "topOnKeyUpPress";
+  public WritableMap mExtraData;
+
+  public KeyPressUpEvent(int id, int keyCode, KeyEvent keyEvent, boolean isLongPress) {
+    super(id);
+
+    WritableMap eventPayload = Arguments.createMap();
+    eventPayload.putInt("keyCode", keyCode);
+    eventPayload.putBoolean("isLongPress", isLongPress);
+    eventPayload.putBoolean("isAltPressed", keyEvent.isAltPressed());
+    eventPayload.putBoolean("isShiftPressed", keyEvent.isShiftPressed());
+    eventPayload.putBoolean("isCtrlPressed", keyEvent.isCtrlPressed());
+    eventPayload.putBoolean("isCapsLockOn", keyEvent.isCapsLockOn());
+    eventPayload.putBoolean("hasNoModifiers", keyEvent.hasNoModifiers());
+
+    this.mExtraData = eventPayload;
+  }
+
+  @Override
+  public void dispatch(RCTEventEmitter rCTEventEmitter) {
+    rCTEventEmitter.receiveEvent(this.getViewTag(), this.getEventName(), this.mExtraData);
+  }
+
+  @Override
+  public short getCoalescingKey() {
+    return 0;
+  }
+
+  @Override
+  public boolean canCoalesce() {
+    return false;
+  }
+
+  @Override
+  public String getEventName() {
+    return EVENT_NAME;
+  }
+
+}

package/android/src/main/java/com/externalkeyboard/services/KeyboardKeyPressHandler.java

@@ -0,0 +1,56 @@
+package com.externalkeyboard.services;
+
+import android.os.Build;
+import android.view.KeyEvent;
+
+import java.util.HashMap;
+
+public class KeyboardKeyPressHandler {
+  private final HashMap<Integer, Boolean> pressedKeys = new HashMap<Integer, Boolean>();
+  private final HashMap<Integer, Boolean> longPress = new HashMap<Integer, Boolean>();
+
+  private boolean actionDownHandler(int keyCode, KeyEvent keyEvent) {
+    boolean wasAlreadyPressed = false;
+    if (pressedKeys.containsKey(keyCode)) {
+      wasAlreadyPressed = pressedKeys.get(keyCode);
+    }
+    pressedKeys.put(keyCode, true);
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ECLAIR && keyEvent.isLongPress()) {
+      longPress.put(keyCode, keyEvent.isLongPress());
+    }
+
+    return !wasAlreadyPressed;
+  }
+
+  private boolean actionUpHandler(int keyCode, KeyEvent keyEvent) {
+    pressedKeys.put(keyCode, false);
+
+    boolean isLongPress = false;
+    if (longPress.containsKey(keyCode)) {
+      isLongPress = longPress.get(keyCode);
+    }
+    longPress.put(keyCode, false);
+
+    return isLongPress;
+  }
+
+  public PressInfo getEventsFromKeyPress(int keyCode, KeyEvent keyEvent) {
+    PressInfo pressInfo = new PressInfo();
+
+    if (keyEvent.getAction() == KeyEvent.ACTION_DOWN) {
+      pressInfo.firePressDownEvent = actionDownHandler(keyCode, keyEvent);
+    }
+    if (keyEvent.getAction() == KeyEvent.ACTION_UP) {
+      pressInfo.firePressUpEvent = true;
+      pressInfo.isLongPress = actionUpHandler(keyCode, keyEvent);
+    }
+
+    return pressInfo;
+  }
+
+  public class PressInfo {
+    public boolean firePressDownEvent = false;
+    public boolean firePressUpEvent = false;
+    public boolean isLongPress = false;
+  }
+}