@logicwind/react-native-tvos-keyboard

@logicwind/react-native-tvos-keyboard is a React Native package for tvOS that displays a native Apple TV keyboard using UISearchController, with built-in support for voice typing and seamless integration with the tvOS focus engine.

Installation

Using npm:

npm install @logicwind/react-native-tvos-keyboard

or using yarn:

yarn add @logicwind/react-native-tvos-keyboard

Expo Setup

If you're working with this Expo project, make sure to run:

npx expo prebuild

iOS Setup

After installation, make sure to install CocoaPods:

cd ios && pod install

Android Setup

No additional setup is required.

Usage

Import and use the TvosKeyboardView component.

import { useState } from 'react';
import { TvosKeyboardView } from '@logicwind/react-native-tvos-keyboard';

const [keyboardHeight, setKeyboardHeight] = useState(200);

<TvosKeyboardView
  style={[styles.keyboard, { height: keyboardHeight }]}
  onTextChange={(e) => console.log('Text: ', e.nativeEvent.text)}
  onFocus={(e) => {
    if (e.nativeEvent.focused !== undefined && e.nativeEvent.focused) {
      console.log('Focused: true');
    }
  }}
  onBlur={(e) => {
    if (e.nativeEvent.blurred !== undefined && e.nativeEvent.blurred) {
      console.log('Focused: false');
    }
  }}
  onKeyboardLayoutChange={(e) => {
    setKeyboardHeight(e.nativeEvent.height);
    console.log('isGrid: ', e.nativeEvent.isGrid);
  }}
/>;

const styles = StyleSheet.create({
  keyboard: {
    width: '100%',
    backgroundColor: 'transparent',
  },
});

Props

The TvosKeyboardView component displays the native Apple TV keyboard and supports the following props:

Prop	Type	Description
onTextChange	(event) => void	Callback triggered when the text input changes. Access the text via event.nativeEvent.text.
onFocus	(event) => void	Called when the keyboard gains focus. Use event.nativeEvent.focused to check if it’s focused.
onBlur	(event) => void	Called when the keyboard loses focus. Use event.nativeEvent.blurred to check if it’s blurred.
onKeyboardLayoutChange	(event) => void	Called when the keyboard switches between linear and grid layouts. Provides event.nativeEvent.height (number) and event.nativeEvent.isGrid (boolean). Use this to dynamically set the component height.
gridSeparatorColor	ColorValue	Color of the separator line shown in grid keyboard layout.
linearSeparatorColor	ColorValue	Color of the separator line shown in linear keyboard layout.

💡 Note: The keyboard height changes dynamically depending on whether the grid or linear layout is active. Use onKeyboardLayoutChange to receive the correct height and apply it to the component’s style.

react-native-tvos-keyboard is crafted mindfully at Logicwind

We are a 130+ people company developing and designing multiplatform applications using the Lean & Agile methodology. To get more information on the solutions that would suit your needs, feel free to get in touch by email or through or contact form!

We will always answer you with pleasure 😁

License

This project is licensed under the MIT License - see the LICENSE file for details