React Native 開発者必見！Text#selectable のエラーと解決法

2025-06-06

これを true に設定すると、Text コンポーネントに表示されているテキストをユーザーが選択（ハイライト）できるようになります。これにより、ユーザーはテキストをコピーしたり、辞書で調べたり、共有したりといった操作を行うことができます。

デフォルトでは Text#selectable は false に設定されており、テキストは選択できません。

使用例

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        このテキストは選択できません。
      </Text>

      <Text selectable={true} style={styles.text}>
        このテキストは選択できます！長押ししてみてください。
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    fontSize: 18,
    marginVertical: 10,
  },
});

export default App;

なぜこれが重要なのか？

アクセシビリティ
特定の情報を必要とするユーザーにとって、テキストの選択機能は非常に役立ちます。
ユーザー体験の向上
ユーザーが情報にアクセスしやすくなります。例えば、アプリ内に表示されている住所や電話番号などを簡単にコピーできるようになります。

すべてのテキストを選択可能にする必要はありません。ユーザーがコピーしたい可能性のあるテキスト（例えば、連絡先情報、URL、コードスニペットなど）に限定して使用することをおすすめします。
iOSとAndroidで、テキスト選択の挙動（長押しの時間やメニューの表示など）に若干の違いがある場合があります。

Text#selectable は比較的シンプルで直感的なプロパティですが、それでもいくつかの一般的な問題に遭遇することがあります。

エラー: テキストを選択できない

これは最も一般的な問題です。

考えられる原因

古いReact Nativeのバージョン
非常に古いReact Nativeのバージョンを使用している場合、selectable プロパティのバグや予期せぬ挙動がある可能性があります。
- トラブルシューティング
  - React Nativeを最新の安定版にアップデートすることを検討します。
カスタムのジェスチャーハンドラとの競合
react-native-gesture-handler などのライブラリを使用してカスタムのジェスチャーハンドラを設定している場合、それが標準のテキスト選択ジェスチャーと競合している可能性があります。
- トラブルシューティング
  - ジェスチャーハンドラの設定を見直し、テキスト選択イベントと競合しないように調整します。
  - 必要に応じて、特定の領域ではジェスチャーハンドラを無効にする、または優先順位を調整することを検討します。
AndroidのWebView内で動作させている
アプリ内でWebViewを使用し、その中でReact Nativeコンポーネントを表示している場合、WebView自体の設定やAndroidの特定のバージョンによって、selectable の挙動に制限があることがあります。
- トラブルシューティング
  - WebViewの設定を確認し、テキスト選択が許可されているか確認します。
  - 可能であれば、ネイティブの Text コンポーネントを使用するように再設計を検討します。
親コンポーネントがタッチイベントを吸収している
Text コンポーネントの親に、onPress などのタッチイベントを処理するコンポーネント（例: TouchableOpacity, Pressable, TouchableWithoutFeedback）がある場合、その親がテキスト選択のイベントを妨げている可能性があります。
- トラブルシューティング
  - Text コンポーネントを、タッチイベントを処理する親コンポーネントから独立させるか、少なくともその親コンポーネントの内部構造を調整して、Text コンポーネントが直接イベントを受け取れるようにします。
  - 例えば、TouchableOpacity の内部に selectable={true} の Text がある場合、TouchableOpacity がタップイベントを優先してしまい、テキスト選択の長押しイベントが発火しにくいことがあります。
```
// 問題が発生しやすい構造
<TouchableOpacity onPress={() => console.log('タップされました')}>
  <Text selectable={true}>タップすると選択しにくい</Text>
</TouchableOpacity>

// 解決策（必要に応じてレイアウトを調整）
<Text selectable={true}>このテキストは選択できます。</Text>
<TouchableOpacity onPress={() => console.log('タップされました')}>
  {/* 他のコンテンツ */}
</TouchableOpacity>
```
selectable={true} を設定し忘れている
これが最も基本的な原因です。Text コンポーネントにこのプロパティを設定していない場合、テキストは選択できません。
- トラブルシューティング
```
// 誤った例 (選択できない)
<Text>このテキストは選択できません。</Text>

// 正しい例 (選択できる)
<Text selectable={true}>このテキストは選択できます。</Text>
```

