iOSのキーボード入力ビューをカスタマイズする

React Native Meetup #14 LT大会!の登壇資料です。

Demo
https://github.com/camcam-lemon/InputAccessoryViewDemoForm

Transcript

1. iOSのキーボード入力ビューを カスタマイズする React Native Meetup #14
2. 甲斐田 亮一 @camcam_lemon 株式会社CureApp エンジニア TypeScript, React / Figma Name Twitter Company Occupation Skills
3. iOSのキーボード - TextInputにフォーカスすると現れる - keyboardTypeで見た目は変えれる - OSの言語が日本語だと地球マーク表れ 日本語入力用のキーボードに切り替えれる
4. iOS Safariのキーボード - キーボードの上に追加のUIがでてくる - [ ]でフォーム入力の切替 - [完了]で入力終了(Keyboard.dismiss) - 入力フォームが切り替わるかは実装次第 - 右の画像のkeyboardTypeがあるわけではない
5. ネイティブアプリのキーボード
6. キーボードはカスタマイズできる - キーボードの上に追加のUIを作ることができる - イベントハンドラやfetchも仕込めるので機能も足せる - ネイティブアプリではカスタムツールバーと呼ばれている - 俺が考えた最強のキーボードを作れる！！
7. InputAccessoryView - React Nativeでカスタムツールバーを作るためのAPI - 現状 されている iOSのみサポート - Androidもサポートするなら react-native-keyboard-input - KeyboardAvoidingViewでもできなくはない
8. 基本の使い方
9. 基本の使い方 ユニークなIDを定義
10. 基本の使い方 TextInputと InputAccessoryViewに それぞれIDを渡す
11. イイカンジのログイン画面作ってみる - iOS Safari風のキーボードを再現してみる - フォームの移動とキーボードを閉じる機能を追加する
12. DEMO https://github.com/camcam-lemon/InputAccessoryViewDemoForm
13. おわり