react-native-modal-keyboard

A customizable modal keyboard component for React Native apps.

📦 Installation

npm install react-native-modal-keyboard
# or
yarn add react-native-modal-keyboard

📦 Import KeyboardProvider for root

import { KeyboardProvider } from "react-native-keyboard-controller";
 <KeyboardProvider>
    your root app
 </KeyboardProvider>

📦 declare ModalKeyboard for modalfy

import { ModalKeyboard } from "react-native-modal-keyboard";

const modalConfig = {
    ...,
    ModalKeyboard: {
        modal: ModalKeyboard,
        position: "bottom",
        backBehavior: "none",
        containerStyle: {
            alignItems: null,
        },
    },
}

📦 import InputKeyboardCustom instead input react native with custom props

import { InputKeyboardCustom } from "react-native-modal-keyboard";
<InputKeyboardCustom
                numberOfLines={numberOfLines}
                style={{ flex: 1 }}
                fontSize={12}
                maxLength={100}
                multiline
                value={product?.note || ""}
                placeholder="Nhập ghi chú (nếu có) "
                onChangeText={(txt) => {
                    dispatch(
                        updateItemOrder({
                            ...product,
                            note: txt,
                        }),
                    );
                }}
                title="Ghi chú sản phẩm"
            />

📦 theme config

import { ModalKeyboardTheme } from 'react-native-modal-keyboard';
ModalKeyboardTheme.setPrimaryColor('#e91e63'); // Set globally
// later in app
<ModalKeyboard /> // Uses #e91e63

📦 devDependencies require

    "react-native-modalfy": "3.5.5",
    "react-native-reanimated": "3.14.0",
    "react-native-keyboard-controller": "1.12.7",
    "react-native-device-info": "10.11.0"

📹 Demo Video

Watch demo