エラー: テキスト選択のメニューが表示されない (iOS/Android共通)

テキストは選択（ハイライト）できるものの、コピー、共有などのメニューが表示されないことがあります。

考えられる原因

ScrollView内での挙動
ScrollView の中で長いテキストを表示している場合、スクロールとテキスト選択のジェスチャーが競合し、メニュー表示が遅れたり、正しく表示されなかったりすることがあります。
- トラブルシューティング
  - デバイスの再起動を試します。
  - 他のアプリでテキスト選択が正常に機能するか確認し、アプリ固有の問題か、OSの問題かを切り分けます。
  - もしカスタムコンポーネントを使用している場合、標準の Text コンポーネントで試して、問題が解決するか確認します。
  - ScrollView 内で問題が発生する場合は、コンテンツの量を調整したり、ユーザーが選択したい領域を制限したりすることを検討します。
カスタムのTextコンポーネントを使用している
独自のカスタムTextコンポーネントを作成しており、その中で何かをオーバーライドしている場合、標準のメニュー表示が妨げられる可能性があります。
OSの制約またはバグ
特定のOSのバージョンやデバイスで、メニューの表示に問題がある場合があります。特にAndroidでは、メーカーのカスタマイズによって挙動が異なることがあります。

エラー: テキスト選択のスタイルが予期せぬものになる

選択されたテキストの背景色や選択ハンドル（カーソル）の色が、意図したものと異なることがあります。

考えられる原因

selectionColor プロパティの誤用
selectionColor プロパティを使用していても、期待通りに反映されないことがあります。
- トラブルシューティング
  - selectionColor
    Androidでは selectionColor プロパティを使用して選択されたテキストの背景色を変更できますが、iOSではこのプロパティはサポートされていません。iOSでは、選択ハンドルの色はアプリのアクセントカラーに依存することが多いです。
```
<Text selectable={true} selectionColor="rgba(255,0,0,0.5)">
  このテキストは赤い背景で選択されます（Androidのみ）。
</Text>
```
  - OSネイティブのテーマやスタイル設定を調整することで、ある程度の制御が可能になる場合がありますが、React Nativeから直接行うのは難しいことが多いです。
テーマやグローバルスタイルとの競合
アプリのテーマやグローバルなスタイル設定が、テキスト選択のスタイルに影響を与えている可能性があります。
iOS/Androidのデフォルトスタイル
OSによってテキスト選択時のデフォルトスタイルが異なり、React Nativeではそれを完全に制御できない場合があります。

パフォーマンスの問題
非常に長いテキストブロックに対して selectable={true} を設定すると、特に古いデバイスや低スペックのデバイスでパフォーマンスに影響を与える可能性があります。
- トラブルシューティング
  - 本当に必要な場所のみに selectable={true} を適用します。
  - 長いテキストをページ分割したり、必要な部分のみを表示するなどの最適化を検討します。

React Nativeの公式ドキュメントとGitHub Issues
公式ドキュメントを確認したり、GitHubのReact NativeリポジトリのIssuesを検索して、同様の問題が報告されていないか確認します。解決策や回避策が見つかることがあります。
シミュレーター/実機での確認
シミュレーターと実機で挙動が異なる場合があるため、両方でテストします。
Metro Bundlerのキャッシュクリア
npm start -- --reset-cache でMetro Bundlerのキャッシュをクリアすると、問題が解決することがあります。
開発者メニューのリロード
変更が反映されない場合は、開発者メニューからアプリをリロード（Cmd/Ctrl + R）してみてください。
シンプルなコードで再現
問題を切り分けるために、Text#selectable のみを設定した最小限のコンポーネントを作成し、問題が再現するかどうかを確認します。

基本的な使用法

