【React Native開発】React Native Debuggerの導入方法
こんにちは。今日は、React Nativeのデバッガーの１つである、React Native Debuggerの導入方法について整理しておきたいと思います。 前提 Mac + React Native (0.64.x)...
ReactNativeReactNative
ReactNativeReactNative【ReactNative/JavaScript】文字列中に改行(Line Break)が含まれているかを検査する
こんばんは。今日はReact Native（というよりはJavaScript）小ネタのご紹介です。 それでは早速参ります。 実現したいこと React Native (JavaScript）で、文字列中に改行が含まれてい...
ReactNative【ReactNative/JavaScript】JSONオブジェクトから特定キーに対するユニーク値のリストを取得する
こんにちは。今日もReact Nativeと格闘しております。今日は、React Native（React Nativeアプリ開発中に直面した問題ですが）、というよりはJava Scriptの話ですが、また一つスッキリし...
ReactNative【ReactNative開発】React Navigation (6.x)で子コンポーネントから親コンポーネントのステートを更新する方法
こんばんは。ちょっと先週、今週と、リリースに向けた開発優先のため、更新が止まっていました。 落ち着いたわけではないですが、今日、ここしばらく毎回ぶち当たっていた壁を一つクリアにできてスッキリしたので、忘れないうちにまとめ...
ReactNative【ReactNative開発】FlatListで複数列のグリッドを作成する
こんばんは。今日は、ReactNativeで複数列のグリッドを作成する方法について解説します。 それではまいります。 実現したいこと インスタグラムのタイムラインのような、N列のグリッド表示を実現したかったです。 実現方...
ReactNative【ReactNative開発】グローバルのスタイルを定義する
こんばんは。今日は、ReactNativeのスタイルに関するお話です。 それでは参ります。 実現したいこと グローバルのスタイルを定義したい。 最近、開発しているアプリが大きくなってきて、コードの重複が目立つようになって...
ReactNative【ReactNative開発】Expo-Image-Pickerで画像のGPS/EXIF情報を取得する
こんにちは。今日は、ReactNative+Expoのアプリで、画像のGPS情報を取得する方法について整理しておきます。 それでは早速参ります。 コードの実装 React Native + Expoで開発しているアプリの...
ReactNative【ReactNative開発】ScrollViewが動作しない？！
こんにちは。今日もReact Nativeを使った開発です。 本日は、React NativeのScroll Viewに関するとラブルシューティングです。 それでは参ります。 問題 以下のようなコードを書いて、画面をSc...
ReactNative【ReactNative開発】配列(Array)の特定の位置に要素を追加する
こんばんは。この記事では、配列(Array)の特定の位置に要素を追加する方法についてまとめておきます。React Native固有というよりは、JavaScriptの機能で実現できます。 コードの実装 このStack O...
ReactNative【ReactNative開発】React Navigation 6でBottom TabからFull Screen Modalを開く
こんにちは。今週末もReact Nativeの開発を進めております。今日はReact Navigationをまた色々と触ったので、備忘としてこの記事をこ残しておこうと思います。 前提 React Native Expo ...
ReactNative【ReactNative開発】スワイプして画面リロードをできるようにする
こんばんは。今日は、ReactNativeでスワイプリロードをできるようにする方法について、記事に残しておきたいと思います。 もう眠くて意識朦朧としているので参ります笑 スワイプでリロードさせる方法 ありました！ Rea...
ReactNative【ReactNative開発】再レンダリングしても画像が更新されない
こんばんは。今日は、画像の扱いに関するトラブルシューティングです。 それでは参ります。 問題 ReactNativeのアプリで、画像を更新した後、更新後の画面を強制再レンダリングしても更新前の画像が表示され続けている。 ...
Node.js【npm/yarn】プロジェクトで利用していないパッケージを確認・削除する【Node.js】
こんばんは。今日は、npm/yarnを使ったパッケージ管理に関する記事です。 現在、React Nativeを使ったアプリ開発で、パッケージ管理ツールであるnpm/yarnを使っているのですが、最近使わなくなったパッケー...
ReactNative【ReactNative開発】外部URL上の画像をクラウドストレージ(Azure Blob Storage) にアップロードする
こんばんは。今週も引き続きReactNativeにおける画像のハンドリングと戦っております。あーつまりすぎて苦しい笑 しかし進んでいくしかないのであります・・・参ります。 やりたいこと 外部URL上の画像をクラウドストレ...
ReactNative【ReactNative開発】AndroidでFetch APIを使った画像アップロードできない(Network Request Failed / Bad Format)【超絶苦戦】
こんにちは。今週は、画像アップロードと戦い続けて終わった一週間でした・・ 結局正しい解決方法は分かっていないのですが、いくつかの問題に遭遇したので、苦闘の記録を残しておこうと思います。 前提 React Native E...
ReactNative【ReactNative開発】FormDataとそれに関わる技術(fetch,XHR,multipart/form-data) を理解する
こんばんは。今週はReact Nativeにおける画像の扱いと戦っております。React Nativeのアプリからサーバサイドへ画像をアップロードしたいのですが、どうにもうまくいかない・・ トラブルシューティングしように...
ReactNative【アプリ開発】画像データを扱うときに登場する言葉(Blob/Base64/FileURL/DataURL)を理解する
こんばんは。今週は、画像データのハンドリングに苦戦する１週間になりそうです。（なんとか今週中にケリをつける・・！） 今日は、画像データを扱う際によく耳にする各単語について、理解する夜にしたいと思います。普段Java Sc...
ReactNative【ReactNative開発】プラットフォーム(iOS/Android etc)毎に処理を分岐する方法
こんばんは。この記事では、React Nativeアプリでプラットフォーム毎に、レンダリング等の処理を分岐する方法についてまとめておこうと思います。 ちなみに、今回なんでこんな処理が実装したくなったかと言いますと、以下の...
ReactNative【ReactNative開発】入力キーボード上に完了ボタンを表示させる方法
こんばんは。今晩もReact Nativeと戦っております。今日は、入力キーボード上に完了ボタンを表示する方法について整理しておきます。 どいうことか、もう少し説明します。 React Nativeで入力フォームを作成し...
ReactNative【ReactNative開発】Test FlightにアプリリリースしたらFacebook認証でクラッシュするようになった
こんばんは。今日は、ついにApple Test Flightにアプリをリリースしてみることができました。（まだまだ完成していませんが） わーい！と思ってアプリを起動すると、Facebook認証でクラッシュしました笑 なん...
ReactNative【ReactNative開発】DeepLinkを使ってリンク先サービスのモバイルアプリを開けるようにする（動作サンプルあり）
こんにちは。会社の夏休みも終盤ですが、今日もReact Nativeと戦っております。（まだ友達に慣れていない笑） 今日は、Deep Linkという技術に触れたので、その実装方法含めてこの記事に学んだことを整理しておこう...
ReactNative【ReactNative開発】ReactNative + Expo+FirebaseでFacebook認証を実装する方法を、しくみと合わせて整理してみた
こんにちは。今日は認証周りのお話です。 私は今React Nativeでモバイルアプリの開発をしていて、このFacebook認証の機能も使っているのですが、そういえばあまりちゃんと理解してなかったな、と思ったのでこの機会...
ReactNative【ReactNative開発】Functionを跨いでStateを更新しようとすると”Warning: Cannot update a component while rendering a different component “エラーが出る
こんばんは。今夜もReact Nativeと戦っております。 前置きも省略し、早速本題に参りたいと思います。 前提 以下の構成ですが、今回のエラーは単純にReact Nativeのエラーのようです。 React Nati...
ReactNative【ReactNative開発】Fetch APIでJSONをBodyにセットするとNetwork request failedエラーが発生する
こんばんは。引き続きReact Nativeのトラブルシューティングです。参ります。 前提 React Native Expo Type Script Android エミュレータでデバッグ 問題 今、React Nat...
ReactNative【ReactNative開発】Facebook APIで取得したプロフィール画像URLから高解像度の画像を取得する
こんにちは。今日は、小ネタですが、Facebook APIで取得したプロフィール画像の解像度をあげる方法について記録に残しておきます。 FacebookログインAPIなどで、Facebookの情報を取得した時、以下のよう...
ReactNative【2021年度最新版】ReactNativeの開発ツール(Expo, ReactNativeCommunity/CLI, ReactNativeCLI）まとめ
おはようございます。まだまだReact Nativeと奮闘する夏季休暇を過ごしております。毎日トラブルシューティングばかりで疲れてきたので、たまにはこういった内容も調べてみようかなと思った次第です笑 本日は、React ...
ReactNative【ReactNative開発】フェードしながら画面遷移させる方法
こんばんは。今晩もReactNativeと終わらない戦いを繰り広げております。 今日は、画面遷移でフェードさせる方法について調べてみました。 前提 React Native Expo TypeScript React N...
ReactNative【ReactNative開発】Expo Google Sign Inをローカルでテストしようとすると”expo-google-sign-in is not supported in the Expo Client”エラーが発生する
こんにちは。会社でもらった夏休みを使って、引き続きReact Nativeと苦闘しております。 問題 React Native + ExpoでGoogle Sign Inを使うためのライブラリ”expo-go...
ReactNative【ReactNative開発】Azure Blob StorageのClientを作成しようとしたら”undefined Unable to resolve module XXXX”エラーが出る
こんにちは。今週は、１週間会社の夏休み休暇中なのですが、引き続きReact Nativeと格闘しております。今日は、Azure Storgeとの連携に際して発生した問題のトラブルシューティング。 いやあ・・かなり時間を食...
ReactNative【ReactNative開発】グラデーションカラーを使えるようにする方法
こんばんは。今日は、React Nativeで開発するアプリUIの背景色にグラデーションカラーを使えるようにしていきたいと思います。 必要なライブラリをプロジェクトに追加する 初めに、ライブラリを追加します。 React...
Profile
初めまして。
東京で働くデータ分析屋兼アプリケーションエンジニアです。旅行とカメラと江戸時代が趣味です。日々勉強したこと、趣味のことについて、自分の記録も兼ねて。
もともとは旅行記残そうと思って始めたブログですが、いつのまにか技術の話ばっかりに・・
＊記事はすべて個人の見解で、かつ記載時点の情報に基づいています。
