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」と「React Native」両方の特徴、決定的な違いを徹底解説する。 2022年11月現在では、モバイルアプリ開発としてFlutterが屈指の人気を誇っている。ところが、実はモバイルアプリを開発できるフレームワークはFlutter一択ではない。Flutter以外にモバイルアプリを開発できるフレームワークとしては、Meta(旧Facebook社)が開発したReact Nativeが挙げられる。 両者はどう違うのか。なぜ開発で使われているのか―そこで、今回の記事では特徴や課題点を徹底解説する。 本記事の対象読者 モバイルアプリ開発で生計を立てているプログラマー Flutter、React Native両者の特徴を知りたい人 モバイルアプリ開発案件を検討中で技術選定をされている人 本記事のタイトルが気
With the release of 0.71, React Native is investing in the TypeScript experience with the following changes: New app template is TypeScript by defaultTypeScript declarations shipped with React NativeReact Native documentation is TypeScript FirstIn this post we’ll cover what these changes mean for you as a TypeScript or Flow user. New App Template is TypeScript By DefaultStarting with 0.71, when y
はじめに はじめまして、株式会社ハローで業務委託として開発をしている@0906kokiです。 今回の記事では、React Nativeで開発されているAutoReserve for Restaurantsで、Expoを最大限に活かしたE2Eテストの導入実装について書きたいと思います。 背景 飲食店向けにセルフオーダーや予約台帳の機能を提供するAutoReserve for Restaurantsは、React Nativeで開発されております。 今回、AutoReserve for RestaurantsにE2Eを導入した目的に関しては、以下のような点が挙げられます。 手動テストの場合、テストをスキップ or 見逃していたケースがあったので、毎回網羅的にテストできるようにし、QAの質を上げたい 頻繁に本番デプロイできるようにする コミットごとにテストできるようにすることで、QAを待たず事前
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
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。今回の記事では、AutoReserveでおこなっているコード共通化の取り組みについて紹介します。 背景 AutoReserveのネイティブアプリはReact Nativeで書かれており、またウェブ版は、Reactで書かれています。 ウェブ版では、React Native for Webという、React上でReact NativeのコンポネントのAPIを使えるようにするライブラリを使用しています。 React Native for Webを採用したことで、ハローでは現在、エンジニア1人でiOS、Android、ウェブの全てのプラットフォームに同時展開できるようになりました。 また、不具合修正やデザインの修正も、一箇所を修正するだけで同時にできるようになりました。それぞれのプラ
Fast & Performant React Native List No more blank cells Swap from FlatList in seconds. Get instant performance. Similar props. Instant performance. Even with the similar props as the React Native FlatList, FlashList recycles components under the hood to maximize performance. <FlashList renderItem={({ item }) => { return <TweetCell item={item} />; }} estimatedItemSize={50} data={tweets} />;
ReactNativeといえば検索サジェストで『オワコン』とでてしまう事で開発界隈の中で話題ですが、個人的には未だにベストプラクティスだと考えております。 その理由はいくつかありますが、それについてはまた別の機会でお話しするとして、今回はそんな2022年の今でも一戦級で使えるReactNativeを久々にやってみたい人や新しいライブラリの発見をしたい人のために、まとめを作ったので是非みてください 読者の対象はクロスプラットフォームが向いているであろう、個人開発〜中小規模の開発している方を想定しています。 時代と勢いを感じたライブラリ5選 1.react-native-purchase 今でもReactNativeでIAPを実装しようとすると、react-native-iap (https://github.com/dooboolab/react-native-iap)というライブラリが有力
1年と2ヶ月かけて開発していたアプリがリリースできたので記事にしました。 詳しい開発のログは以下のスクラップにまとめています 👌 リリースしたアプリ ダウンロードはこちら。 ■ iOS ■ Android LPサイト アプリを開発したきっかけ 以前から週1で家族の振り返りの時間を設けていて、今週あった出来事を互いに共有して議事録に残すことを習慣にしていました。 ただ、上記の運用をしている間に以下のような問題があることに気づきました。 振り返りの際に、今週の出来事を思い出せない まとまった期間の振り返りたいときに、テキスト情報のみだとピックアップしづらい 良かった出来事のみピックアップしたい 振り返りを開催する時間が毎回ズレる 日付を忘れてスキップしてしまう そこで、上記を改善するためアプリを家族で開発しようという話になりました。 どんなアプリ？ memoirは1週間を振り替えるアプリとし
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 この記事では、AutoReserveウェブ版が、Next.jsを一度採用したがやめ、その後create-react-app + react-routerの構成に移行した経緯を書きます。 ウェブ版開発の背景 AutoReserve はAIが電話予約を代行してくれる飲食店向け予約グルメアプリで、現在はiOS / Android / ウェブにサービスを展開しています。 元々はReact Native製のネイティブアプリのみ展開していましたが、ユーザ獲得の面でウェブ版が必要となったため、 追加でウェブ版を実装し、現在の3プラットフォームでの展開に至ります。 最初の技術選定 ウェブ版の最初のバージョンでは、フレームワークとしてNext.jsを採用しました。Reactで書け、SEOのた
Amazon has been employing Java for their entire UI for the Kindle since they started making them in 2007. In the past year, the company has been dramatically changing the home screen and user interface. Many people are upset about the changes, since it effects their reading flow. Do you know the real reason why they have constantly been changing all aspects of the Kindle? This is because they are
Expo の仕組みと使い方をメモしていく記事
これは iOS アプリを開発しながら Expo について調べたことを自分用にまとめておく記事です。 Expo とは Expo はクロスプラットフォーム（iOS/Android/Web）で React Native アプリを開発するための便利機能を集めたプラットフォーム。 素の React Native プロジェクトと比較して若干の制約があるが、 Expo SDK が提供する様々な機能を使えたり開発環境の整備が簡単というメリットがある。Expo は Expo SDK, Expo CLI, Expo Go, EAS と呼ばれる4種類のツールで構成されている。 Expo SDK Expo でアプリを作るために必要なあれこれを集めたパッケージ。 開発に使われているリポジトリは主に以下のディレクトリで構成されている。 packages: Expo の API を提供するためのソースコード（ネイティブ
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
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の導入に関連しないビルドエラーの解決方法等は記載
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コンポーネント
GitHub - Shopify/react-native-skia: High-performance React Native Graphics using Skia
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
Core Style React with no outside deps and 100% feature support across web and React Native. Adds many missing features to the RN Style API in ~24Kb. Static A smart optimizer that does partial analysis, extracts CSS, flattens your tree, and removes code. Supports Next, Webpack, Vite, Babel and Metro. Tamagui All the components you'd want, cross platform and adaptable to each other. Composable Compo
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
NINNO Tech Fest #2でしゃべったLTです https://ninno-tech-fest.connpass.com/event/226029/
Faster, faster!人々がアプリを十分に楽しんで使うためには、アプリからできる限り摩擦を取り除くことが重要です。 React Nativeは、JavaScriptとReactを使って、マルチプラットフォームのモバイルアプリを素早く構築できるフレームワークです。そのおかげで、私はInkdropというアプリのモバイル版を作ることができました。エンドツーエンドの暗号化でデバイス間で同期するMarkdownノートアプリです。このアーキテクチャのおかげで、私はこのアプリを素早く構築することができ、ElectronJSで構築したデスクトップ版のコードベースの多くを再利用することで簡単に維持することができました。これは素晴らしいことです。React Nativeには大いに助けられましたが、特に画像を扱う際のパフォーマンスの低さには苦労しました。最悪の場合、7MBの画像をダウンロード、復号化、そ
React Native と事業速度について React Native Matsuri で喋りました | DevelopersIO
10/02 に開催された React Native Matsuri で登壇してきました。当日のセッションは動画で公開されています。私は 1:49:41 から喋っています。 喋ったときの資料を主張をまとめるために調査した内容とともに公開しています。 当日は 30 分だったので、主張のみを伝えるので精一杯でした。この記事では削ぎ落とした内容も含めて、資料を振り返ってみます。 なぜ英語の資料にしたのか React Native Matsuri は React Native をテーマとした、はじめての日本初の大規模カンファレンスです。日本で開催されているカンファレンスならば資料も日本語で書くべきだと思ったのですが、日本の React Native コミュニティがどういったことを考えているのか発信するセッションがひとつくらいあってもいいだろう、ということで英語で書きました。 メタ分析の対象企業 メタ
Web オンリーのプロダクトでも React Native for Web は輝く/react-native-web
React Native Matsuri 2021 で登壇した資料です https://reactnative-matsuri.com/ja
Enter description here
React Native Matsuri 2021で発表したスライドです。 https://reactnative-matsuri.com/ja
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Today we’re releasing React Native v0.66 for Android 12 and iOS 15 support alongside fixes and general updates. Highlights Handle taps on views outside parent bounds on Android New Bluetooth Permissions on Android Better Support for Apple Silicon, Xcode 13, and iOS 15 Hermes 0.9.0 Nightly and “Commitly” Releases Handle taps on child views outside parent boundaries on Android Thanks to @hsource f
概要 react-native-firebaseを組み込んだアプリでプッシュ通知を行う際の作業メモ。 具体的なソース実装よりは、権限設定などの事務的な内容多め。 前提として、react-native-firebaseと関連モジュール(/coreとか/messagingとか)はインストール済み(+pod installやAppDelegate.mの追記)で、GoogleService-Info.plistやgoogle-service.jsonはネイティブディレクトリに組み込み済みとする。 ※要するにreact-native-firebaseのイントロダクションは終わっている前提 【iOS】Apple Developersでやること 【Certificates, Identifiers & Profiles】から【Identifiers】のメニューを選択し、対象のアプリのIdentifier
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
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
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
React Nativeで作ったスマホアプリにAdmob（広告）とRevenue Cat（課金）を使ってマネタイズする
【2022年10月23日改訂】React Nativeを使ってアプリを作った際、マネタイズの方法としてよく検討される「広告収益」と「課金」について、AdmobとRevenueCatを使った実装や設定方法を解説します。※ExpoのManaged Workflowでも課金処理が実装できるようになりました。EAS Buildの設定などが必要ですが、この本では解説しませんのでご注意ください。なお、サンプルアプリはManaged Workflowで実装しております。
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
「スタディサプリ」が React Native から卒業するまで、あるいは技術的負債への感謝と敬意 - スタディサプリ Product Team Blog
こんにちは、Quipper iOS エンジニアの @manicmaniac です。 現在スタディサプリ iOS アプリ開発チームのエンジニアリングマネージャをしています。 今回はスタディサプリで長らく使われていた React Native のコードを Swift に書き換えた話をします。 実は React Native から Swift への置き換え自体は半年ほど前に完了していたのですが、ブログに記すのに時間がかかってしまいました。 スタディサプリにおける React Native の利用 Quipper では 2017年ごろから React Native を iOS / Android アプリ開発に利用し始め、スタディサプリでは 2018年3月ごろから徐々に React Native を iOS アプリケーション開発に導入していました。 iOS 版スタディサプリの、git から取り出した
Why we decided to rewrite our iOS & Android apps from scratch — in React Native
Our project name for the RN app rewrite, DenaliBackgroundHi, I am Naoya, a Senior Engineering Manager at Mercari. Along with my small but mighty team of frontend developers, I am responsible for delivering the Mercari app experience to our customers. Today, I’m here to explain why we’ve made the ambitious decision to completely rewrite our apps using React Native. Growth drives changeCurrently, we
はじめに 開発が一区切りついてリリースする際に、バージョン番号を上げる操作を「bumpする」って呼んだりしますよね。番号を上げるだけと言えばだけなのですが、この記事では以下の様な観点に着目して、bumpの方法を考えてみます。 monorepoのプロジェクトの場合、各パッケージのバージョンをさっと上げるには React Nativeアプリのパッケージを含んでいる場合、iOS/Android固有のファイルに書かれているバージョン番号を上げるには JavaScriptのエコシステムにある色々なコマンドやライブラリを紹介していくのですが、色々整理した末に、「結局、このRuby gemでよくないですか・・・」というところに行き着く記事です。 npmには、package.jsonのversionフィールドをbumpするコマンドがある npm version というコマンドがあって、単体のpackage
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
DMM meetupは、多種多様な生命が彩るジャングルのように毎回個性豊かなさまざまなテーマを題材に、共に学び、遊び、楽しめるイベントです。今回はオンラインサロン事業に焦点をあて、事業部メンバーが課題と取り組みについて話しました。大門弘明氏からは、React NativeからSwiftへの移行について発表がありました。 React Nativeの負債化でアプリのSwift化が決定 大門弘明氏：それでは「React Nativeで書かれたアプリをSwiftで書き直しています」の発表を始めます。 まずは自己紹介をします。名前は大門と申します。2014年に新卒で合同会社DMM.comに入社して、iOSエンジニアとしてオンラインサロン事業部でお仕事をしています。 本日お話しすることですが、つらい気持ちの話と、アプリ設計の紹介を少ししようと思っています。僕にとってReact Nativeはつらい。
Announcing Coinbase’s successful transition to React Native | by Coinbase | The Coinbase Blog
As of January 2021, the Coinbase iOS and Android apps have transitioned away from native development to React Native, and all mobile engineers are now collaborating in a single codebase. The transition from native to React Native did not happen overnight, and in the interest of helping those contemplating such a decision, we want to tell the story of how we got here. Specifically, we want to share
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
GitHub - vadimdemedes/tailwind-rn: 🦎 Use Tailwind CSS in React Native projects
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flutter vs. React Native in 2024
【徹底比較】Flutter VS React Native
First-class Support for TypeScript · React Native
React NativeとExpoを活用したネイティブビルド不要のE2Eテストの導入 - Hello Tech
Announcing React Native 0.70 · React Native
ウェブとReact Nativeアプリのコード共通化による同時展開 - Hello Tech
FlashList - super fast list for react native
【浦島太郎さん必見】2022年にReactNativeでアプリ作うべきライブラリ5選
【夫婦で開発】1年かけて1週間を振り返えるアプリを本気で開発してみた
なぜNext.jsをやめたのか？ - Hello Tech
Amazon Kindle UI is switching from Java to React Native
Deep dive into React Native’s New Architecture
ReactNativeアプリでFCM通知メッセージを使う - Qiita
Tamagui — React Native + Web UI kit
Toward Hermes being the Default · React Native
React Nativeエコシステム概論 / react-native ecosystem
React Native製アプリをJSIモジュールを使って50倍高速化した話
react-native-rearchitecture-2021
React Native for Webのこれまでから読み解くReact GUIのこれから
React Native Matsuri 2021
Announcing React Native 0.66 · React Native
react-native-firebaseでmessagingを使う時にやる作業メモ
React Native's Many Platform Vision · React Native
React Navigation 6.0 | React Navigation
React Nativeアプリを含んだmonorepoにおいて、バージョン番号を上げる操作 - Qiita
僕にとってReact Nativeは“つらい” DMMが負債脱却のために取り組んだSwift化
ReactとWinUI 3を使ってWindowsネイティブアプリを開発する