チャットページを簡単に実装できるライブラリ「react-native-gifted-chat」と、チャットのメンション機能を実装できるライブラリ「react-native-controlled-mentions」を同時に実装したのですが、その際にメンション先のユーザ一覧が、メッセージ入力欄の横幅分しか広がってくれないという現象に遭遇したので、その対処法についてまとめ。
react-native-controlled-mentions ライブラリの GitHub に添付してある画像を見ただけでは気づかなかったのですが、こちらのライブラリを使って実装したメンション先ユーザ一覧の横幅は、入力欄の横幅分しか広がりませんでした…！
GitHub のページはこちらから。
dabakovich/react-native-controlled-mentions: Fully controlled React Native mentions component
https://github.com/dabakovich/react-native-controlled-mentions
しかし、私が実装したいデザインでは、入力欄の左右に画像アップロードのボタンや、送信ボタンを追加しているので、必然的に入力欄の幅はその分狭くなってしまっていました。
機能的には問題ないものの、やはり見た目があまり好ましくなくて…。
うーん、困った。
対処法として、最初は入力欄に position: 'absolute' を指定するのを試してみたのですが、そうするとメンション先ユーザ一覧の挙動がおかしくなったので、この案は没に…。
で、最終的にうまくいったのは、入力欄の左右に配置している画像アップロードボタンとメッセージ送信ボタンに position: 'absolute' を追加し、絶対位置で指定する事でした！
こうすることで、入力欄がツールバーの横幅一杯に広がり、メンション先ユーザ一覧の横幅も画面いっぱいに広がるようになりました！
なお、入力欄の左右には送信ボタン等のサイズの分だけ padding で余白を追加し、見た目を整えました。
上記のデザインを実装すること自体は特に難しくなかったのですが、そもそもこのような書き方をすることを思いつくのに時間がかかってしまいました…。
が、何とか解決策が見つかり良かったです！
以上、React Native で「react-native-gifted-chat」と「react-native-controlled-mentions」を一緒に実装した時に、メンション先ユーザ一覧の横幅が画面 100% にならなくて困った時の対処方法についてでした。
かなりニッチなネタなので、参考になる方がいらっしゃるかは分かりませんが…ご参考になれば幸いです。
