React Native Tech Blog

supported by maricuru (旧maricuru tech blogです)

ReactNative

SnapmartにおけるCameraRollから写真の複数枚アップロードの実装

自分が作っているプロダクトであるSnapmartは、スマホのアプリから誰でも手軽に写真を売り買いできるサービスです。 スマホアプリでは、カメラロールの中から写真をアップロードをする機能があります。 この写真をアップロードする機能ですが、カメラロール…

ReactNativeのフォルダ構成はどうするべきか?

どうも、佐藤大生です。マリクルのReactNativeエンジニアです。 React Nativeで開発を始める時、フォルダ構成について悩むと思います。 これが正解!といったものは残念ながらありません。試行錯誤の繰り返しです。しかし、一度フォルダ構成を決めてしまうと…

React Native+Expoなアプリのリリースから1年たって - つらみ編

(本ブログポストは React Native Advent Calendar 2018 の4日目の記事になります。) 弊社ではmaricuruという花嫁さん向けのコミュニティアプリをReact Native + Expoな環境で開発しています。 昨年の12/20にβリリースとしてiOSストア公開したので、もうすぐ1…

【React Native】【Expo】ディープリンクを実装する

こんにちは、maricuruのワダ(@takahi5)です。 弊社maricuruは今までアプリのみでしたが、現在Web版も開発しています。 Webとアプリをスムーズに移動できるようにと、ディープリンクを実装してみました♪ 今回はExpoでのディープリンクの実装についてご紹介し…

【React Native】【Expo】iOS/Android ストア申請用のビルドを作る

こんにちは、maricuruのワダ(@takahi5)です。 寒さに比例して南国に行きたい欲が高まってきております さて、弊社アプリはExpoで作っていますが、たまに 「Expoで作ったアプリってストアに公開できるの?」 と聞かれることがあります。 もちろんストアに公開…

【React Native】【Expo】ストアのレビュー誘導ダイアログを表示する

こんにちは、maricuruのワダ(@takahi5)です。 最近 結局、人生はアウトプットで決まる という本を読んだせいでアウトプット熱が高いです。 せめて1ヶ月くらいこの熱が保たれることを願います。 さて今回はストアのレビュー誘導ダイアログをExpoで実装してみ…

React Native入門: FirebaseのCloud Firestoreでレコーディングダイエットアプリを作ってみる(後編)

前回( React Native入門: FirebaseのCloud Firestoreでレコーディングダイエットアプリを作ってみる(前編) - maricuru tech blog )に引き続き、React Native x Cloud Firestoreでアプリを作っていきます。 前回はCloude Firestoreにデータを保存するところま…

React Native入門: FirebaseのCloud Firestoreでレコーディングダイエットアプリを作ってみる(前編)

弊社ではiOS, Androidアプリの開発にReact Native + Expoを使用していますが、非常に開発効率が高く、その恩恵を日々感じています。 今回はそのバックエンドにFirebaseの提供する「Cloud Firestore」を利用して簡単なアプリを作ってみようと思います。 せっ…

【React Native】【Expo】iOSのパーミッション要求ダイアログで審査リジェクトされた話とその対応

Qiitaに書けや!ってレベルの小ネタも書いていきますよ〜w 弊社のアプリはReact Native + Expoで開発していますが、先日のiOSストア申請でリジェクトされたときのお話と、その対応です。 こんな理由でリジェクトが Guideline 5.1.1 - Legal - Privacy - Data…

【React Native】【Expo】分析ツールAmplitudeの導入方法とそのメリット

アプリの分析ツールといえば、Google Analytics, Firebase Analytics, Mix Panelなど様々ありますが、今回はAmplitudeというサービスをご紹介します。 弊社のアプリ"maricuru"では分析に、このAmplitudeをフル活用しています。 Amplitudeとは アメリカのAmpl…

【React Native】Expo SDK v28.0.0の変更点まとめ

先日Expo SDKのv28.0.0がリリースされました。 大きな変更もあったようなので、変更点をまとめてみます。 Expo SDK v28.0.0 is now available – Exposition AndroidのtargetSdkVersionが26にアップデートされました Androidの方針で、今後新規リリース、及び…

React NativeにStorybookを導入したらUI開発がめちゃめちゃ捗った話

Storybookとは StorybookはUI開発用の環境で、アプリ自体を立ち上げずにUIコンポーネント単位でレイアウトや挙動の確認をすることができます。 また、どんなコンポーネントがあるのかを一覧するための、コンポーネント図鑑のようにも使えます。 導入方法は先…

【React Native】【Expo】Expoでプッシュ通知を送る

React Native + Expoでプッシュ通知を送る方法をご紹介します。 公式で it's almost too easy. と書かれている通りで、実装はとても簡単です。 ちなみにExpoベースのアプリでプッシュ通知を送る場合、このExpo公式のプッシュ通知を使う以外方法はありません…

【Expo】【React Native】productionとstagingを分けて配布したい

異なるバージョンのアプリケーションを配布したい、 たとえばproductionとstaging環境があって、productionユーザーに届ける前に、stagingで動作確認したい、といった状況はよくあると思います。 こういった場合に対応するため、Expoでは"Release Channel"と…

【React Native】【Expo】 Lottieでおしゃれなアニメーションを簡単に実現

TwitterやInstagramでいいねをタップしたときなど、 ちょっとアニメーションがあるだけで気持ちよく感じますよね。 Lottieというアニメーションライブラリを用いることで、 リッチなアニメーションを簡単に実装できます。 たとえば↓のようなアニメーションを…

ExpoでReact Nativeアプリを開発するメリット5選

弊社ではiOS/Android向けアプリの開発に、Expo + React Nativeを利用しています。 Expoを使えば使うほど、その便利さに感動しています。 今回は、Expoを使うとどんな嬉しいことがあるか?について書いてみたいと思います! Expoとは ExpoとはReact Nativeア…