Zenn
🦁

React Nativeでテキスト内のURLをリンク化する

2024/02/17に公開
React Native
React
Expo
モバイルアプリ
hyperlink
tech

React Nativeではデフォルトでテキスト内のURLをいい感じにリンク化してくれる機能はありません。
先日チャット機能を開発していた際にテキスト内のURLをリンク化しなければならない状況に遭遇しました。
そのときの対応を共有しようと思います！

今回使用したのはreact-native-hyperlinkというライブラリです。
使い方は至ってシンプルでライブラリを読み込んだら、対象の要素をラップするだけです。

実際に使い方も見ていきます。

インストール

npm i --save react-native-hyperlink

ソースコード (実装の一部を抜粋しております)

import { Text } from 'react-native';
import { Hyperlink } from 'react-native-hyperlink';

import { styles } from './HyperlinkView.styles';

import type { HyperlinkViewProps } from './HyperlinkView.types';

function HyperlinkView(props: HyperlinkViewProps) {
  return (
    <Hyperlink linkDefault linkStyle={[styles.link]}>
      <Text style={[styles.text]}>
        {props.text}
      </Text>
    </Hyperlink>
  );
}

export { HyperlinkView };

{props.text}には任意の文字列が入ります
今回の実装では<Hyperlink>のPropsはlinkDefaultとlinkStyleしか指定していませんが、そのほかにも以下のPropsがあります

  • linkify
  • linkStyle
  • linkText
  • onPress
  • onLongPress
  • linkDefault
  • injectViewProps

ここではここの説明は省かせていただきますので気になった方は調べてみてください！

動作確認

以下のように実際にURLのみがリンク化されているのが確認できました

before

after

おわりに

最後まで読んでいただきありがとうございました！
今後の実装の参考になれば幸いです。

ちなみに開発しているアプリは以下です、興味あればぜひ触ってみていただけると嬉しいです🦀

https://articsapp.com/ja/app

Discussion