react-native-external-keyboard-listener

react-native-external-keyboard-listener

React Native listen event from external keyboard.

• It offers the feature to listen all keyboard connection status. Includes: Bluetooth keyboard, Bluetooth scanner, Bluetooth custom keyset,... since I handled it by service id 0x180f and 0x1812 from Bluetooth devices
• It offers functionality similar to react-native-keyevent while eliminating the need for manual modifications to your Android and iOS project folders.

Installation

npm install react-native-external-keyboard-listener 
#OR
yarn add react-native-external-keyboard-listener

npx pod-install

Permissions

• Android: Add these lines to your AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
   ...

   <!-- Android >= 12 -->
   <uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
   <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
   <!-- Android < 12 -->
   <uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30" />
   <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" android:maxSdkVersion="30" />
   <!-- common -->
   <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" android:maxSdkVersion="30" />

   <!-- Add this line if your application always requires BLE. More info can be found on:
       https://developer.android.com/guide/topics/connectivity/bluetooth-le.html#permissions
     -->
   <uses-feature android:name="android.hardware.bluetooth_le" android:required="true"/>

    ...

• iOS: Add this key to your Info.plist:

<key>NSBluetoothAlwaysUsageDescription</key>
<string>This app requires Bluetooth access</string>

Usage

API Reference

startListening()

• Signature: startListening(): void
• Description: Begins listening for external keyboard connection status, emitting callbacks “KeyboardConnectionChanged.”
• Example:

ExternalKeyboardListenerEmitter.startListening();

stopListening()

• Signature: stopListening(): void
• Description: Stops listening for external keyboard connection status.
• Example:

ExternalKeyboardListenerEmitter.stopListening();

checkKeyboardConnection()

• Signature: checkKeyboardConnection(): Promise<boolean>
• Description: Checks if an external keyboard is connected or not.
• Example:

const isConnected = await ExternalKeyboardListenerEmitter.checkKeyboardConnection();
console.log('Keyboard connected:', isConnected);

isBluetoothEnabled()

• Signature: isBluetoothEnabled(): Promise<boolean>
• Description: Check if device Bluetooth is enabled or not. • Example:

await ExternalKeyboardListenerEmitter.isBluetoothEnabled();

enableBluetooth()

• Signature: enableBluetooth(): Promise<void>
• Description: Opens system Bluetooth settings to allow enabling Bluetooth.
• Example:

await ExternalKeyboardListenerEmitter.enableBluetooth();

requestBluetoothPermission()

• Signature: requestBluetoothPermission(): Promise<boolean>
• Description: Requests Bluetooth permissions.
• Example:

const granted = await ExternalKeyboardListenerEmitter.requestBluetoothPermission();
console.log('Permission granted:', granted);

startKeyPressListener(callback: (event: KeyPressEvent) => void)

• Signature: startKeyPressListener(callback: (event: KeyPressEvent) => void): { remove: () => void }
• Description: Subscribes to key press events from an external keyboard. - Android: Supports all key actions (up, down, unknown,... ), more info: Android KeyEvents - iOS: Supports Key up and Key down events • Example:

const subscription = ExternalKeyboardListenerEmitter.startKeyPressListener((evt) => {
    console.log('Key pressed:', evt);
});

// Stop listening:
subscription.remove();

Notice: In iOS, when you active TextInput some special key might not be listenable

To get over that issue, you might have to follow these steps: 1. Run the command: npm install patch-package postinstall-postinstall -D # OR yarn add patch-package postinstall-postinstall -D 2. Add these code to node_modules/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm and node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm: ``` ...

    - (NSArray<UIKeyCommand *> *)keyCommands {
        if (self.isFirstResponder) {
            //Add more if you needed
            return @[
            [UIKeyCommand keyCommandWithInput:UIKeyInputEscape
                                modifierFlags:0
                                        action:@selector(handleEscapeKeyPress)]
            ];
        }
        return @[];
    }

    // Handle Escape key press
    - (void)handleEscapeKeyPress {
        NSLog(@"Escape key pressed in RCTTextField");
        // You can add custom logic here, such as dismissing the keyboard
        [self resignFirstResponder];  // For example, dismiss the keyboard
    }
```
    1. Run the command:
```
    npx patch-package react-native
```
4. In your `package.json` file, ensure that this line is added inside `"script"`:

```
    "scripts": {
        ...
        "postinstall": "patch-package",
        ...
    },
```

TODO list

• Fix all //FIXME tags
• Implement specific bluetooth device listener by name, desciption, service
• Support virtual keyboard input

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library