rn-swipeable-panelの内側のTextInput中にボタンのタップが反応しない問題 | React Native

rn-swipeable-panelとは？

下の画像の通り、React Nativeで画面下からうにょっと出てくる画面を作るライブラリ。(Github)

バージョン

"react-native": "0.64.2",
"expo": "43.0.2",
"rn-swipeable-panel": "^1.2.5"

iOS15のiPhone13上で、Expo Goを使って動かした。

前提

現在React Nativeで作っている個人契約の家庭教師アプリ 「カテアプリ東大生」では、会員登録やログイン、パスワード忘れ画面でこのライブラリを使っている。

JSで書くとざっくり次のようなコードです。

import React, { useState, useEffect } from 'react'
import { View } from "react-native";
import { SwipeablePanel } from 'rn-swipeable-panel';

const SampleComponent = () => {
  //rn-swipeable-panelの設定
  const [panelProps, setPanelProps] = useState({
    fullWidth: true,
    openLarge: true,
    showCloseButton: true,
    onClose: () => closePanel(),
    onPressCloseButton: () => closePanel(),
    onlyLarge: true,
  });

  const [isPanelActive, setIsPanelActive] = useState(false);// パネルを開くかどうか

  return (
    <View>
      <MyMainScreen />
      <SwipeablePanel
        {...panelProps}
        isActive={isPanelActive}
      >
        <MyChangePasswordScreen />
      </SwipeablePanel>
    </View>
  );
};

export default SampleComponent;

遭遇した問題

swipableパネルは、うまく動くが、その中のTextInputと相性が悪かった。

具体的には、TextInputに入力している状態で下のボタンを押しても反応せず、

この画面の状態で、「再設定メール送信」ボタンを押しても

下↓のように、キーボードが消えるだけになる。

これでやっとボタンを押せるようになる。つまり入力している状態からボタンを押すのに二度タップする必要がある。これではユーザーとしてはなんとなく直感的に動作せず使いづらい。

原因

React Native本体のissueで、「ScrollViewやListViewの中のボタンを２回押さないと動かない」という同様のものがあった。

rn-swipeable-panelはこの部分でScrollViewを使っているため、scrollViewPropsにkeyboardShouldPersistTaps="handled"を渡さなければならなかった。

修正前のコード

<SwipeablePanel
 {...panelProps}
 isActive={isPanelActive}
>

修正後のコード

<SwipeablePanel
 {...panelProps}
 isActive={isPanelActive}
 scrollViewProps={{keyboardShouldPersistTaps:"handled"}} //これ追加
>

これで、テキスト入力中でも１タップでボタンが押せるようになった。

まとめ

React NativeのScrollViewの内側でキーボード入力があるときは、

<ScrollView keyboardShouldPersistTaps="handled">
  <YourComponentWithTextInputHere />
</ScrollView>

のように　keyboardShouldPersistTapsが大事だった。

おまけ

現役東大生の家庭教師がかんたんに見つかる個人契約アプリカテアプリ東大生ぜひインストールしてみてください！
また、UIUXでアドバイスなどあればぜひお願いします！