プログラミングに役立つ情報をメモしています

React NativeとFirebaseによる写真投稿アプリ

この記事の内容

React Nativeと、Firebaseを利用して開発したiOS、Android向けのサンプルアプリを紹介します。

サンプルアプリの概要

写真を撮って他人と共有できるアプリです。下記の動画をご覧ください。絵画を投稿することを想定して作ったため、ナビゲーションバーのタイトルは「Paintings」としています。

gif1

gif2

アプリを試す

ExpoがiOS/Android端末にインストールされていれば、下記のQRコードでアプリを起動することができます。

qr

アプリの機能

  • タイムライン表示
  • カメラ撮影
  • 写真投稿
  • Facebook認証
  • プロフィール表示

全体アーキテクチャ

図にすると以下のような感じです。オーソドックスな構成だと思います。

Architecture

利用したUI関連のパッケージ

工夫した点

  • なにかと話題のTik Tokを参考に、ユーザがログインしなくてもタイムラインを見れるようにしています。ユーザが画像を投稿する際、ログインしていない場合は、最後の投稿ボタンが表示されず、Facebookログインボタンが代わりに表示されるようにしています

  • iOSとAndroidでStyle設定を簡単に分けられるようにする簡単なライブラリをnpmパッケージとして切り出して公開しました
    react-native-stylesheet-merge

  • 画像のサムネイルをアプリ側で作成しています。FirebaseのFunctionsで作ることも可能ですが、アーキテクチャを単純に保つため今回はそのようにしました

ソースコード

ソースコードはGitHubで公開しています。