最も基本的な使い方です。Text コンポーネントに selectable={true} を設定するだけです。

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const BasicSelectableText = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>基本的な選択可能なテキスト</Text>
      <Text style={styles.description}>
        以下のテキストは選択できません。長押ししても何も起こりません。
      </Text>
      <Text style={styles.normalText}>
        これは通常のテキストです。
      </Text>

      <Text style={styles.description}>
        以下のテキストは選択可能です。長押しして試してみてください。
      </Text>
      <Text selectable={true} style={styles.selectableText}>
        これは選択可能なテキストです。ユーザーはこれをハイライトしてコピーできます。
        例えば、アプリ内の住所や電話番号などをコピーさせたい場合に便利です。
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  heading: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  description: {
    fontSize: 14,
    color: '#666',
    marginBottom: 10,
    textAlign: 'center',
  },
  normalText: {
    fontSize: 16,
    padding: 10,
    backgroundColor: '#e0e0e0',
    borderRadius: 5,
    marginBottom: 15,
  },
  selectableText: {
    fontSize: 16,
    padding: 10,
    backgroundColor: '#d1e7dd', // 緑系の背景色
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#28a745',
    textAlign: 'center',
    lineHeight: 24, // 行の高さ
  },
});

export default BasicSelectableText;

選択時の色を変更する (selectionColor)

Android では selectionColor プロパティを使用して、テキスト選択時の背景色を変更できます。iOS ではこのプロパティはサポートされていません（iOSではシステムのアクセントカラーが使用されることが多いです）。

import React from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';

const SelectableColorText = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>選択時の色を変更 (Androidのみ)</Text>
      <Text style={styles.description}>
        Androidデバイスでこのテキストを選択すると、背景色が変更されます。
        iOSでは効果がありません。
      </Text>
      <Text
        selectable={true}
        selectionColor={Platform.OS === 'android' ? 'rgba(255, 99, 71, 0.5)' : undefined} // Tomato色を半透明に
        style={styles.selectableText}
      >
        これは選択可能なテキストです。Androidで選択すると、選択範囲が赤色になります。
        iOSではシステムのデフォルト色になります。
      </Text>

      <Text style={styles.description}>
        これは別の選択可能なテキストで、別の色を使用しています。
      </Text>
      <Text
        selectable={true}
        selectionColor={Platform.OS === 'android' ? 'rgba(70, 130, 180, 0.5)' : undefined} // SteelBlue色を半透明に
        style={[styles.selectableText, { marginTop: 15 }]}
      >
        このテキストはAndroidで選択すると青色になります。
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  heading: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
    textAlign: 'center',
  },
  description: {
    fontSize: 14,
    color: '#666',
    marginBottom: 10,
    textAlign: 'center',
  },
  selectableText: {
    fontSize: 16,
    padding: 10,
    backgroundColor: '#d1e7dd',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#28a745',
    textAlign: 'center',
    lineHeight: 24,
  },
});

export default SelectableColorText;

部分的に選択可能なテキスト

複数の Text コンポーネントをネストすることで、テキストの一部だけを選択可能にすることができます。

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const PartialSelectableText = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>部分的に選択可能なテキスト</Text>
      <Text style={styles.description}>
        以下の文章で、括弧内のテキストのみが選択可能です。
      </Text>
      <Text style={styles.combinedText}>
        これは通常のテキストで、{' '}
        <Text selectable={true} style={styles.highlightText}>
          (この部分だけは選択できます)
        </Text>
        {' '}そしてこれはまた通常のテキストです。
      </Text>

      <Text style={styles.description}>
        例えば、商品コードや参照番号などをユーザーにコピーさせたい場合に有用です。
      </Text>
      <Text style={styles.combinedText}>
        ご注文番号: {' '}
        <Text selectable={true} style={styles.codeText}>
          XYZ123ABC456
        </Text>
        {' '}ご確認ください。
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  heading: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
    textAlign: 'center',
  },
  description: {
    fontSize: 14,
    color: '#666',
    marginBottom: 10,
    textAlign: 'center',
  },
  combinedText: {
    fontSize: 16,
    padding: 10,
    backgroundColor: '#f0f0f0',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#ccc',
    textAlign: 'center',
    lineHeight: 24,
    marginBottom: 15,
  },
  highlightText: {
    fontWeight: 'bold',
    color: '#007bff', // 青色
    backgroundColor: 'rgba(0, 123, 255, 0.1)', // 薄い青色の背景
    paddingHorizontal: 4,
    borderRadius: 3,
  },
  codeText: {
    fontWeight: 'bold',
    color: '#dc3545', // 赤色
    backgroundColor: 'rgba(220, 53, 69, 0.1)', // 薄い赤色の背景
    paddingHorizontal: 4,
    borderRadius: 3,
  },
});

