react-native-interactive-keyboard/src/CustomKeyboardView.js

Keyboard with accessories on iOS and Android

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import TextInputKeyboardManagerIOS from './TextInputKeyboardMangerIOS';
import KeyboardRegistry from './KeyboardsRegistry';


export default class CustomKeyboardView extends Component {
    static propTypes = {
        inputRef: PropTypes.object,
        initialProps: PropTypes.object,
        component: PropTypes.string,
        onItemSelected: PropTypes.func,
    };
    static defaultProps = {
        initialProps: {},
    };

    constructor(props) {
        super(props);

        const {inputRef, component, initialProps, onItemSelected} = props;
        if (component) {
            this.addOnItemSelectListener(onItemSelected, component);

            if (TextInputKeyboardManagerIOS && inputRef) {
                TextInputKeyboardManagerIOS.setInputComponent(inputRef, {component, initialProps});
            }

            this.registeredRequestShowKeyboard = false;
        }

        this.keyboardExpandedToggle = {};
        if (TextInputKeyboardManagerIOS) {
            KeyboardRegistry.addListener('onToggleExpandedKeyboard', (args) => {
                if (this.props.inputRef) {
                    if (this.keyboardExpandedToggle[args.keyboardId] === undefined) {
                        this.keyboardExpandedToggle[args.keyboardId] = false;
                    }
                    this.keyboardExpandedToggle[args.keyboardId] = !this.keyboardExpandedToggle[args.keyboardId];
                    TextInputKeyboardManagerIOS.toggleExpandKeyboard(this.props.inputRef, this.keyboardExpandedToggle[args.keyboardId], this.props.initialProps.expandWithLayoutAnimation);
                }
            });
        }
    }

    async UNSAFE_componentWillReceiveProps(nextProps) {
        const {inputRef, component, initialProps, onRequestShowKeyboard} = nextProps;

        if (TextInputKeyboardManagerIOS && inputRef && component !== this.props.component) {
            if (component) {
                TextInputKeyboardManagerIOS.setInputComponent(inputRef, {component, initialProps});
            } else {
                TextInputKeyboardManagerIOS.removeInputComponent(inputRef);
            }
        }

        if (onRequestShowKeyboard && !this.registeredRequestShowKeyboard) {
            this.registeredRequestShowKeyboard = true;
            KeyboardRegistry.addListener('onRequestShowKeyboard', (args) => {
                onRequestShowKeyboard(args.keyboardId);
            });
        }
        this.registerListener(this.props, nextProps);
    }

    shouldComponentUpdate(nextProps) {
        return (nextProps.component !== this.props.component);
    }

    componentWillUnmount() {
        KeyboardRegistry.removeListeners('onRequestShowKeyboard');
        KeyboardRegistry.removeListeners('onToggleExpandedKeyboard');

        if (this.keyboardEventListeners) {
            this.keyboardEventListeners.forEach(eventListener => eventListener.remove());
        }
        if (this.props.component) {
            KeyboardRegistry.removeListeners(`${this.props.component}.onItemSelected`);
        }
    }

    addOnItemSelectListener(onItemSelected, component) {
        if (onItemSelected) {
            KeyboardRegistry.addListener(`${component}.onItemSelected`, (args) => {
                onItemSelected(component, args);
            });
        }
    }

    registerListener(props, nextProps) {
        const {component, onItemSelected} = nextProps;
        if (component && props.component !== component) {
            if (props.component) {
                KeyboardRegistry.removeListeners(`${props.component}.onItemSelected`);
            }
            KeyboardRegistry.removeListeners(`${component}.onItemSelected`);
            this.addOnItemSelectListener(onItemSelected, component);
        }
    }

    render() {
        return null;
    }
}