Expo Goで簡単なマークダウン編集アプリを作る

Expoを使用してReact Nativeでマークダウン編集アプリを作成する基本的な手順を紹介します。
Expo Goの基本的な使い方がわからない場合は、以下の記事を参考にしてください。

GitHub CodespacesでExpo Goを使ってローカル環境を一切汚さずに、爆速で、Androidアプリ開発を行う方法を紹介します。まずは、「Hello World」を表示するアプリを作成する方法を説明します。 GitHub C...

ExpoGoではじめてのモバイルアプリを爆速で作る

この記事では、create-expo-appを使用してExpoプロジェクトを作成し、スマホで「Hello World」を表示するまでの手順を説明します。ExpoはReact Nativeをベースとしたフレームワークで、iOSとAndroid...

プロジェクトのセットアップ
メイン画面の作成
コンポーネントの説明
アプリの起動

プロジェクトのセットアップ

まず、create-expo-appを使用して新しいExpoプロジェクトを作成します。

npx create-expo-app markdown-editor
cd markdown-editor

プロジェクトが作成されたら、必要な依存関係をインストールします。

npm install react-native-paper react-native-markdown-display

react-native-paper: UIコンポーネントライブラリ
react-native-markdown-display: マークダウンを表示するためのライブラリ

メイン画面の作成

次に、マークダウンの入力と表示ができる画面を作成します。app/(tabs)/index.tsxを編集して、以下のコードを追加します。

import React, { useState } from 'react';
import { ScrollView, TextInput, View, StyleSheet } from 'react-native';
import Markdown from 'react-native-markdown-display';
import { Appbar, Button } from 'react-native-paper';

export default function HomeScreen() {
  const [markdownText, setMarkdownText] = useState('');

  return (
    <>
      <Appbar.Header>
        <Appbar.Content title="Markdown Editor" />
        <Button onPress={() => setMarkdownText('')} mode="contained">
          Clear
        </Button>
      </Appbar.Header>
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          multiline
          value={markdownText}
          onChangeText={setMarkdownText}
          placeholder="Write your markdown here..."
        />
        <ScrollView style={styles.preview}>
          <Markdown>{markdownText}</Markdown>
        </ScrollView>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: '#fff',
  },
  input: {
    height: 200,
    borderColor: '#ccc',
    borderWidth: 1,
    marginBottom: 20,
    padding: 10,
    borderRadius: 4,
    fontSize: 16,
  },
  preview: {
    flex: 1,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 4,
    padding: 10,
  },
});