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

Slide 1

Slide 1 text

iOSのキーボード入力ビューをカスタマイズする React Native Meetup #14

Slide 2

Slide 2 text

甲斐田亮一 @camcam_lemon 株式会社CureApp エンジニア TypeScript, React / Figma Name Twitter Company Occupation Skills

Slide 3

Slide 3 text

iOSのキーボード - TextInputにフォーカスすると現れる - keyboardTypeで見た目は変えれる - OSの言語が日本語だと地球マーク表れ日本語入力用のキーボードに切り替えれる

Slide 4

Slide 4 text

iOS Safariのキーボード - キーボードの上に追加のUIがでてくる - [ ]でフォーム入力の切替 - [完了]で入力終了(Keyboard.dismiss) - 入力フォームが切り替わるかは実装次第 - 右の画像のkeyboardTypeがあるわけではない

Slide 5

Slide 5 text

ネイティブアプリのキーボード

Slide 6

Slide 6 text

キーボードはカスタマイズできる - キーボードの上に追加のUIを作ることができる - イベントハンドラやfetchも仕込めるので機能も足せる - ネイティブアプリではカスタムツールバーと呼ばれている - 俺が考えた最強のキーボードを作れる！！

Slide 7

Slide 7 text

InputAccessoryView - React Nativeでカスタムツールバーを作るためのAPI - 現状されている iOSのみサポート - Androidもサポートするなら react-native-keyboard-input - KeyboardAvoidingViewでもできなくはない

Slide 8

Slide 8 text

基本の使い方

Slide 9

Slide 9 text

基本の使い方ユニークなIDを定義

Slide 10

Slide 10 text

基本の使い方 TextInputと InputAccessoryViewにそれぞれIDを渡す

Slide 11

Slide 11 text

イイカンジのログイン画面作ってみる - iOS Safari風のキーボードを再現してみる - フォームの移動とキーボードを閉じる機能を追加する