Reanimatedで作る、滑るインジケーター付きセグメントコントロール
標準のセグメントコントロールがAndroidで浮いて見える問題を、Reanimatedの自作コンポーネントで解決します。幅を実測して指標を滑らせる完全なコードと、UIスレッド駆動・アクセシビリティ・RTL対応までを実装メモとしてまとめました。
「視差効果を減らす」をオンにした人に、アニメーションをどう返すか — Expo で Reduce Motion を尊重する層を作る
iOS の「視差効果を減らす」/ Android の「アニメーションを削除」をオンにした利用者に、アニメーションをどう出し分けるか。AccessibilityInfo と Reanimated の ReduceMotion を組み合わせ、消すのではなく「穏やかな代替」を返す実装層を作ります。
Rork のお気に入り一覧を長押しドラッグで並べ替える — 再レンダリングを抑えた reorderable list と並び順の永続化
Rork が生成したお気に入り一覧に、長押しドラッグの並べ替えを後から足す実装手順です。再レンダリングを抑える設計、worklet の境界、並び順の永続化、ジャンクやゴーストカードの回避までを実コードでまとめました。
ProMotion 120Hz を壁紙アプリに行き渡らせる — CADisableMinimumFrameDurationOnPhone と Reanimated v3 の実装メモ
Rork で生成した壁紙アプリの 120Hz 化に取り組んだ実装メモ。Info.plist の CADisableMinimumFrameDurationOnPhone から Reanimated v3 worklets、FlashList スクロールまで、6壁紙アプリで観測した AdMob eCPM 改善幅と落とし穴を整理しています。
Rork アプリに Bottom Sheet を組み込む実践ガイド — @gorhom/bottom-sheet で iOS と Android の操作感を揃える
Rork が生成する Modal は便利ですが、複数のスナップポイントや慣性スクロールが必要になった瞬間に物足りなくなります。@gorhom/bottom-sheet を後から差し込む実装手順、キーボード対応、iOS/Android の差分対処までを実例で解説します。
Rork アプリで Reanimated の worklet エラーが出たときに順番に疑う 6 つのポイント
Rork 生成コードに Reanimated を組み込んだ途端に出る worklet 関連のエラーを、babel プラグインの抜け漏れから closure キャプチャまで、現場でぶつかる順に切り分けていきます。
Rork アプリの『触った瞬間の印象』を決める3つの実装 — アニメーション・ハプティクス・遷移速度
同じ機能のアプリでも『なんか気持ちいい』と感じるアプリと、そうでないアプリがあります。この差はアニメーション・ハプティクス・遷移速度の3要素の実装で決まります。Rork で作ったアプリに今日から取り入れられる具体的なコードを解説します。
Rork × React Native Skia 高品質グラフィックスUI — カスタムチャート・アニメーション・シェーダーエフェクト実装パターン
React Native Skiaを使ってRorkアプリに高品質なカスタムグラフィックスを実装する完全ガイド。Canvasによるカスタムチャート、グラデーション、シェーダーエフェクト、Reanimatedとの組み合わせによるインタラクティブアニメーションまで実践コード付きで解説します。
Rork アプリ パフォーマンス最適化：レンダリング・メモリ・バンドルサイズを徹底チューニング
Rork製アプリのパフォーマンスを体系的にチューニングします。React Nativeのレンダリング理解、FlatListの調整、FlipperとHermes Profilerによるボトルネック特定、メモリリーク対策、60fpsアニメーション、バンドルサイズ削減、起動時間短縮まで章立てで扱います。
Rork × React Native Reanimated & Gesture Handler 実践ガイド — 60fps を維持するアニメーション設計と高度なジェスチャーインタラクション
Reanimated 3 と Gesture Handler で 60fps を保つ設計を、壁紙・癒し系アプリの実運用で踏んだ落とし穴とともに整理しました。runOnJS の発火遅延、useDerivedValue キャッシュ、FlashList との併用、cancelAnimation 漏れなど、公式ドキュメント外の知見を実測値付きで共有します。