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

この記事の内容

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

サンプルアプリの概要

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

アプリを試す

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

アプリの機能

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

全体アーキテクチャ

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

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

• react-native-image-zoom-viewer
  画像のピンチ・ズームアウトが可能なコンポーネント
• react-native-ui-kitten
  UIライブラリ
• react-native-stylesheet-merge
  ios, android特有のStyleを簡潔に記述できる
• react-navigation
  タブバー、ナビゲーションバー

工夫した点

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

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

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

ソースコード

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