textが省略されないようにする
次に気になるのは、本文が長い場合に省略されてしまう現象です（図9）。
これはList.Itemの仕様で、基本的にテキストを1行で表示しようとして、はみ出した場合には末尾を省略します。これは使い方にもよるのですが、今回は「5行に治る範囲までは省略せずに改行して表示する」という仕様にしましょう（リスト6）。
［リスト6］最大行数を指定する
<List.Item
title={item.text}
titleNumberOfLines={5} // (1)
description={
`作成日時: ${format(item.createdAt, 'yyyy.MM.dd HH:mm')}`
}
/>
List.ItemにはtitleNumberOfLinesという属性があるので、（1）のように5を指定します。すると、長いメモにも改行が入り、すべての文面が見えるようになります（図10）。
もっと長い文章を表示したい場合は、別の画面で全文を表示するなどのアプローチを考える必要がありますが、今回はこのくらいでいいでしょう。
日時を右寄せにする
最後に、日時を右寄せにしましょう。List.Itemのdescription属性に入れたテキストにスタイルを適用する場合は、descriptionStyle属性を使用します（リスト7）。
［リスト7］descriptionを右寄せにする
<List.Item
title={item.text}
titleNumberOfLines={5}
description={
`作成日時: ${format(item.createdAt, 'yyyy.MM.dd HH:mm')}`
}
descriptionStyle={{ textAlign: 'right' }} // (1)
/>
descriptionStyleにはTextに準拠したスタイルを指定するので、（1）のようにtextAlignを指定できました。その結果、図11の通りになります。
これで、当初のデザインと近い見た目になりました。
まとめ
今回はデータ構造の定義と、固定のサンプルデータを表示するところまでを実装しました。次回は画面遷移をしながら、データの作成と保存ができるようにします。
