React Native

こんにちは、カミナシの@tomiです。 React Native + Expoで開発する上で、React Native Debuggerが自分にとって必須のものとなっています。 このツールを使って日々どういった感じで開発しているかをまとめました。 他にもReactotronやReact Native Toolsなどのデバッグツールもありますが、私は様々な情報をまとめて確認できるReact Native Debuggerに落ち着きました。 スタイルの検証やpropsのデバッグ、Reduxのstate確認にactionの発火確認などができ、開発する上で欲しい要素全てが揃っています。 Expoの標準…

参考ページ qiita.com Dockerfile FROM amazonlinux:latest RUN yum update -y ## nodejs RUN curl -sL https://rpm.nodesource.com/setup_14.x | bash - RUN yum install nodejs -y RUN yum -y install wget RUN wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo RUN yum -y install yarn ## ReactNat…

概要 CloudFirestoreとは Firebaseが提供している、NoSQLベースのデータベースのうちの一つ（MBaasの一つ） RealtimeDatabase → CloudFirestoreに進化！ Q、何が改善されてる？ A、データモデルの改善、クエリ強化されている。 Firebaseの機能とデータベース 準備 Firebaseプロジェクトのセットアップ Firebase公式ページからコンソール画面に移動して、新規アプリ作成。 プロジェクトIDとロケーションは後で変更が出来ないので、注意！ ※国内向けサービスの場合、asia-northeast1（東京）or asia-north…

stand.fm 社が主催する React Native 勉強会にて Catching up with TurboModules という題名で未だ全容がはっきりしない TurboModules について発表しました。 speakerdeck.com この記事は発表では伝えきれない部分を補うものとなっています。 現状の Native - React Native のブリッジ実装と課題 JSI(JavaScript Interface) TurboModule 1. global.__turboModuleProxy の定義 2.Native Module(Java/objC)と JSI をバイン…

React Native + Expoでアプリ開発を行う企業に転職して1週間経ちました。 アプリでメモリリークによるクラッシュの疑いがあり調査することに。 自分の環境では再現できなかったので、 有名な格言「推測するな、計測せよ」 に従い、計測してみようとエラー解析ツールのSentryを導入することにした。 参考にした情報 EXPOドキュメント：https://docs.expo.io/guides/using-sentry/?redirected Sentryドキュメント：https://docs.expo.io/guides/using-sentry/?redirected 導入方法：htt…

こんにちは、アプリ開発担当のエモトです。本業は稲作で、合間に横スクロールのダンジョン攻略や、アプリ開発を行っています。 React Native で画面を作る時、ScrollView を利用する方は多いと思います。その画面でスクロールするとき、ある child だけ上部に固定させたいというシーンが出てくるかもしれません。iOS で言うと UITableView におけるセクションヘッダーに近い動きです。さて、それを React Native で実装したい場合、どうすれば良いでしょうか？ 上部固定させたい まず最初にネイティブ開発で考えると、iOS の UIScrollView にはそのような機…

初めに 音楽投稿アプリを開発しました！ ウェブサイト： cyber-muse.com Apple Store: Cyber MuseTakeo Udoミュージック無料apps.apple.com Google Play: play.google.com 開発言語はReactとReact Nativeを使用しています。 開発から運用まで全て個人で行っています。開発から運用まで大変だったことなど色々書いていきたいと思います。 React & React Nativeについての所感 気づけばReactを書き始めてから1年ぐらいがたってしまいました。Reactを学ぶきっかけとなったのはアルバイトです。…

はじめに こんにちは、株式会社カミナシのエンジニア @MuiKnskです。 今回は「React Nativeの表示速度が遅い問題のカイゼン」について書きたいと思います。 『カミナシ』は新しい機能を最速でリリースして、ビジネスの速度を上げる期間がありました。 そのときの技術的な負債が溜まってしまい、あるときお客様から表示速度が遅くて困っているという声をいただきました。 そこで表示速度が遅い原因の調査と実際に対応したことを書いてみたいと思います。 React Nativeの表示速度が遅くて困っている、どうにかしたいと思っている方の手助けになれば嬉しいです！ 尚、React.memoのHooksは既…

