あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

React Native, Expo

書籍『基礎から学ぶReact Native入門』を読んだ感想

はじめに 書籍『基礎から学ぶReact Native入門』を読んでみました。 基礎から学ぶReact Native入門作者:WINGSプロジェクト 中川 幸哉翔泳社Amazon React Native は React をベースとした、クロスプラットフォームのモバイルアプリ開発環境になります。 この…

React NativeのiOSで「warning: no rule to process file ...」が出てビルドが失敗する

React Nativeのプロジェクトで、iPhone シミュレーターを実行しようとしたところ、以下のエラーで iOS のビルドが失敗しました。 warning: no rule to process file '/Users/xxx/Projects/ReactNativeRealm/ios/Pods/Flipper-RSocket/rsocket/README.md' of …

React NativeのiOSで「warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' 」が出てビルドが失敗する

React Nativeのプロジェクトで、iPhoneシミュレーターで実行しようとしたところ、iOSのビルドで以下のエラーが出てビルドに失敗しました。 warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 5.0, but the range of sup…

React Nativeでreact-native init時のビルドエラー解消方法

React Native で 下記コマンドで、プロジェクトを作成しようとしました。 $ npx react-native init ReactNativeRealm --template react-native-template-typescript なのですが、node のバージョンをいじったせいか、以下のビルドエラーが出力されるようにな…

React NativeでRealmを使用する

はじめに React Native で Realm を使用するには、結構ハマりどころが多く、苦戦しがちだと思います。 この記事では、React Native で Realm を使用するサンプルをご紹介します。 なお、Realm がサポートする node.js のバージョンは v8.x か v10.x のみなの…

React Native+Realmで、Androidで保存したデータが読み込めない不具合の対応

React Native + Realm で、Android に保存したデータベースのデータを読み込めないという不具合に遭遇しました。 React Native のプログラム(抜粋)は、以下のような感じです。 // Person テーブルを検索する const people = realm.objects('Person').filte…

React Nativeで'ld: symbol(s) not found for architecture x86_64'のビルドエラーの解消方法

React Native で node.js のバージョンを切り替えたりしていたら、以下のエラーが出てビルドができなくなりました。 ld: symbol(s) not found for architecture x86_64 clang: error: linker command failed with exit code 1 (use -v to see invocation) **…

React Nativeで`bash: react-native: command not found`エラーの解決方法

React Native で以下のコマンドを実行するとエラーが出力されるようになりました。 # iOS $ react-native run-ios bash: react-native: command not found # Android $ react-native run-android bash: react-native: command not found これ、非常に悩んだ…

React Nativeで暗号キーなどの重要情報を安全な場所に保存する

はじめに スマートフォンのアプリで暗号キーなどの重要情報を安全に保存するニーズは高いですね。 それは、アプリで普通に保存してしまうと、他のアプリや攻撃者に重要情報を取得される危険性があるからです。 この危険性を防ぐために、iOS では KeyChain、A…

React NativeでユーザーIDとパスワードを安全な場所に保存する

はじめに React Native でユーザーIDとパスワードを安全に保存したいというニーズはよくあると思います。 但し、スマートフォンのアプリで普通に重要情報を保存してしまうと、他のアプリや攻撃者から読み取られてしまう危険性があります。 この問題を回避す…

React Nativeで'error No active iOS device found'を解決してログを出力する方法

React Native で iOS シミュレータで console.logのログを出力するためには、react-native log-iosを実行する必要があるのですが、下記のエラーが出力されてしまいます。 error No active iOS device found この問題を解決するには、プロジェクトの ios フォ…

React NativeでHooksを使いRealmを使用する方法

はじめに React Native で Realm を使用しようとしたのですが、公式サイトに記載されている記述方法が古かったので、Hooks で Realm を使用する方法をご紹介します。 なお、React Native のバージョンは v0.60 以上で、言語は TypeScript を使用します。 プ…

React NativeでTypeScriptを簡単に使う方法

今日(2020/03/19)現在、React Native で TypeScript のプロジェクトを作成するのは簡単になりました。 下記のようにコマンドを実行するだけです。 $ npx react-native init MyApp --template react-native-template-typescript 以前は、下記の公式ドキュメン…

React Native+Expoでドラッグ&ドロップ可能なリストを作成する方法

はじめに React Native + Expo でドロップ&ドロップ可能なリスト(SortableなList)を作成する方法をご紹介します。 最初はreact-native-sortable-listなるものを試したのですが、ライブラリ内部で古い記述があり警告が消せないので断念しました。 github.com…

React Native+ExpoでSQLiteのデータベースにアクセスする方法

