Push notifications are short messages that a backend server delivers to a user's device through the OS-level push service, displayed even when the corresponding app is not running. Push is the standard re-engagement and real-time messaging channel on mobile and increasingly on web.

How it works

The app registers with the OS push service (APNs on iOS, FCM on Android, Web Push on browsers) and…

PWA

A Progressive Web App (PWA) is a web application that uses modern browser capabilities to behave more like a native app: installable to the home screen, offline-capable, sending push notifications, and accessing hardware features through web APIs. PWAs deliver mobile-app-like experiences without app store distribution.

Core technologies

  • Service Workers. Scripts that run in the background,…

Jetpack Compose is Google's declarative UI framework for Android, built around Kotlin and shipped stable in 2021. Like SwiftUI on Apple platforms, Compose lets developers describe the UI as a function of state; the runtime diffs the composition and updates only what changed. Core ideas * Composable functions. A @Composable function is the building block; it can emit UI when called from another…

SwiftUI is Apple's declarative UI framework for building user interfaces across iOS, iPadOS, macOS, watchOS, tvOS, and visionOS. Introduced in 2019, SwiftUI uses Swift's strong type system and result builders to let developers describe the UI as a function of state; the framework diffs and renders updates automatically.

Core ideas

  • Declarative. Describe what the UI should look like; let the…

Flutter is Google's cross-platform UI framework for building applications from a single Dart codebase. Unlike React Native, Flutter does not use platform-native UI widgets; it renders its own widgets pixel-by-pixel via the Skia (and now Impeller) graphics engine. The result is highly consistent visuals across iOS, Android, web, desktop, and embedded.

Core ideas

  • Dart. The language:…

Android is Google's open-source mobile operating system, powering the majority of the world's smartphones across hundreds of device manufacturers. Android is based on a modified Linux kernel and ships with a rich application framework, multiple SDKs, and a heterogeneous ecosystem of OEM customisations on top.

Core platform pieces

  • SDK and languages. Native development uses Kotlin (modern,…

iOS is Apple's mobile operating system, powering the iPhone, iPad (as iPadOS, a close derivative), and iPod touch. iOS is a closed source platform with first-party SDKs, a curated App Store as the distribution channel, and tight hardware-software integration that defines the experience.

Core platform pieces

  • SDK and language. Native development uses Swift (modern) or Objective-C (legacy),…
React NativeのFlatListで要素がデバイスの高さ分存在しないときに、onEndReachedが発火する問題を解決する

React Nativeで無限スクロールのタイムラインを作成したんだけど、対象のコンテンツがデバイスの高さ以上になるコンテンツ数を持っていないときに、発生する必要のない無限スクロールイベントが無限で発生する事象が起きたので対処法を実装した。

まずはデバイスの高さを取得する。

次にFlatListののコンテンツサイズ変更時にsetContentHeightを利用し、リストの高さを更新する

で、リストの高さがデバイスの高さより大きければ、スクロール可能(onEndReachedが発火してもいい)ので

という風に実装できる。

React Nativeで動的にナビゲーションヘッダー文言を設定する方法

実現コード

useLayoutEffectって?

実装していて、useLayoutEffectっていうhooksが聞き覚えなさ過ぎて、react native専用のhooksだと思っていたけど、調べるとreactが用意しているhooksらしい。

useLayoutEffect

useLayoutEffect は useEffect
の一種ですが、ブラウザが画面を再描画する前に実行されます。

とのことで、さらに、

useLayoutEffect はパフォーマンスを低下させる可能性があります。可能な限り
useEffect
を使用することを推奨します。

とのことだった。できる限り使わないでほしいとのことなので知らなくても無理はなかったかもしれない。

今回は、useLayoutEffectを使用することで、タイトルが描画される前に処理が実行されるため、新しいタ…

Read more →
React Nativeで無限スクロールのタイムラインを作成した

Mastodonのクライアントアプリを作るうえで最もコアな機能であるタイムラインを作成した。無限スクロールを実装するためにいろいろと調べたりしたのでまとめておく。

FlatListが優秀

FlatList

  • 完全なクロスプラットフォーム。
  • オプションの水平モード。
  • 設定可能なビューアビリティ コールバック。
  • ヘッダーのサポート。
  • フッターのサポート。
  • セパレーターのサポート。
  • 引っ張って更新します。
  • スクロールの読み込み。
  • ScrollToIndex のサポート。
  • 複数列のサポート。

という多くの機能をサポートしているリストコンポーネント。

今回はタイムラインの無限スクロールを実現したいということで、

  • リストを引っ張り更新
    -…
Read more →

Goで作成したローカルサーバーにReact NativeからアクセスしようとしたらTypeError: Network request failedになったので、調査してみた

Page 1