react-nativeでモーダル表示 作成したもの react-nativeでモーダル表示 ソースコード /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React, {useState} from 'react'; import { SafeAreaView, StyleSheet, Button, View, Text, StatusBar, Modal, Alert, TouchableOpacity, …

やっとReact Native始めました 夏頃からReact Nativeやるぞ〜と言って早数ヶ月…すっかり寒くなってしまった 今日やっとReact Nativeに入門しました！！ React NativeはJavaScriptフレームワークReactのモバイル版で、1つのコードでiOSとAndroidどちらでも動くクロスプラットフォームが実現できる！ （Reactやったことないんだが、大丈夫かな） 開発環境を構築する React Native環境構築手順 このQiita記事の通りにやっただけですが、書いていきます また、今回はAndroid環境のみです macOS nodev12.18.2 …

スマートフォンとタブレットの普及によりユーザーとのコミュニケーション・データ収集を要望する企業が多くありシステム開発の他にモバイルアプリ開発の需要も増えています。iOSアプリならSwiftで、AndroidアプリならKotlinで開発を進めるのは一般的です。ネイティブ言語の他、クロスプラットフォームフレームワークでアプリを開発するという方法もあります。1回のコーディングでiOSアプリもAndroidアプリも作られ迅速で効率的に開発しながらコストを抑えられます。 人気のあるクロスプラットフォームフレームワークの1つはFacebookが開発したリアクトネーティブ（React Native）です。リ…

これまでexpoのmanaged workflowでスマホアプリを作成していましたが、managed workflowでは使えない機能を使いたくてbare workflowでアプリを作成したいと思っています。 まずはbare workflowでhello worldまでやっていきたいとおもいます。 アプリ作成 expoを利用してのデバッグ XCodeを利用してのデバッグ Error: cannot find the node binary. Try setting the NODE_BINARY variable in the "Bundle React Native code and ima…

memoirにRecoilを導入してみた Recoilを採用した理由 ペペロミアでは画面を跨いでのステートは全てContext APIを使用していたが、以下の理由で若干悩ましい点があった。 Context APIだと自由に書けてしまい、実装機能が増えるにつれて独自の実装が増えてしまう ReduxやRecoilと比較して、Context APIは遅いらしい (こちらの記事参照) ということで、Recoilを採用した。 Pull Request github.com 実装 導入は以下を参照 recoiljs.org 今回は、アプリ起動時をユーザーID管理について実装した。 実装仕様は以下の通り ア…

新刊の「九条の大罪」で弁護士がツッコミが入っていた。 ウシジマくん作者の新作弁護士漫画「九条の大罪」に法曹クラスタがマジレスツッコミ - Togetter ２月２５日発売の本 ２月２６日発売の本 ２月２７日発売の本 ２月２８日発売の本 ３月１日発売の本 ３月２日発売の本 ３月３日発売の本 ２月２５日発売の本 ようこそ実力至上主義の教室へ ２年生編４ (MF文庫J) 作者:衣笠彰梧 発売日: 2021/02/25 メディア: Kindle版 まちカドまぞく ６巻 (まんがタイムKRコミックス) 作者:伊藤いづも 発売日: 2021/02/25 メディア: Kindle版 VRおじさんの初恋【カラ…

備忘録です。 最近、React Nativeで作ったアプリをBitriseでビルドするのを試しています。 Bitrise - Mobile Continuous Integration and Delivery このBitriseというプラットフォームはとても使いやすくて、ビルドのためのワークフローの定義も直感的にできました。 ところがAndroidのビルドに失敗してしまうんですよね。以下のような感じでOutOfMemoryErrorが出ています。 > Task :app:mergeExtDexDebug FAILED D8: java.lang.OutOfMemoryError: Java …

こんにちは、株式会社カミナシのエンジニア @ImuKnskです。 はじめに みなさんのプロダクトでテスト書いてますか？ 『カミナシ』はオフライン機能を提供しており、ローカルデータベースはSQLite（expo-sqlite）を利用しています。 オフライン機能って何？という話は、こちらの記事をご参照ください。 kaminashi-developer.hatenablog.jp SQLiteに保存されるデータは『カミナシ』にとって重要なデータが保存されています。 そのため万が一にでもデータを欠損してはいけないため、テストを充実させていきたいと思っています。 まずはCRUD処理を簡単に書いてみようと…

React NativeはiOS/Androidはもちろん、Web向けにもアプリが開発できるフレームワークです。そんなReact Native向けに、公式サポートはないもののReact Native SDKを開発しています。 今回はそのReact Native SDKを使ってiOS向けにプッシュ通知を送信するまでの方法を紹介します。

はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティ React Nativeでの画像キャッシュの仕組み(iOS) React Native 0.64 と 0.63.5 JCenter のクローズによる影響 Redux・Context API・Recoil のパフォーマンス比較 Wix社のDetox運用ノウハウ リアルタイムエンゲージメントのプラットフォーム "Agora.io" Quoraの質問: 「ReactではなくFlutterを選択する理由は何ですか？」 中国生まれのRe…

セキュリティ 情報セキュリティ文化賞 慶大学部長の土屋氏ら受賞: 日本経済新聞 文化賞を受賞したのは土屋大洋慶大総合政策学部長、塗師敏男横浜市総務局しごと改革室ICT担当部長、丸山満彦PwCコンサルティングパートナー、宮下清日本情報システム・ユーザー協会参与、盛合志帆情報通信研究機構サイバーセキュリティ研究所上席研究員の5人。 COCOA iPhone版のリセット不具合 Xamarinの基礎的欠陥が発見される - Togetter 【やじうまPC Watch】ロシアの大手検索プロバイダ社員、5千人弱の顧客のメールを覗き見 - PC Watch Yandex suffers data breac…

smj_tcBt（🐦） ツイートURL:https://twitter.com/1246434357385891800/status/1361323238660317187 ツイート:Google Apps Script の JDBC で timeout が頻発する際の対策 https://t.co/R7eW9HgAfQ るろうに剣太郎（🐦） ツイートURL:https://twitter.com/1162316141974261800/status/1361297838555103240 ツイート:RT @googlecloud_jp: ✏2 月 26 日、3 月 5 日の金曜日 16 時か…

2021年2月25日に、翔泳社さんから電子書籍＋プリントオンデマンドで本を出すことになりました。 www.shoeisha.co.jp 内容としては、CodeZineで2018年から2020年にかけて連載していた「基礎からはじめるReact Native」を、2021年向けに加筆・修正したものになります。 目次は次の通り。 第1章 React Nativeとは何か？ ～基本の仕組みと使いどころを理解する 第2章 Expoで始めるReact Native開発環境の構築 第3章 Reactの基本を学ぼう ～コンポーネントの仕組みと作り方 第4章 Reactの基本を学ぼう ～コンポーネントで動的な状…