@logicwind/react-native-tvos-keyboard v0.1.2

@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

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 { TvosKeyboardView } from '@logicwind/react-native-tvos-keyboard';

<TvosKeyboardView
  style={styles.keyboard}
  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');
    }
  }}
/>;

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

Props

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

💡 Note: The keyboard has a fixed size and layout. Please use the style shown in the example to ensure proper rendering and alignment.

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

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