【React Native】「react-native-controlled-mentions」ライブラリでメンションのテキストスタイルがメッセージに引き継がれてしまう

以前紹介した、React Native でメンション機能を実装できるライブラリ「react-native-controlled-mentions」について、iOS でのちょっとしたバグが修正できたのでまとめ。

バグ…と言っていいのか分かりませんが、iOS で動作確認をした際、メンション機能で「@名前」と入力後、続けてメッセージを入力したら、名前の部分にだけ効いて欲しいテキストスタイルが、メッセージ本文にまで適用されてしまうという現象が発生していました。
Android では問題ないのですが、iOS だと名前入力後にスペースを入れたり改行してみたのですがだめでした…。

 

で、色々いじった結果、メンション機能で名前を入力したときにその後ろに半角スペースを追加する設定を追加したところ、問題なく動作しました!
サンプルコードは下記の通りです。

const renderMentionSuggestions = renderSuggestions(this.state.members);
return (<MentionInput
          value={this.state.text}
          onChange={text => this.setState({ text: text })}
          partTypes={[{
            trigger: '@',
            renderSuggestions: renderMentionSuggestions,
            textStyle: { fontWeight: 'bold', color: '#608CDB' },
            isInsertSpaceAfterMention: true,  /* メンションの後ろにスペースを追加する */
          }]}
          placeholder={'メッセージを入力'} />);

追加したのは 9行目の isInsertSpaceAfterMention: true です。
こちらを入力すると、名前の後ろに半角スペースが追加され、テキストスタイルもメッセージ本文には引き継がれなくなりました!

それにしても、GitHub の動作デモの GIF 画像では、メンションの後ろにスペースがなくても大丈夫だったのに、何故私のアプリではダメなのか…。
使用言語が日本語だからでしょうか?
よく分かりませんが、解決したのでよし!

 

以上、React Native の「react-native-controlled-mentions」ライブラリでメンション機能を開発した際、メンションのテキストスタイルがその後に入力したメッセージ本文にも引き継がれてしまう時の対処法でした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG