react-native-easy-keyboard v0.2.0

react-native-easy-keyboard

A simple way to create virtual keyboards for React Native

Installation

Install the package with npm

npm i --save react-native-easy-keyboard

or with yarn

yarn add react-native-easy-keyboard

How do I change the layout of my keyboard?

react-native-easy-keyboard layouts are made up of lists of strings or KeyConfig objects representing each row of the keyboard.

With strings

import EasyKeyboard, {KeyboardConfig} from 'react-native-easy-keyboard';

const myCustomLayout: KeyboardConfig = {
  layouts: {
    default: [
      ['7', '8', '9'],
      ['4', '5', '6'],
      ['1', '2', '3'],
    ],
  },
};

return <EasyKeyboard config={myCustomLayout} />;

With KeyConfig objects

import EasyKeyboard, {KeyboardConfig} from 'react-native-easy-keyboard';

const myCustomLayout: KeyboardConfig = {
  layouts: {
    default: [
      [{value: '7'}, {value: '8'}, {value: '9'}],
      [{value: '4'}, {value: '5'}, {value: '6'}],
      [{value: '1'}, {value: '2'}, {value: '3'}],
    ],
  },
};

<EasyKeyboard config={myCustomLayout} />;

They can also be mixed

import EasyKeyboard, {KeyboardConfig} from 'react-native-easy-keyboard';

const myCustomLayout: KeyboardConfig = {
  layouts: {
    default: [
      ['7', {value: '8'}, '9'],
      [{value: '4'}, '5', {value: '6'}],
      ['1', {value: '2'}, '3'],
    ],
  },
};

<EasyKeyboard config={myCustomLayout} />;

How do I change the size of my keys?

To change the size of a key you can either use the size property of the KeyConfig object or end your string with a pair of curly brackets containing the desired size.

The "8" key in these examples will be the width of 3 default size keys

With strings

import EasyKeyboard, {KeyboardConfig} from 'react-native-easy-keyboard';

const myCustomLayout: KeyboardConfig = {
  layouts: {
    default: [['7', '8{3}', '9']],
  },
};

return <EasyKeyboard config={myCustomLayout} />;

With KeyConfig objects

import EasyKeyboard, {KeyboardConfig} from 'react-native-easy-keyboard';

const myCustomLayout: KeyboardConfig = {
  layouts: {
    default: [[{value: '7'}, {value: '8', size: 3}, {value: '9'}]],
  },
};

<EasyKeyboard config={myCustomLayout} />;

How do I change the style of my keyboard?

import EasyKeyboard, {KeyboardTheme} from 'react-native-easy-keyboard';

const myTheme: KeyboardTheme = {
  containerStyle: {
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  rowStyle: {},
  keyStyle: {},
  textStyle: {},
};

<EasyKeyboard theme={myTheme} />;

How do I change the text on a key?

To change the text displayed on a key you can either configure the displayOptions in the KeyboardConfig, (this will affect all keys in every layout) or you can use the display option in the KeyConfig object.

With displayOptions

import EasyKeyboard, {KeyboardConfig} from 'react-native-easy-keyboard';

const myCustomLayout: KeyboardConfig = {
  layouts: {
    default: [['7', '8', '9', '{del}']],
  },
  displayOptions: {
    display: {
      '{del}': '<- Delete',
      '9': 'Nine',
    },
  },
};

<EasyKeyboard config={myCustomLayout} />;

With KeyConfig

import EasyKeyboard, {KeyboardConfig} from 'react-native-easy-keyboard';

const myCustomLayout: KeyboardConfig = {
  layouts: {
    default: [
      [
        '7',
        '8',
        {value: '9', display: 'Nine'},
        {value: '{del}', display: '<- Delete'},
      ],
    ],
  },
};

<EasyKeyboard config={myCustomLayout} />;

KeyboardTheme

KeyConfig

KeyboardConfig

EasyKeyboard Component

Methods

Props

Events