DockerでReact Native環境作成から、Expo Clientで実機確認するまで - Qiita
iOS、Android両方に対応するアプリを作成することができるReact Native。 最近、個人的に興味がわいたので、Docker環境作成にチャレンジしてみたのですが、あまり記事を見かけなかったので構築手順を書いておきます。 ※2019/9/21追記 後述しますが、自分がやった時にホットリロードが効かなかったり、エミュレータ環境との連動がうまくできなかったりしてます...。 自分のやり方が悪いだけかもしれませんが、あまりDockerで構築するメリットがないかもしれません。 2019/9/26追記 WSLで環境作り直しました。 →WSLでReact Native + Expo環境を作ろう 前提 docker導入済み docker-compose導入済み 環境構築手順 事前準備 React Nativeで開発をしていく上で開発支援サービスであるExpoを使うと便利です。 React Na
はじめに 開発が一区切りついてリリースする際に、バージョン番号を上げる操作を「bumpする」って呼んだりしますよね。番号を上げるだけと言えばだけなのですが、この記事では以下の様な観点に着目して、bumpの方法を考えてみます。 monorepoのプロジェクトの場合、各パッケージのバージョンをさっと上げるには React Nativeアプリのパッケージを含んでいる場合、iOS/Android固有のファイルに書かれているバージョン番号を上げるには JavaScriptのエコシステムにある色々なコマンドやライブラリを紹介していくのですが、色々整理した末に、「結局、このRuby gemでよくないですか・・・」というところに行き着く記事です。 npmには、package.jsonのversionフィールドをbumpするコマンドがある npm version というコマンドがあって、単体のpackage
Since we announced Hermes in 2019, it has been increasingly gaining adoption in the community. The team at Expo, who maintain a popular meta-framework for React Native apps, recently announced experimental support for Hermes after being one of the most requested features of Expo. The team at Realm, a popular mobile database, also recently shipped its alpha support for Hermes. In this post, we want
React Native + Expo に、ルート管理ライブラリreact-navigationを導入する - Qiita
React Native + Expo に、ルート管理ライブラリreact-navigationを導入するJavaScriptReactreactnativereact-nativeexpo この記事は、「【連載】初めてのReact Native + Expo開発環境構築入門」の子記事です。環境などの条件は、親記事をご覧ください。 この記事はReact Navigation V4を前提に書かれています。2020年10月時点最新のV5対応は、こちらの兄弟記事にお任せしました。 前々回で、画面上にメッセージが出るだけのアプリが作成できましたが、全く動きがありません。そこで今回は画面の移動（画面遷移）を実現する方法として、ルート管理ライブラリであるreact-navigationを導入します。 react-navigationの基本 React Nativeアプリは、Reactアプリと違ってUR
はじめに 4月1日にExpoのSDK37がリリースされました。詳しい変更内容は下記のURLから見ることができます。 https://dev.to/expo/expo-sdk-37-is-now-available-69g https://github.com/expo/expo/blob/master/CHANGELOG.md#3700 大きな変化として、まずはEject後の選択肢がExpoKitからBare Workflowへ完全に移行した点が挙げられます。 そして単にリプレイスされただけという訳ではなく、これまでManaged Workflowのみ対応していたNotifications APIがBare Workflowでも使用できるようになり、APIの内容も変化しています。 この記事ではSDK37のNotifications APIをBare Workflowで使用するための導入方法
Cross Platform React Native UI toolkitA React Native framework for making cross platform applications
ReactNativeといえば検索サジェストで『オワコン』とでてしまう事で開発界隈の中で話題ですが、個人的には未だにベストプラクティスだと考えております。 その理由はいくつかありますが、それについてはまた別の機会でお話しするとして、今回はそんな2022年の今でも一戦級で使えるReactNativeを久々にやってみたい人や新しいライブラリの発見をしたい人のために、まとめを作ったので是非みてください 読者の対象はクロスプラットフォームが向いているであろう、個人開発〜中小規模の開発している方を想定しています。 時代と勢いを感じたライブラリ5選 1.react-native-purchase 今でもReactNativeでIAPを実装しようとすると、react-native-iap (https://github.com/dooboolab/react-native-iap)というライブラリが有力
React Native とFlutter におけるWeb アプリ開発 - GMOインターネットグループ グループ研究開発本部
こんにちは。次世代システム研究室のT.M です。 はじめに React Native やFlutter はクロスプラットフォームのアプリケーションフレームワークとして有名です。クロスプラットフォームのフレームワークとしてどちらが良いかを判断するために、前回の記事では、React Native とFlutter のandroid アプリにおけるパフォーマンス比較を行いました。そもそも、クロスプラットフォームは、android とiOS だけでなく、Web やWindows / MacOS を指す言葉です。そこで、本稿ではWeb アプリケーションの開発について比較を行います。 React Native では、標準ではandroid / iOS アプリの開発しか行うことができません。同一ソースコードでのWeb アプリを開発するためには、React Native for Web を利用する必要があ
以前、「React Native製、予定作成アプリ「ペペロミア」を公開しました」の記事を投稿しましたが、その続編です。 ■React Native製、予定作成アプリ「ペペロミア」を公開しました https://qiita.com/wheatandcat/items/3324dfd141729e46009f その後デザインをリニューアルしたので、進め方と変更した箇所について紹介していきます。 https://www.figma.com/ プロトタイピング（デザイン）ツールです。 出来ることはSketchと似ていますが、1人で使用するなら無料でブラウザで使用可能なので導入のハードルが低いので、個人プロダクトではオススメです。 今回はFigmaを軸にアプリのデザインリニューアルを進めました。 UIリニューアル アイコン変更 まずは、新規アイコンを作成して、 そこからPrimaryカラー、Seco
RN Features 2021年9月号 - iOS 15, Android 12 に向けた準備, React Native バージョン 0.65.1 リリース, React Native導入事例: 出前館のサーバーサイド・モバイルクライアントの技術スタック - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティの1ヶ月 iOS 15, Android 12 に向けた準備 iOS 15 QuickType Bar Transparent Navigation Bar シミュレーター Android 12 Overscroll Effect Permission Updates React Nativeがマネージャー採用 React Nativeバージョンアップ情報 react-native 0.65.1 リリース react-native 0.66.0 の予習 React Native導入事例: 出前館のサーバーサイド・モバイルクライアントの技術スタック 定額制プログラミング教室テックジム「スマホアプリコース」を新設 React N
React Native e2e tests and Automatic Deploys (Detox + Fastlane + CircleCI)
React Native e2e tests and Automatic Deploys (Detox + Fastlane + CircleCI) A little bit of context (skippable) These past weeks I've been struggling trying to set up a pipeline where for every PR pointing to our staging branch, e2e tests run automatically, and for every PR that gets merged, test flight builds, and google internal beta builds are created. My experience has been... difficult, but it
RN Features 2021年4月号 - React Native製のプリンター制御SDK, Recoil 0.2.0 リリース, Sentryでパフォーマンス計測 - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティの近況 React Nativeアプリ 7つのベストプラクティス Sentryでパフォーマンス計測ができるようになった Recoil 0.2.0 Release Reactのベストプラクティスの提案をまとめた記事、Tao of React スター精密(株)がプリンター制御用SDKをRN向けに提供開始 今月の React Native ライブラリ紹介 React Native Hold Menu react-native-paper React Native Snap Carousel さいごに We're Hiring React Native Japanコミュニティの近況 次回 Meetup #12 は5/21(金)開催
この記事の対象 この記事は、 ReactNativeアプリを作っていて iOS側でネイティブを実装する必要があり かつそれをSwiftで書きたいんだけど Swiftもネイティブのブリッジの仕方も分からない！ という方が対象です。 かく言う私がそうでして、ここで書かれているコードは動くものの、間違いはあるかもしれませんのでお気をつけください！！ (私の場合、とあるサービスの実装ガイドがSwift版しかなく、jsでの実装が難しそうだったので泣く泣くSwiftでネイティブを実装しました。。。) この記事で分かるようになる（と願う）こと 数を増やしたり減らしたりするカウンターアプリを通して、以下3つを共有できればと思います。 ネイティブ側でSwift使うのに必要な最低限のファイル3つ(.swift, .m, .h)の最低限の書き方 ネイティブ側からjs側への値の渡し方(コールバックとプロミスの2パ
We are excited to release a new version of React Native, 0.70.0. This version comes with several improvements like a new unified configuration for Codegen, Hermes as default engine, and full CMake support for Android builds along with a refresh of the documentation for the New Architecture. Read on to learn more! Sections New Architecture’s New Documentation Hermes as default engine A new unified
Expoでの開発からejectした場合にNotificationsを使用できないことを考慮し、素のReactNativeプロジェクト（といっても、Expo Bare Workflow）で、FCM（Firebase Cloud Messaging）を使ってPush通知を送る手順を確認しました。 事前準備および前提条件 ReactNativeプロジェクト この記事ではExpoプロジェクトを作成後、app.jsonのexpo.ios.bundleIdentifierおよびexpo.android.packageを最低限入力した後にexpo ejectしBare Workflowを選択した状態のプロジェクトを前提としています。 もちろんExpoを通さず作成したReactNativeプロジェクトでも問題はないと思いますが確認していません。 また、FCMの導入に関連しないビルドエラーの解決方法等は記載
Flutter vs. React Native in 2024 — Detailed Analysis Flutter and React Native are two leading tools for cross platform app development that cut development time for iOS and Android devices. Learn about their differences and the best use cases for each. What Is Flutter?Flutter is an open-source user interface (UI) software development kit released by Google in 2018. Flutter lets you build cross-pla
Flutter Vs. React Native: FAQs for Every Developer | HackerNoon
Too Long; Didn't Read React Native is three years older than Flutter, introduced in 2015. Flutter uses Dart as its presentation and procedural language. React Native’s presentation language is proprietary but oddly resembles JSX. Flutter's. presentation language resembles. JSX. React Native uses JavaScript Bridge to. initialize screens and so doesn’t work as seamlessly as Flutter. The ‘hot update’
2024React Native 0.74 - Yoga 3.0, Bridgeless New Architecture, and more2023React Native 0.73 - Debugging Improvements, Stable Symlink Support, and moreReact Native 0.72 - Symlink Support, Better Errors, and morePackage Exports Support in React NativeReact Native 0.71-RC0 Android outage postmortemReact Native 0.71: TypeScript by Default, Flexbox Gap, and more...First-class Support for TypeScript202
Native Moduleの作り方 / Creating Native Module in React Native
https://ducklings.connpass.com/event/164844/ の発表資料です。
RN Features 2021年3月号 - React Native 0.64 リリース, JSIを使った高速化の例, React Native コンポーネントライブラリの紹介 - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティの活動サマリー React Native 0.64 リリース Hermes opt-in on iOS Inline Requires enabled by default Hermes with Proxy Support React Nativeで機密性の高いユーザーデータを保存するためのアプローチ サンプルコード ユーザーデータを安全に保存するためのハイブリッドアプローチ 概要図 類似ライブラリについて OSSなReact Native アプリ Pix Stack JSIを使った高速化の例 高速な key-valueストレージ react-native-mmkv React Nativeアプリを50倍速く改善した方法
15+ React Native Component Libraries You Should Know in 2023by PriyaNovember 30, 2023Front-End Development React Native component libraries can be a huge time-saver when you’re working on your next app project. How come? Well, let’s start with React itself. You probably know that React is an open-source JavaScript library that helps in building user interfaces for both web-based and mobile apps.
React Native と事業速度について React Native Matsuri で喋りました | DevelopersIO
10/02 に開催された React Native Matsuri で登壇してきました。当日のセッションは動画で公開されています。私は 1:49:41 から喋っています。 喋ったときの資料を主張をまとめるために調査した内容とともに公開しています。 当日は 30 分だったので、主張のみを伝えるので精一杯でした。この記事では削ぎ落とした内容も含めて、資料を振り返ってみます。 なぜ英語の資料にしたのか React Native Matsuri は React Native をテーマとした、はじめての日本初の大規模カンファレンスです。日本で開催されているカンファレンスならば資料も日本語で書くべきだと思ったのですが、日本の React Native コミュニティがどういったことを考えているのか発信するセッションがひとつくらいあってもいいだろう、ということで英語で書きました。 メタ分析の対象企業 メタ
Security · React Native
Security is often overlooked when building apps. It is true that it is impossible to build software that is completely impenetrable—we’ve yet to invent a completely impenetrable lock (bank vaults do, after all, still get broken into). However, the probability of falling victim to a malicious attack or being exposed for a security vulnerability is inversely proportional to the effort you’re willing
React Native 0.62.2のプロジェクトを0.63.3へアップデートする際に行った作業内容です。 0.63.3ではXcode12環境下でビルドができない問題が解消されている・・らしい。 ちなみに0.63.2では、iOS14で一部imageが表示されない不具合が修正されています。 更新内容の詳細はこちら(https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0633) React Native Upgrade Helperで差分を確認 React Native Upgrade HelperはUpgradeする際のVersion間の差分を表示してくれます。 0.62.2から0.63.3の差分はこちら -> 差分 変更済みの箇所はチェックをつけることもできます。 差分修正のみで問題なけ
地図アプリで目的地までの経路を検索したり、場所を活用したゲームや SNS など、位置情報を利用したアプリは生活の中で当たり前になりました。 本記事では、React Native で位置情報を取得 / 追跡してアプリに地図表示する方法を、サンプルアプリを作りつつ紹介したいと思います。 ※今回 React Native 公式の Geolocation を用いるので、 Expo についての内容は含みません🙏 イントロダクション Ract Native 位置情報に必要な概念 Geolocation Location (Expoを使用する場合) Geolocation とは React Native の Geolocation は、Webアプリケーションで位置情報を取得する際に利用される Geolocation Web のアプリ拡張 API です。 Geolocation Web APIは、W3C
GitHub - meliorence/react-native-render-html: iOS/Android pure javascript react-native component that renders your HTML into 100% native views
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
Preparing Your App for iOS 15 and Android 12 · React Native
2024React Native 0.74 - Yoga 3.0, Bridgeless New Architecture, and more2023React Native 0.73 - Debugging Improvements, Stable Symlink Support, and moreReact Native 0.72 - Symlink Support, Better Errors, and morePackage Exports Support in React NativeReact Native 0.71-RC0 Android outage postmortemReact Native 0.71: TypeScript by Default, Flexbox Gap, and more...First-class Support for TypeScript202
The React Native team has announced that the new architecture will be rolled out in 2022. Checkout their full blog here. “2022 is going to be the year of the New Architecture in open source” Since the release is just around the corner, this is a good time to understand what changes are taking place under the hood and how they might affect your React Native App. This article aims to cover the most
RN Features 2021年5月号 - React Native アプリのクリーンビルドコマンド, iOSでのHermesパフォーマンス, 決済サービス Stripe の React Native SDK - KitchHike Tech Blog
はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Japanコミュニティの近況 React Native アプリのクリーンビルドコマンド React Native プロジェクトのクリーンアップを行うライブラリ iOSでのHermesパフォーマンス 決済サービス Stripe の React Native SDK stripe-react-native React Native でグラデーションを再現する キッチハイクのアプリ開発最前線 さいごに We're Hiring React Native Japanコミュニティの近況 React Native Meetup #12 LT大会！ が今週5/21(金)開催です。参加者100人以上！ stand.fm での放送 4/20 #14 BeatFit
NINNO Tech Fest #2でしゃべったLTです https://ninno-tech-fest.connpass.com/event/226029/
The documentation is now live at reactnavigation.org, and v5 lives here. React Navigation 6 keeps mostly the same core API as React Navigation 5, and you can think of it as further polishing what was in React Navigation 5. Let's talk about the highlights of this release in this blog post. Highlights More flexible navigators Navigators accept many of their customization options as props, which me
If you're seeing deprecation warnings in your code, please note that we're currently working on version 8 of the JavaScript SDKs. In v8, some methods and properties will be removed or renamed. Check out the Migration docs and learn how to update your code to be compatible with v8. Don't already have an account and Sentry project established? Head over to sentry.io, then return to this page. If you
React Native for Webという言葉はよく耳にしていましたが、具体的にどういうものなのか知らなかったので、触ってみました。 React Native for Web necolas.github.io 「React Native for Web」は、React NativeパッケージのコンポーネントやAPIで書かれたコードを、Webでも動かせるように、Web用にコンポーネントやAPIを提供しているライブラリ。 パッケージはreact-native-web。 React Nativeでコンポーネントを作ると以下のようなコードになる。 import React from "react"; import { StyleSheet, Text, View } from "react-native"; function App() { return ( <View style={sty
I am mitsuruog | react-nativeでNative moduleを呼び出す(Swift編)
react-native で Swift の Native module を呼び出す方法です。基本的には下の Blog のやり方を真似ています。 Swift in React Native - The Ultimate Guide Part 1: Modules 紹介する内容は次の通りです。 簡単な Counter を Native Module で実装した Native Module の呼び出し Native Module から Constants を受け取る Native Module からの Callback を扱う Native Module からの Promise を扱う Native Module からの Event を扱う 対象のバージョンは次の通りです。 react-native: 0.57.8 Swift: 4.2.1 Xcode: 10.1 プロジェクト全体のコードは
はじめに サーバー周りはFirebase、インターフェースはexpo(React Native)でアプリケーションを作ります。Firebase、React Nativeの基本的な知識は知っている前提で進めます。 今回作るアプリのコアな機能 Facebook認証を利用したログイン機能 写真と文言をセットにした投稿機能 ユーザープロフィール編集機能 ※いいねとフォロー機能は今回実装しません。 Firebaseの設定 SNS認証について 別記事で解説してます。そちらを参照してください。 【React Native】ExpoでFirebase AuthenticationのSNS認証を利用する方法 データの保存先について 投稿内容とプロフィールのデータは基本的にFirestoreに保存する。例外としてプロフィールと投稿内容の画像ファイルはstorageに保存し、Firestoreに対応するURLを
Create React Native Firebase CRUD App with Firestore - Positronx.io
This is a step by step React Native Firebase tutorial. In this tutorial, we will learn to create CRUD (Create, Read, Update, Delete) app using Firestore for iOS and Android platforms.Firebase is a popular Backend-as-a-Service (Baas). It provides an excellent set of tools and features that helps in mobile application development that includes iOS app development, Android app development, and many m
はじめに 本ドキュメントは、ネイティブアプリケーション開発においてFacebook製のネイティブアプリケーション向けフレームワークである React Nativeを用いて開発する事例をまとめた資料となります。 本ドキュメントの目的は、ネイティブアプリケーション向けフレームワーク選定の参考情報となることです。 対象とする読者としては、以下を想定しています。 JavaScriptを利用する開発者（ECMAScript 2015以降を知っていることが望ましい） Webアプリケーション開発の知見を生かしてネイティブアプリケーションを開発したい開発者 AndroidまたはSwiftの開発経験は無いがネイティブアプリケーション開発をしたい開発者 TL;DR ほとんどのメンバーがネイティブアプリケーション開発未経験だったが、半年足らずでAndroid、iOS両プラットフォームのネイティブアプリケーション
React Native at Wix
This blog post is part of a series of blog posts, which aims to shed some light and share from our experience working with React Native at Wix. Wix App is one of the first applications built with React Native from scratch. After a 5-years journey, we are excited to look back in retrospective, and recount some of our daily challenges and how we solved them, alongside a couple of major decisions we’
React Native for Web で Flexbox をデフォルトにする | DevelopersIO
React Native に慣れていると React Native for Web のデフォルトが Flexbox でないことに違和感を覚えるでしょう。書き味を同じようにする設定を紹介します。 なお、 React Native for Web の環境を作る際は次の記事を参考にしてください。 https://dev.classmethod.jp/articles/introduce-react-native-for-web/ 追記 公式ドキュメントにやり方が載っていることを教えてもらいました。 HTML ファイルに直でスタイル指定する方法ですね。どの手法ともマッチしそうです。 @janus_wel 公式ドキュメントでわかりづらい場所に書いてあるのが悪いのですが、Guides > Client-sideにも該当の問題についての設定方法が言及されていますhttps://t.co/oNXhGIs7
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Nativeアプリを含んだmonorepoにおいて、バージョン番号を上げる操作 - Qiita
Toward Hermes being the Default · React Native
Expo SDK37のBare WorkflowでNotificationsを使ってみる - Qiita
React Native Elements
【浦島太郎さん必見】2022年にReactNativeでアプリ作うべきライブラリ5選
エンジニアでも出来る！Figmaを使って自作アプリをリニューアル - Qiita
React NativeのiOSネイティブをSwiftで書く - Qiita
Announcing React Native 0.70 · React Native
https://reactnative.directory/
ReactNativeアプリでFCM通知メッセージを使う - Qiita
Flutter vs. React Native in 2024
React Native's Many Platform Vision · React Native
15+ React Native Component Libraries You Should Know in 2023
React Native 0.62.2 から 0.63.3へのアップデート作業内容
React Native で位置情報を取得して地図表示する - Qiita
Deep dive into React Native’s New Architecture
React Nativeエコシステム概論 / react-native ecosystem
React Navigation 6.0 | React Navigation
JavaScript | Sentry for Javascript
React Native for Webを触ってみた - toshi-toma blog
【React Native】インスタグラム的なアプリを1日でサクッと実装してみた - Qiita
React Nativeを用いたネイティブアプリケーション開発の事例 | Fintan