export default PartialSelectableText;

スクロール可能なテキスト内での selectable

ScrollView の中で selectable なテキストを使用する例です。長いテキストを表示する場合によく使われます。

import React from 'react';
import { View, Text, ScrollView, StyleSheet } from 'react-native';

const ScrollableSelectableText = () => {
  const longText = `
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

  Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
  `;

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>スクロール可能な選択テキスト</Text>
      <Text style={styles.description}>
        以下の長いテキストはスクロール可能で、かつ選択可能です。
        ユーザーはスクロールしながら必要な部分をコピーできます。
      </Text>
      <ScrollView style={styles.scrollView}>
        <Text selectable={true} style={styles.selectableLongText}>
          {longText}
        </Text>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  heading: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
    textAlign: 'center',
  },
  description: {
    fontSize: 14,
    color: '#666',
    marginBottom: 15,
    textAlign: 'center',
  },
  scrollView: {
    flex: 1,
    width: '100%',
    backgroundColor: '#fff',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#ddd',
    padding: 10,
  },
  selectableLongText: {
    fontSize: 16,
    lineHeight: 24,
    color: '#333',
  },
});

export default ScrollableSelectableText;

Text#selectable が提供する機能は「テキストの選択とコピー」ですが、これが要件に合わない場合や、より高度な操作が必要な場合に、以下の代替方法を検討できます。

クリップボードへの直接コピー機能を提供する

ユーザーがテキストを選択するのではなく、ボタンタップなどの操作で直接クリップボードにテキストをコピーできるようにする方法です。これは、特定の情報（例：注文番号、URL、APIキーなど）をユーザーに提供し、それを簡単にコピーさせたい場合に非常に便利です。

メリット

Text#selectable では表示されないカスタムのコピー成功メッセージなどを表示できる。
特定の情報を確実にコピーさせることができる。
ユーザーがテキストをハイライトする手間が省ける。

デメリット

ユーザーが自由にテキストの一部を選択・コピーすることはできない。

プログラミング例

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard'; // これを使用するためにインストールが必要です

