Skip to content

dotconnor/react-native-key-commands

This branch is 1 commit ahead of envoy/react-native-key-commands:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jan 31, 2020
98afae0 · Jan 31, 2020

History

20 Commits
Mar 14, 2018
Jan 31, 2020
Jan 31, 2020
Jan 31, 2020
Jan 31, 2020
Mar 13, 2018
Mar 14, 2018
Jan 31, 2020
Jan 31, 2020
Jan 31, 2020

Repository files navigation

react-native-key-commands

iOS UIKeyCommand native component for React Native

Install

npm install @envoy/react-native-key-commands

or

yarn add @envoy/react-native-key-commands

then

react-native link

Usage

import React from 'react'
import { NativeSyntheticEvent } from 'react-native'
import KeyCommands, {
  KeyCommand,
  constants,
} from '@envoy/react-native-key-commands'


export default class MyComponent: React.Component {
  render () {
    return (
      <KeyCommands
        style={styles.myStyle}
        keyCommands={[
          {
            input: keyCommandConstants.keyInputDownArrow,
          },
          {
            input: "1",
            keyModifier: constants.keyModifierCommand,
            discoverabilityTitle: "Do something cool",
          },
          {
            input: "c",
            keyModifier: constants.keyModifierCommand
          }
        ]}
        onKeyCommand={this.onKeyCommand}>
        <View>
          {/* .. other views.. */}
        </View>
      </KeyCommands>
    )
  }
  
  private onKeyCommand = (event: NativeSyntheticEvent<KeyCommand>) => {
    if (event.nativeEvent.input === '1' && event.keyModifiers === constants.keyModifierCommand) {
      // do something here
    }
  }
}

To combine key modifiers, you can use | (bit-wise OR) operator, for example, you can define a shortcut CMD + ALT + C like this

{
  input: "c",
  keyModifier: constants.keyModifierCommand | constants.,keyModifierAlternate
  discoverabilityTitle: "Do something cool"
}

Constants

Constants are exposed as constatns under the package. You can import it via

import { constants } from '@envoy/react-native-key-commands'

Here's the value mapping from constants to iOS constant values

  • keyModifierShift: UIKeyModifierShift
  • keyModifierControl: UIKeyModifierControl
  • keyModifierAlternate: UIKeyModifierAlternate
  • keyModifierCommand: UIKeyModifierCommand
  • keyModifierNumericPad: UIKeyModifierNumericPad
  • keyInputUpArrow: UIKeyInputUpArrow
  • keyInputDownArrow: UIKeyInputDownArrow
  • keyInputLeftArrow: UIKeyInputLeftArrow
  • keyInputRightArrow: UIKeyInputRightArrow
  • keyInputEscape: UIKeyInputEscape

About

iOS UIKeyCommand native component for React Native

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Objective-C 62.2%
  • TypeScript 30.4%
  • Ruby 7.4%