How to Detect Arrow Key and Space Key Press Events?

[mohdali-127]

Hi,

I'm using react-native-external-keyboard in my React Native project, and I need to handle specific key press events. I want to trigger actions when the user presses the left arrow key, right arrow key, or space key.

Is there a built-in method in this library to detect these key events? If so, could you provide an example of how to implement it?

Thanks in advance!

[ArturKalach]

Dear @mohdali-127,

I am so sorry for avoiding this question for such a long time, but I’ve been really busy and exhausted from coding. I hope you can understand.

So...
Handling the space key and arrow keys can be quite tricky because Android and iOS have their own distinct keyboard systems, making it difficult to reliably detect certain key presses.

By default, iOS triggers the onPress event when the space key is pressed (keyDown). So, if you need to handle an event using the space key, you can use the onPress handler effectively.

For arrow keys, that's an interesting challenge. By default, arrow keys are primarily used for navigation. Even though it's possible to detect them, the main issue arises when trying to prevent them from moving focus to another component.

---

You can test how KeyboardExtendedBaseView will work for you

 <KeyboardExtendedBaseView
    onKeyDownPress={(e) => console.log('down:', e)}
    onKeyUpPress={(e) => console.log('up:', e)}
    focussable
  >
    <Text>Content</Text>
  </KeyboardExtendedBaseView>

However, there might be cases where you need a different API. I believe I’ve come across something like the GameController API, but I haven’t had the time to work on its implementation yet.

Feel free to ask any question, and share ideas, I will try to answer timely.
Once more time sorry for waiting so long.

Regards,
Artur Kalach