Molecule.dev

← All @molecule/* packages · App templates

@molecule/app-keyboard-react-native

Provider bond · keyboard · App (browser) · v1.0.1 · Apache-2.0

React Native keyboard provider

npm install @molecule/app-keyboard-react-native

npm · Source on GitHub · Implements @molecule/app-keyboard

How it works

@molecule/app-keyboard-react-native is a provider bond on the app (browser) side: it implements the keyboard core interface (@molecule/app-keyboard) with a concrete vendor or library behind it.

Your code calls the core; you wire this provider once at startup. Swapping vendors later is one line in that wiring, not a rewrite.

import { setProvider } from '@molecule/app-keyboard'
import { provider } from '@molecule/app-keyboard-react-native'

setProvider(provider) // once, at app startup

Reference

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

React Native keyboard provider for molecule.dev.

Uses react-native's Keyboard/Dimensions to implement the KeyboardProvider interface from @molecule/app-keyboard: dismiss, visibility + height state, and show/hide events.

Quick Start

import { setProvider } from '@molecule/app-keyboard'
import { provider } from '@molecule/app-keyboard-react-native'

setProvider(provider) // once, at app startup

Type

provider

Installation

npm install @molecule/app-keyboard-react-native @molecule/app-i18n @molecule/app-keyboard @molecule/app-logger react-native

API

Functions

createReactNativeKeyboardProvider()

Creates a React Native keyboard provider backed by react-native Keyboard.

function createReactNativeKeyboardProvider(): KeyboardProvider

Returns: A KeyboardProvider implementation for React Native.

Constants

provider

Default React Native keyboard provider.

const provider: KeyboardProvider

Core Interface

Implements @molecule/app-keyboard interface.

Bond Wiring

Setup function to register this provider with the core interface:

import { setProvider } from '@molecule/app-keyboard'
import { provider } from '@molecule/app-keyboard-react-native'

export function setupNativeKeyboardReactNative(): void {
  setProvider(provider)
}

Injection Notes

Requirements

Peer dependencies:

  • @molecule/app-i18n ^1.0.1
  • @molecule/app-keyboard ^1.0.1
  • @molecule/app-logger ^1.0.1
  • react-native >=0.72.0

Runtime Dependencies

  • @molecule/app-i18n

  • @molecule/app-keyboard

  • @molecule/app-logger

  • react-native

  • show() is a no-op and toggle() can only hide — React Native cannot open the keyboard programmatically; focus a TextInput instead. hide() works (Keyboard.dismiss()).

  • setResizeMode/setStyle/setAccessoryBar/setScroll are no-ops in this bond — resize is configured in AndroidManifest.xml / app.json, scroll via KeyboardAvoidingView. getCapabilities() reports all four false; feature-gate on it rather than assuming the calls did something.

  • Requires the react-native peer; it is imported lazily and a missing install surfaces as a descriptive error on first use.

Translations

Translation strings are provided by @molecule/app-locales-keyboard.