はじめに React Native + Expo + TypeScript な環境で SQLite のデータベースにアクセスする方法を試してみたのですが、なかなかうまくいかず苦労したので、その方法を掲載します。 そもそもとして、ローカルのデータベースには Realm (レルム)を使用したか…

Fix)Unable to resolve "react-native-gesture-handler" from "node_modules/@react-navigation/native/src/Scrollables.js"

React Native + Expo を実行していると以下のようなエラーが表示されました。 Unable to resolve "react-native-gesture-handler" from "node_modules/@react-navigation/native/src/Scrollables.js" 解決策は、react-native-gesture-handler をインストール…

React Native+Expo+NativeBaseのAndroidでヘッダーが通知バーに覆いかぶさってしまう現象の解決方法

React Native + Expo + NativeBase のアプリで、Android の場合にヘッダーが通知バーに覆いかぶさってしまう現象が発生しました。 解決方法は簡単で、app.jsonに以下の記述を追加するだけです。 "androidStatusBarColor": "#334393", "androidStatusBar": { …

React Native+Expo+NativeBaseのプロジェクトを関数ベースで作成してみる

はじめに React Native (+ Expo) で使用できる NativeBase という見目麗しいライブラリがあるのですが、公式の Expo のセットアップサンプルが、React.Componentベースなので、関数ベースに書き換えてみます。 なお、言語は TypeScript とします。 nativebas…

React Native+ExpoでESLintとPrettierを使いコードチェックとフォーマット整形を行う方法

はじめに React Native + Expo の開発を行おうとして、そういえば React のプロジェクトで ESLint と Prettier を導入したけど定型化しておらず再利用ができないなぁと思いました。 じゃあ、React プロジェクトの ESLint と Prettier の設定を React Native …

React Native+ExpoのプロジェクトをejectしてiOS/Androidで起動するまで

React Native + Expo のモバイルアプリ開発は強力で生産性がすばらしく高いものの、Expo で用意されている機能を超えて、ネイティブのモジュールをリンクしたいとなると Expo での開発が続けられなくなってしまいます。 その際、Expo のプロジェクトを eject…

(Solved)Error running `xcrun simctl openurl booted exp...

I faced following error when I ran react-native run-ios. My project was ejected from Expo. Error running xcrun simctl openurl booted exp3ef760b8379f42f08ed322d17da22973://127.0.0.1:19000: An error was encountered processing the command (do…

(Solved)React Native:INSTALL_FAILED_INSUFFICIENT_STORAGE

I faced bellow error when I ran expo project which was ejected. FAILURE: Build failed with an exception. What went wrong: Execution failed for task ':app:installDebug'. com.android.builder.testing.api.DeviceException: com.android.ddmlib.In…

(Solved)Error: Activity class {host.exp.exponent/host.exp.exponent.MainActivity} does not exist.

I ejected Expo project and ran react-native run-android command, then bellow error happened. Error: Activity class {host.exp.exponent/host.exp.exponent.MainActivity} does not exist. In Expo project, run command is not react-native run-andr…

(Solved)React Native:エラー: シンボルを見つけられません:import androidx.annotation.Nullable

React Native + Expoのプロジェクトを、expo ejectしてreact-native run-androidをしたところ、以下のエラーが出力されました。 /Users/xxxxx/Projects/ejecttest/node_modules/expo-constants/android/src/main/java/expo/modules/constants/ConstantsServi…

React Native+Expo+AmplifyのCognito認証画面を日本語化する

React Native + Expo + Amplify + Cognito で認証機能は簡単に実装できるのですが、デフォルトだと表示言語が英語のため実用的ではありません。 ですので、認証画面を日本語化する必要があります。 とは言っても、そんなに難しいことではなく、Amplify のI18…

React Native+Expo+AmplifyでCognito認証を行う

React Native + Expo でも Amplify はサポートされています。 下記記事は、Expo で Amplify を使用する公式の解説になっています。 blog.expo.io この記事では、React Native + Expo + Amplify で Cognito 認証を行う方法をご紹介します。なお、言語は TypeS…

React Native+ExpoでTypeScriptを使用する

React Native + Expo で TypeScript を使用するのは、以前は面倒だったようですが、今の Expo のバージョンだと簡単ですね。 Expo をインストールします。 $ npm install expo-cli --global $ expo --version 3.0.2 Expo のプロジェクトを作成します。 $ exp…

『React Native+Expoではじめるスマホアプリ開発』はよい本だったのでその感想など

React を学び始めて、iOSやAndroidといったネイティブ開発もやりたいと思ったら、まず最初に候補になるのが React Native ですよね。 React のノウハウをいかしつつ、ネイティブ開発ができるなんてまさに夢のような開発環境です。まあ、実際はそこまで甘くは…