const CopyToClipboardExample = () => {
  const textToCopy = "CDE789FGH012JKL345";
  const [feedback, setFeedback] = useState('');

  const copyToClipboard = () => {
    Clipboard.setString(textToCopy);
    setFeedback('コピーされました！');
    setTimeout(() => setFeedback(''), 2000); // 2秒後にメッセージをクリア
    // または、より一般的な方法としてAlertを使用
    // Alert.alert("コピー完了", `"${textToCopy}" がクリップボードにコピーされました。`);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>クリップボードへの直接コピー</Text>
      <Text style={styles.description}>
        このテキストは選択できませんが、ボタンでコピーできます。
      </Text>
      <Text style={styles.copyableText}>
        注文コード: <Text style={styles.codeText}>{textToCopy}</Text>
      </Text>
      <TouchableOpacity onPress={copyToClipboard} style={styles.copyButton}>
        <Text style={styles.buttonText}>コードをコピー</Text>
      </TouchableOpacity>
      {feedback ? <Text style={styles.feedbackText}>{feedback}</Text> : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  heading: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
    textAlign: 'center',
  },
  description: {
    fontSize: 14,
    color: '#666',
    marginBottom: 10,
    textAlign: 'center',
  },
  copyableText: {
    fontSize: 18,
    marginBottom: 15,
  },
  codeText: {
    fontWeight: 'bold',
    color: '#dc3545',
  },
  copyButton: {
    backgroundColor: '#007bff',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
    marginTop: 10,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  feedbackText: {
    marginTop: 10,
    fontSize: 14,
    color: 'green',
  },
});

export default CopyToClipboardExample;

インストールが必要なパッケージ
npm install @react-native-clipboard/clipboard または yarn add @react-native-clipboard/clipboard その後、iOSでは cd ios && pod install を実行。

カスタムコンテキストメニューの表示

メリット

UI/UXの自由度が高い。
アプリのコンテキストに合わせたカスタムアクションを提供できる。

デメリット

OSごとの挙動の違いを考慮する必要がある。
ネイティブのテキスト選択メニューの挙動を再現するのは難しい場合がある。
実装が複雑になる。

プログラミング例 (概念的なもの - 実際の完全な実装は複雑)

この例は、テキストの長押しイベントを検知し、カスタムメニュー（実際にはシンプルなアラート）を表示する概念を示します。実際のカスタムメニューは、ネイティブモジュールやカスタムUIコンポーネント（例: react-native-menu や react-native-context-menu-view のようなライブラリ）を使用して実装する必要があります。

import React from 'react';
import { View, Text, StyleSheet, Alert, TouchableOpacity } from 'react-native';

const CustomContextMenuExample = () => {
  const handleLongPress = () => {
    Alert.alert(
      "テキストアクション",
      "このテキストに対して何を行いますか？",
      [
        { text: "コピー", onPress: () => Alert.alert("コピーしました！") },
        { text: "共有", onPress: () => Alert.alert("共有機能が起動します。") },
        { text: "キャンセル", style: "cancel" }
      ]
    );
  };

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>カスタムコンテキストメニュー</Text>
      <Text style={styles.description}>
        以下のテキストを長押しすると、カスタムメニューが表示されます。
      </Text>
      <TouchableOpacity onLongPress={handleLongPress} style={styles.textWrapper}>
        <Text style={styles.customText}>
          このテキストを長押ししてください。カスタムアクションの選択肢が表示されます。
        </Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  heading: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
    textAlign: 'center',
  },
  description: {
    fontSize: 14,
    color: '#666',
    marginBottom: 10,
    textAlign: 'center',
  },
  textWrapper: {
    padding: 15,
    backgroundColor: '#e7f3ff', // 薄い青色の背景
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#007bff',
  },
  customText: {
    fontSize: 16,
    lineHeight: 24,
    textAlign: 'center',
    color: '#333',
  },
});

export default CustomContextMenuExample;

WebView を使用して HTML コンテンツを表示する

もし、テキストのレイアウトやスタイルに高度な柔軟性が必要で、かつブラウザのようなテキスト選択体験をユーザーに提供したい場合は、react-native-webview を使用してHTMLコンテンツを表示するという選択肢もあります。

メリット

ブラウザとほぼ同じテキスト選択体験を提供できる。
HTML/CSSの全機能を利用できるため、複雑なテキストレイアウトやスタイルが可能。

デメリット

WebView固有のセキュリティやアクセシビリティの考慮が必要。
ネイティブとWebView間の連携（JavaScriptインジェクションなど）が必要になり、実装が複雑になる。
ネイティブコンポーネントに比べてパフォーマンスが劣る可能性がある。

プログラミング例 (概念的なもの)

import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { WebView } from 'react-native-webview'; // これを使用するためにインストールが必要です

const { width, height } = Dimensions.get('window');

const WebViewSelectableTextExample = () => {
  const htmlContent = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        body {
          font-family: Arial, sans-serif;
          padding: 20px;
          color: #333;
        }
        h1 {
          color: #0056b3;
        }
        p {
          line-height: 1.6;
        }
        .highlight {
          background-color: yellow;
        }
      </style>
    </head>
    <body>
      <h1>WebView内の選択可能なテキスト</h1>
      <p>
        このテキストはWebView内で表示されており、ブラウザのように自由に選択できます。
        <span class="highlight">このハイライトされた部分も選択可能です。</span>
        複雑なテキストフォーマットやウェブコンテンツをそのまま表示したい場合に便利です。
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </body>
    </html>
  `;

  return (
    <View style={styles.container}>
      <WebView
        originWhitelist={['*']}
        source={{ html: htmlContent }}
        style={styles.webview}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50, // ステータスバーの下に表示
  },
  webview: {
    flex: 1,
    width: width,
    height: height - 50, // 高さも調整
  },
});

export default WebViewSelectableTextExample;

インストールが必要なパッケージ
npm install react-native-webview または yarn add react-native-webview