あるSEのつぶやき・改

IT・システム開発に関することをつぶやいています。

React Native, Expo

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 のノウハウをいかしつつ、ネイティブ開発ができるなんてまさに夢のような開発環境です。まあ、実際はそこまで甘くは…