はじめに Expo環境のVSCodeによるデバック方法を投稿します。 使用環境は、MacOSです。 この投稿で扱う内容 Expoプロジェクト作成からVSCodeでデバックするまでを扱います。 1. Expoプロジェクト作成 2. VSCodeデバック設定 3. Expoアプリ実行 4. デバック開始、実行 １．Expoプロジェクト作成 Expoプロジェクトを作成します。 プロジェクト名やテンプレートは自由に指定 ２．VSCodeデバック設定 （1）React Native Toolsプラグインをインストール React Native Toolsをインストールします。 （２）デバック構成を追加 VSCode上部のデバック横の「構成がありません」欄をクリックします。 「構成の追加」を選択すると、選択候補があらわれるため、React Native: Attach to packagerを選択しま
RN Features 2021年12月号 - React Native アドベントカレンダー 2021, ニュースレター React Native Now, React Native で Liquid Swipe を実装するための4つの技術 - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native アドベントカレンダー 2021 M1 Mac + Xcode 12.5.1でReact Native 0.65 アプリのビルド時に出たエラーと対応 React Native で Liquid Swipe を実装するための4つの技術 React Navigation (V6)の設計方針に関するTips ニュースレター React Native Now React Native Advent Calendar 2021 に記事を投稿しました React Native で Liquid Swipe を実装するための4つの技術 JavaScript製フルスタックフレームワーク Redwood.js SVGRを使ってsvgファイルをReactコンポーネント
VTuber初見生配信！？GitHub利用のコツを教えます！OSS活動特化コミュニティと意見交換！？ (2020/03/23 21:00〜)
お知らせ connpassではさらなる価値のあるデータを提供するため、イベントサーチAPIの提供方法の見直しを決定しました。2024年5月23日(木)より 「企業・法人」「コミュニティ及び個人」向けの2プランを提供開始いたします。ご利用にあたっては利用申請及び審査がございます。詳細はヘルプページをご確認ください。 3月 23 VTuber初見生配信！？GitHub利用のコツを教えます！OSS活動特化コミュニティと意見交換！？ Itomakiweb dev study trial version 0.1.0
Expo Bare Workflow で Firebase Analytics を設定する - bagelee（ベーグリー）
Expo Bare Workflow について Expo とは Expo は React Native の開発ツールです。 React Native はネイティブアプリ上で JavaScript のランタイムを動かし、ネイティブ側と JavaScript 側が情報をやりとりすることで動作していますが、 Expo ではネイティブ側のコードは固定されており JavaScript のコードのみを実装するので、 Xcode や Android Studio を使ったビルドが不要になるのが特徴です。開発時は Expo Client というアプリ上で動作させ、リリース時は expo build コマンドを使って Expo が提供するサーバー上で ipa や apk をビルドします。開発時は Expo Client をインストールしたスマートフォンで QR コードを読み取るだけで実機確認が非常に簡単に行
GitHub - mrousavy/react-native-vision-camera: 📸 A powerful, high-performance React Native Camera library.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - MetaMask/metamask-mobile: Mobile web browser providing access to websites that use the Ethereum blockchain
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
The Early DaysReflectly was built using React Native in the summer of 2017. At the time React Native was a relatively new and exciting technology. It promised high productivity and cross-platform mobile development with familiar web technologies. Our team had a strong background in web technology and therefore felt immediately at home using React Native to build Reflectly. Following a few intense
blog.morugu.com ↑を乗り越えた後に, emulator を起動しつつリアルデバイスも繋いだ状態で react-native run-android したところ emulator が優先された. なので明示的に実行対象を指定する方法. 実行可能な一覧を取得 adb devices で使用可能な( adb サーバに接続された ) emulator/device が表示される. $ adb devices List of devices attached adb server version (39) doesn't match this client (36); killing... adb E 54586 8413562 usb_osx.cpp:147] Unable to create an interface plug-in (e00002be) * daemon sta
Editor’s note: This article was updated July 2021 with information about Flutter 2’s web support and an up-to-date comparison for React Native and Flutter. You can learn more about Flutter 2.0 here. As developers, we are always on the lookout for tools that would allow us to save time and effort. We want to be able to write code and run it everywhere. With React Native and Flutter, this dream is s
export const firebaseConfig = { apiKey: "XXXXXXX", authDomain: "XXXXXXX", databaseURL: "XXXXXXX", projectId: "XXXXXXX", storageBucket: "XXXXXXX", messagingSenderId: "XXXXXXX", }; import firebase from 'firebase'; import { firebaseConfig } from './config'; export const firebaseApp = firebase.initializeApp(firebaseConfig); export default firebase;
概要React Nativeを使って趣味でアプリを開発してますが、アプリがどんどん多くなってアプリをデプロイする時、時間がかかる問題が発生しました。 趣味で作ったアプリリスト: App ListそれでReact Nativeで作ったアプリを自動でデプロイする方法でFastlaneと言うツールを使ってデプロイしています。 Fastlaneを使ってアプリのデプロイを自動化するしかし、ローカルマシンでFastlaneでアプリを一つデプロイするには30分ほどかかって、アプリが20個なので、ローカルでデプロイをするにも、時間がかかりすぎました。 それでこのようなデプロイを効率的するため、GitHub Actionsを使ってデプロイシステムを考えてみました。 GitHub ActionsこのブログポストではGitHub ActionsとFastlaneを使ってデプロイする方法について説明します。 もし
機能 Native Modules 出来ること ・関数の作成 ・イベントの通知 ・コールバック Native UI Components 出来ること ・Viewの作成 ・Viewのイベントの通知 Native Modules ダイアログを表示するModuleを例にします。 [機能] 1, Androidのダイアログを表示する。（関数の作成） 2, ダイアログの"OK"ボタンがクリックされたらコンソールに"true"が表示される。（イベントの通知） 3, "DATE"ボタンがクリックされたら現在時刻が表示される。（コールバック） public class DialogModule extends ReactContextBaseJavaModule { // コンストラクター public DialogModule(@NonNull ReactApplicationContext react
GitHub - Uniswap/interface: 🦄 Open source interfaces for the Uniswap protocol
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
最初に断っておきますが、僕自身はOSSのライセンスを理解しようとし、尊重していますが、ライセンスそのものの詳細に詳しいわけではないのでもしかしたら間違っていることがあるかもしれません。その際は優しく指摘してください。優しくね。 昨今、アプリケーションを開発するにはWebであれモバイルであれ、オープンソース（OSS）のライブラリを利用することが多いかと思います。 その際に問題になってくるのが各ライブラリのライセンス表記でして、多くの場合はそのライブラリを利用して開発したものに関して著作権表記等を求められるライセンスで配布されていることが多いと思います。比較的制限のゆるいとされているMITライセンスなんかもそうですね。 WebなんかだとJSのソース見れるのでどこかに記載されていれば問題ないのかと思います。一方でiOSやAndroidといったいわゆるネイティブアプリというのはそうはいかないよねっ
はじめに React NativeではComponentのサイズを指定する際に以下のように単位無しで指定します。 基本的に、Androidは"dp(dip)", iOSは"ポイント"をサイズの単位としますが、React Nativeで指定した値がどう扱われるのかを調べてみました。 React Nativeのドキュメントを見てみる 公式のドキュメントには以下のように書かれています。 All dimensions in React Native are unitless, and represent density-independent pixels. (引用元: https://facebook.github.io/react-native/docs/height-and-width.html) density-independent pixelsとあるので、単なるピクセル数ではなくデバイ
Firebase Admob
firebaseプロジェクト生成次はグーグルのファイアベース(Google Firebase)へプロジェクトを生成する必要があります。下のリンクを押してグーグルファイアベース(Google Firebase)へ移動します。 グーグルファイアベース(Google Firebase): https://firebase.google.com右上にあるSIGN INボタンを押してログインします。 ログインしたら右上にあるGO TO CONSOLEを押してグーグルファイアベースコンソル(Google Firebase Console)へ移動します。 グーグルファイアベースコンソル(Google Firebase Console)で+ Add projectを押してプロジェクトを追加します。 プロジェクト情報を追加した後Create projectボタンを押してプロジェクトを生成します。 グーグルア
はじめに 前回 M1 Macbook Pro の開発環境の構築までをこちらの記事で紹介しました。 Docker のインストールまでをやりましたね。 今回は React Native の実行環境を作り、 iOS シミュレーターと Android シミュレーターを起動するところまでやっていきます。 つまり、以下のように作ったプロジェクトが動くところまでになります。 うまくいかないことが多かったので、まだ継続して調査中のものもあるかもしれませんが、今後加筆していく予定です。 どなたかの参考になれば幸いです。 ReactNativeの実行環境を作る 本家の environment-setup を眺めながらやってみたのですが、 Intel 版ではこちらで問題なくセットアップできるのですが、 M1 版はそうはいきませんでした。 なので、そこの差異を書きながら React Native を動かすためのセ
GitHub - computerjazz/react-native-draggable-flatlist: A drag-and-drop-enabled FlatList for React Native
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
In June 2019, at WWDC 19, Apple announced that as of April 2020 it would be a requirement to use Xcode’s storyboard to create your splash screen. This was a surprise to me when I saw a tweet from our very own Chris Ball, this past month. As a React Native developer, I have been using react-native-splash-screen for the past couple of years; which relies on .xib files. At first, I was a little conce
はじめに React Nativeで開発をしていて、アプリが複雑になってくるとキャッシュが悪さをして思い通りの動きをしないことがあります。そこで「キャッシュをクリアしてビルドをし直す」という作業をすると思いますが、調べるといろんなやり方が出てきます。 そこで、ビルド＆テスト配信を半年ほどやり続けてきて、「これなら大丈夫！」というコマンドを共有したいと思います。 キャッシュクリアのコマンド # watchmanのキャッシュを削除 watchman watch-del-all # iosのビルドファイルを削除 rm -rf ios/build # androidのビルドファイルを削除 rm -rf android/app/build # node_modulesを削除 rm -rf node_modules # Podsファイルを削除 rm -rf ios/Pods # Xcodeのキャッシュ
React Nativeチュートリアル: プニプニしたボタンUIを作ろう！ 〜 tmuxとvimでRNアプリを開発するフロー
こんにちは、個人アプリ作家のTAKUYAと申します。 僕はInkdropというMarkdownノートアプリを独りで作って生計を立てています。 このチャンネルでは、自分が利益を生むサービスを作るに至った経験をシェアしています。 本動画では、僕が普段どのようにしてtmuxとvimの構成でReact Nativeのアプリをコーディングしているのかお見せします。 そのお題として、スキューモーフィックな見た目のボタンをイチから作ります。 プログラミング学習の参考になれば幸いです :) ▶ 個人制作アプリ: Inkdrop - Markdownノートの管理をシンプルに https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=67aO4HpipSI ▶ 今回作ったボタ
React NativeでWebViewを使わずHTMLをレンダリングする「react-native-render-html」の紹介
ホームテクノロジーReact NativeでWebViewを使わずHTMLをレンダリングする「react-native-render-html」の紹介 React NativeでWebViewを使わずHTMLをレンダリングする「react-native-render-html」の紹介 React Nativeアプリ開発でinnerHTML風な対応が要求された。APIの返り値にHTMLタグが含まれているデータをレンダリングするというものだ。 賢明なあなたにおかれては、<WebView/>を使えばいいじゃん！と思ったに違いない。 そう。そのとおりでWebViewによってHTMLタグを含んだ値をレンダリングすることが可能だ。しかし何かしらのイベントでHTMLタグに付与された属性値を参照する、という処理に悩まされてしまった次第である。 ひとしきりgithubやjs.coachを回遊して見つけたのが
TurboModuleを用いたJSスレッドの負担軽減と Follyを用いたMainスレッドのマルチスレッド化
株式会社BluAgeの業務内容とReact Nativeの最新技術への取り組みの紹介スライドです。
React Native アプリでSwiftUI を利用する方法について調べてみた - KitchHike Tech Blog
はじめに 最近、React Native Meets SwiftUI - Better Programming - Medium という記事が目に止まりました。今回はこの記事について調べてみました。React Native でSwitfUI のコンポーネントを利用する話です。 このトピックについて調べることにしたのは、純粋に技術的な興味からです。プロダクト開発的には、コストをかけてまでReact Native アプリからSwiftUI を使いたい場面は今の時点ではほぼ無いでしょう。ただし技術者としては、連携の仕組みを知っておくと他で何かの役に立つことがあるかもしれません。 今回調べてみて分かったのは、React Naive からSwiftUI を利用する方法は、一部はReact Native やSwiftUI のドキュメントに記載されている要素によって実現され、残りは独自の実装によって実現
GitHub - react-native-share/react-native-share: Social share, sending simple data to other apps.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
react-native init Native cd Native react-native run-ios // xcodeが立ち上がる ReactNativeとは Reactを用いてiOSやAndroidのネイティブアプリを構築できるフレームワーク JavaScriptからネイティブのAPIが呼ばれる どのプラットフォーム向けにも書けるようになる 基本文法 divやspanなどのDOMを使えない DOMを使えない替わりに「View」や「Text」などコンポーンネントとして使う テキストを扱う場合は「Text」。入れ物として扱う場合は「View」 CSSは使えないので、替わりにに「CSS in JS式」でスタイリングする ・例 import React, { Component } from 'react'; import { Text, View, StyleSheet } from
概要React Nativeで開発したアプリも普通のアプリなのでプッシュメッセージ(Push Message)を受けることができます。このブログポストではReact Nativeで開発したアプリへプッシュメッセージ(Push Message)を受けるためreact-native-firebase(V5)ライブラリでFCM(Firebase Cloud Messaging)を使う方法について説明します。 react-native-firebase v5: https://v5.rnfirebase.io/FCM(Firebase Cloud Messaging): https://firebase.google.com/docs/cloud-messagingライブラリインストール下記のコマンドを使ってreact-native-firebaseのライブラリをインストールします。
The web has several tools, such as Google Lighthouse, to measure performance. But what about mobile apps? This article will present a Flipper plugin we use to measure our React Native apps performance, with a concrete case of how we used it to bring our app performance to the top quality. Let's talk about fpsOne of the key metrics to measure the performance of your mobile app is the frame rate. Yo
React NativeをTypeScript + ESLint + Prettier + Storybookで環境構築
はじめに React Nativeの環境構築をする機会があったので、まとめて紹介します。 やることは以下になります。 Expo CLIを使ってReact NativeをTypeScriptで構築する ESLint / Prettier / husky / lint-stagedを導入する Storybookを導入し、Netlifyを利用してPull RequestにコンポーネントカタログのプレビューURLを載せる 完成版: https://github.com/RikutoYamaguchi/react-native-with-linter-and-storybook-sample PRのサンプル: https://github.com/RikutoYamaguchi/react-native-with-linter-and-storybook-sample/pull/1 Expo CLI
はじめに この記事は React Native Advent Calendar 2019 10 日目の記事です。 昨日は @tkow さんの記事で、 React Native 0.60 で導入されたネイティブモジュールの autolinking に関する解説でした。 この記事は、 React Navigation の次バージョンである v5 について、機能や変更点などを予習しておこうというような内容です。 主な情報源は以下になります。 GitHub の README とソースコード 公式ドキュメント(next) Expoのブログ GitHub や公式ドキュメントは正式リリース後にリンク切れになる可能性があります。 v4 までのあらすじ React Navigation は React Native 公式ドキュメントのナビゲーションのページ にも一番目に紹介されている、 React Nati
React Nativeに実際にチャレンジした時の忘備録として残しておく。 ReactNativeを始める際には、Expoとreact-native-cliの二択がまず真っ先に浮かぶと思いますが、後者でやったのでその記録です。ただ、今から始めるならまずはExpoのことを調べてみるのをお勧めします。 今回この記事では - ReactNativeにTypeScriptを導入する - ReactNativeでローカルの画像を使用できるようにしておく この2つを行います。 前提条件 yarnをインストール済み VSCodeを利用(codeコマンドでterminalから起動できるようにしておく) react-nativeのバージョンは0.59.0 macOS mojave(10.14.4) 2019年4月時点での情報です。 プロジェクトの作成 まずyarnを用いてreact-natiev-cliを使
Appium初心者が、ReactNativeアプリを自動テストする試みの一部始終(随時更新) - Qiita
本記事の目的 弊社 (リプレックス株式会社) の関わっているプロダクトで、ReactNativeを使って作ったアプリがあるのですが、保守工数の削減のためにE2Eテストの自動化にチャレンジしてみることにしました。その際の技術選定の経緯なども含め、メモとして残すために書いています。 単なる殴り書きではなく、これからスマホアプリのE2Eテストの自動化を始めたい方が読む時に参考になる資料としても使えるように心がけて書いていこうとおもいます。 E2Eテストとは E2Eテストとは、 end to end test (エンドツーエンドテスト) の略です。end to endとは辞書を引くと「端から端まで」という意味です。UIテストはUI部分だけのテストですし、ロジックテストはロジック部分だけのテストですが、 E2Eテストは、システムが完成した状態で、UI,DB,Networkなど、全体がくっついた状態の
React Nativeでグルメアプリ開発。食コミュニティを広げよう。 - 株式会社キッチハイクのモバイルエンジニアの採用 - Wantedly
筑波大学在学中に休学し、京都へ渡る。1年間の修練後、西本願寺で住職の資格を取得。その後、世界中の人々が無償で１つのものを創り上げていくオープンソースコミュニティに仏教の世界観との共通点を見いだし、エンジニアとして活動をはじめる。 筑波大学大学院を卒業後、2008年に野村総合研究所へ、仏教の専門知識を活かせるテクニカルエンジニアとして入社。 MongoDB勉強会、MongoDB JPコミュニティの主催者。2012年からgihyo.jpでMongoDBでゆるふわDB体験を連載する。 http://gihyo.jp/dev/serial/01/mongodb 2013年に野村総合研究所を退社し、KitchHike共同創業者となる。 RailsとMongoDBで開発しています。 私は例えるとすると大きく葉や枝を広げた木のような人間です。大きく広げた枝葉のように周囲に幅広く目を向け、人に対してはニー
チャンネル登録→https://goo.gl/jzIHw6ツイッター→https://twitter.com/inazuma0217tai1スポンサー登録→https://gaming.youtube.com/channel/UCHog7L3CzsDg2GH9aza1bPgラインスタンプ→https://line...
【React Native】カメラ等へのアクセスリクエストができるライブラリ「react-native-permissions」
【React Native】カメラ等へのアクセスリクエストができるライブラリ「react-native-permissions」 2021年4月29日 React Native, iOS アプリ使用時に「カメラへのアクセスを許可しますか？」というダイアログが表示されるのを見たことがあるかと思いますが、今回はそのアクセスリクエストを行う方法についてです。 Android については、PermissionsAndroid という API が React Native にあるのでそちらを使いました。 で、iOS の場合は「react-native-permissions」というライブラリを導入すれば簡単に行えます。 GitHub のページはこちらから。 zoontek/react-native-permissions: An unified permissions API for React N
はじめに タイトルままです。 ReactNativeで通知からアプリを開いたときに、 通知の種類に合わせて任意の画面を表示する方法について紹介します。 説明しないこと react-navigationの基本的な使い方 react-native-push-notificationの基本的な使い方 使用ライブラリ 通知用 @react-native-community/push-notification-ios:^1.8.0 react-native-push-notification:^7.4.0 タブ用 @react-navigation/native:^5.9.4 react-native-reanimated:^2.2.0 react-native-gesture-handler:^1.10.3 react-native-screens:^3.4.0 react-native-safe
ReactNativeプロジェクトをXcodeでビルドしたときに「node.jsが見つからない」とエラーが出た時の対処方法 - Qiita
ReactNativeプロジェクトをXcodeでビルドしたときに「node.jsが見つからない」とエラーが出た時の対処方法Xcodereactnative ReactNativeプロジェクトをXcodeでビルドしたときに「node.jsが見つからない(Can't find the 'node' binary)」とエラーが出ることがある。これはnode.jsを通常でない方法でインストールしている時、例えばhomebrew/nodebrew/nvmとかのパッケージマネージャ/バージョンマネージャを使っている場合とかに発生する。これを解決する。 エラーログ： error: Can't find the 'node' binary to build the React Native bundle. If you have a non-standard Node.js installation, s
やりたいこと カード風エリアを作りたい 背景をグラデーションにしたい クリッカブルにしたい 完成品 グラーデーションつけて、ちょっと影落として（難あり）、クリッカブルにする。 準備 グラデーションは標準では難しいらしいので専用のモジュールを利用します。 私はexpoを利用しているのですが、そのまま使えるモジュールがあるようなので、それを利用してみます。 import React from 'react'; import { View, Button, Text, TouchableHighlight } from 'react-native'; import { LinearGradient } from 'expo-linear-gradient'; export default class BlackFade extends React.Component { render() { r
この記事は React Native アドベントカレンダー 2021 の 6 日目の記事です。 2021 年の React Native のアクセシビリティを勝手に振り返ります。 モバイルアプリのアクセシビリティ事情 まずは、モバイルアプリ事情を勝手に振り返ります。 モバイルアプリでのスクリーンリーダー使用率が増えてきた WebAIM では、スクリーンリーダー使用者を対象とした "Screen Reader User Survey" を大体2年ごとに実施しています。 今年度の WebAIM: Screen Reader User Survey #9 は 5 月から 6 月までに行われました。 この調査では"Mobile App vs Web Site Usage"（モバイル端末で Web とモバイルアプリどちらをよく使用するか？）という項目があるのですが、「モバイルアプリ」と回答したユーザ
Windows 環境の expo-cli で react native をやろうとして環境構築で詰まった箇所 - Qiita
info There appears to be trouble with your network connection. Retrying... yarn でこのエラーが出た場合は、 --network-timeout 1000000 をつければいいという記事もあったのですが、これでは解決せず、インストール対象のうち2つがインストールができずでした。 結局これは原因が分からず… npm で下記コマンドでインストールしました。 これも何か Linux 用の何かが足りないというようなエラーが出たのですが、その日は寝て次の日やり直したらインストールできてしまったので、エラーをメモってなく。 WSLを使えるようにしたのが関係してたかもしれませんが、怪しいまま次に進むことに…。 エラー２：QRコードを実機で読み取っても正しく表示できない 無事 expo-cli でプロジェクトを作成し、起動できる
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React Native】Expo環境VSCodeデバック - Qiita
Reflectly — From React Native to Flutter
React Native で実行対象の Android デバイスを選択してビルドする - Shoya blog
React Native Web vs. Flutter web - LogRocket Blog
ReactとFirebaseUIで簡単Firebase Authentication - Qiita
GitHub ActionsとFastlaneを使ってReact Nativeアプリをデプロイする
ReactNative AndroidのBridge解説 - Qiita
React NativeでOSSのライセンス表記を楽にやりたい - Sweet Escape
React Nativeで扱うサイズの単位について - Qiita
M1でReactNativeのセットアップ備忘録（2021/12）
React Native iOS Splash Screen with Storyboard
React Nativeでキャッシュをクリアしよう - Qiita
ReactNative 簡単なSample集 - Qiita
react-native-firebase(V5)を使ってPush Message
Measuring and improving performance on a React Native app
React Navigation v5 傾向と対策 - Qiita
React Native+TypeScriptの環境構築 - Qiita
VS kazu！テトリス50先【ぷよぷよテトリス】【puyopuyotetris】
通知からアプリを開いたときに任意の画面へ遷移する - Qiita
RN（expo）でグラデーション。カード風エリアを作る。 - Qiita
2021年 React Native のアクセシビリティを勝手に振り返る