Rork のテキスト入力にキーボード上のツールバーを足す — iOS の InputAccessoryView と Android の自前バーを1つの部品に揃える

// useKeyboardHeight.ts
import { useEffect, useState } from "react";
import { Keyboard, Platform } from "react-native";
 
export function useKeyboardHeight() {
  const [height, setHeight] = useState(0);
 
  useEffect(() => {
    // iOS は will 系の方がバーの追従が滑らか。Android は did 系が確実
    const showEvt = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
    const hideEvt = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
 
    const showSub = Keyboard.addListener(showEvt, (e) => {
      setHeight(e.endCoordinates.height);
    });
    const hideSub = Keyboard.addListener(hideEvt, () => setHeight(0));
 
    return () => {
      showSub.remove();
      hideSub.remove();
    };
  }, []);
 
  return { keyboardHeight: height, isVisible: height > 0 };
}

// KeyboardToolbar.tsx
import React from "react";
import { InputAccessoryView, Platform, View, Animated, Keyboard } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useKeyboardHeight } from "./useKeyboardHeight";
 
type Props = {
  nativeID: string;          // iOS で TextInput と結ぶ ID
  children: React.ReactNode; // バーの中身（ボタン群）
};
 
const BAR_HEIGHT = 44;
 
export function KeyboardToolbar({ nativeID, children }: Props) {
  const insets = useSafeAreaInsets();
 
  // iOS: システムがキーボードへ吸着させてくれる
  if (Platform.OS === "ios") {
    return (
      <InputAccessoryView nativeID={nativeID}>
        <View style={{ height: BAR_HEIGHT, ...barStyle }}>{children}</View>
      </InputAccessoryView>
    );
  }
 
  // Android: キーボード高さ分だけ持ち上げて絶対配置
  return <AndroidBar insets={insets}>{children}</AndroidBar>;
}
 
function AndroidBar({ insets, children }: { insets: { bottom: number }; children: React.ReactNode }) {
  const { keyboardHeight, isVisible } = useKeyboardHeight();
  if (!isVisible) return null; // キーボードが無いときはバーも出さない
 
  // 端末によって endCoordinates にナビバー分が含まれるため、含まれない端末向けに
  // insets.bottom を足し引きして実機で合わせる（ここは数台で要確認）
  const bottom = keyboardHeight;
 
  return (
    <View
      pointerEvents="box-none"
      style={{ position: "absolute", left: 0, right: 0, bottom }}
    >
      <View style={{ height: BAR_HEIGHT, ...barStyle }}>{children}</View>
    </View>
  );
}
 
const barStyle = {
  flexDirection: "row" as const,
  justifyContent: "space-between" as const,
  alignItems: "center" as const,
  paddingHorizontal: 12,
  backgroundColor: "#f2f2f7",
  borderTopWidth: 0.5,
  borderTopColor: "#c6c6c8",
};

// MemoScreen.tsx — iOS / Android 共通
import { TextInput, Pressable, Text, Keyboard, Platform } from "react-native";
import { KeyboardToolbar } from "./KeyboardToolbar";
 
const ID = "memo-toolbar";
 
export function MemoScreen() {
  return (
    <>
      <TextInput
        inputAccessoryViewID={Platform.OS === "ios" ? ID : undefined}
        placeholder="ひとことメモ"
        multiline
        style={{ minHeight: 96, margin: 16, padding: 12, fontSize: 16 }}
      />
      <KeyboardToolbar nativeID={ID}>
        <Pressable onPress={() => {/* 定型文を挿入 */}}>
          <Text style={{ fontSize: 16, color: "#007aff" }}>定型文</Text>
        </Pressable>
        <Pressable onPress={() => Keyboard.dismiss()}>
          <Text style={{ fontSize: 16, fontWeight: "600", color: "#007aff" }}>完了</Text>
        </Pressable>
      </KeyboardToolbar>
    </>
  );
}

import { useRef } from "react";
import { TextInput } from "react-native";
 
const focusedRef = useRef<TextInput | null>(null);
 
// 各 TextInput に
<TextInput
  inputAccessoryViewID={ID}
  onFocus={(e) => { focusedRef.current = e.target as unknown as TextInput; }}
/>
 
// バーのボタンから focusedRef.current?.setNativeProps(...) などで対象を操作