React Native Skiaを使って当ブログの背景に桜の花びらを舞い散らせるエフェクトを実装しました。

当ブログの背景に桜を舞い散らせた

React Native SkiaのAtlasでは大量の画像を効率的に描画することが可能です。

React Native SkiaのAtlasについて

当ブログのシステムを更新しました。

当ブログのシステムを更新しました

React Nativeのネイティブモジュールを作成する仕組みであるExpo Modulesの概要について説明します。

Expo Modulesとは?

React Native Skiaでテキストカラーを背景色に合わせて部分的に反転させる方法についてです。

React Native Skiaでテキストを背景色に合わせて反転させる

最近様々なサイトやロゴでみかける、円の枠線にかかるグラデーションをReact Native Skiaで実装してみます。

React Native Skiaで円の枠線に対してグラデーションをかける

react-native-reanimatedでコインの裏表が回転するアニメーションを表現してみます。

React Nativeでコインの裏表を回転させるアニメーション

React Native Skiaでカーブのついた折れ線グラフを実現したいと思います。d3-shapeを使います。

react-native-skiaで丸みのついた折れ線グラフを実現する

ExpoのConfig PluginでPodfileを直接書き換える方法です。

ExpoのConfig PluginでPodfileを直接書き換える

ExpoのManaged WorkflowでAndroid 13のThemed Iconを設定する方法です。

ExpoのManaged WorkflowでAndroid 13のThemed Iconsを設定する

ExpoのConfig PluginをTypeScriptで開発するための環境設定について説明します。

ExpoのConfig PluginをTypeScriptで開発する環境を整える

ExpoのManaged Workflowにおいてexpo-build-propertiesでAndroidのminSdkVersionやiOSのターゲットバージョンを設定する方法です。

ExpoのManaged Workflowでビルド時の設定値(ターゲットOSバージョン等)を変更する

React Nativeで独自のCustom Hapticsを使う方法について説明します(iOS)。

React NativeでCustom Hapticsを使う (iOS)

react-native-videoのv5系でExoPlayerを使うための設定です。

ExpoのManaged Workflowでreact-native-videoのExoPlayerを使う設定

react-native-skiaで三次ベジェ曲線を描く方法について説明します。

react-native-skiaで三次ベジェ曲線を描く

React Native Skiaで二次ベジェ曲線を描く方法について説明します。アニメーションもしてみます。

react-native-skiaで二次ベジェ曲線を描く

react-native-skiaでぼんやり光るライトを表現してみたいと思います。

Skiaでぼんやり光るライトを表現する

Reactロゴをreact-native-skiaでアニメーションさせて遊んでみました。楕円上を小さな円が周ります。

Reactのロゴをreact-native-skiaでアニメーションさせてみる

iOSでの購入時等に表示される、チェックマークが描かれるアニメーションを再現してみたいと思います。

react-native-skiaでチェックマークアニメーションを実装する

先日のReact Native EU 2022で絵文字を選択するためのライブラリrn-emoji-keyboardが紹介されていました。

react-nativeで絵文字を選択するためのライブラリrn-emoji-selector

Material UIでも使われているRipple Effectのボタンをreact-native-skiaで作成してみます。

react-native-skiaでRipple Effectボタンを作成する

react-native-skiaのグラデーションとアニメーションを使い、ロード中表示用のSkeleton Screenを実装します。

react-native-skiaでSkeleton Screenを作成する

react-native-skiaでテキストにグラデーションをかける方法です。アニメーションも試してみます。

react-native-skiaでテキストにグラデーションをかける

様々なアプリやサービスで見かける、収縮する小さな円（ライト)をreact-native-skiaで表現してみます。

react-native-skiaで収縮する円を表現する

React Nativeでカスタムフォントを利用した時に、Textに指定したweightに応じて変化させる方法です。

React Nativeでカスタムフォントのweight設定をする

react-native-skiaでドロップシャドウをつける方法です。

react-native-skiaでドロップシャドウをつける

react-native-skiaで円弧を描く方法についてです。path.addArcを使います。

Skiaで円弧を描く

スニーカーを集めるアプリAgletで使われているアニメーションをreact-native-skiaで再現してみます。

Agletの無限に斜め横に移動するアニメーションを再現してみる

react-native-skiaで放物線の動きを描く方法についてです。

Skiaで放物線の動きを描く

三角関数の計算をおこなうためのツールをSkiaで作成してみました。角度と半径を元にsin, cosの計算を行います。

三角関数計算ツール📐

React Native Web(Next.js)でreact-native-reanimatedの設定が意外と大変だったため、記録として残します。

Webでreact-native-reanimatedの設定を行う

2DグラフィックライブラリをReact Nativeで扱うためのreact-native-skiaを当ブログに導入しました

ブログにreact-native-skiaを導入しました🎨

ExpoのManaged WorkflowでWidget(iOS / Android)を作成する方法について説明します。

Expo (EAS Build)でAndroid・iOSのWidgetを作成した

当ブログ(Next.js)にReact Native for Webを導入しました。

当ブログにReact Native for Webを導入しました

ExpoのEAS Buildで、Managed Workflowプロジェクトに対してアプリ内課金を実装する手順について説明します。

ExpoのManaged Workflowでアプリ内課金を実装する

Expo (React Native)関連のリンクをまとめました。

Expo(React Native)のリンク集

最近サポートされた、EAS BuildのManaged Workflowビルドを試してみます。

Hello EAS Build! (Managed Workflow)

React NativeのアプリをM1 Mac上で検証する手順についてです。

M1 Mac上でReact Nativeアプリを実行・検証してみる

AndroidのExpo Clientアプリを、CLI(expo client:install:android)ではなく、APKを直接インストールする方法です。

AndroidのExpo ClientアプリをAPKで直接インストールする

Vercelでデプロイした時にshould NOT have fewer than 1 propertiesと謎のエラーが出た場合の対処法です。

Next.js Vercelデプロイ時にエラー should NOT have fewer than 1 properties

Firestoreのインデックス管理について説明します

firestoreのindexを自動で管理する

React Nativeでカスタムフォントを使った場合、行間がやたら拡がってしまう場合があります。その場合の調整方法について説明します。

React Nativeでカスタムフォントの行間がやたら拡がってしまう場合の調整方法

Expoの設定ファイルをtypescriptで動的に書くやり方について説明します。アプリから環境変数を参照する方法についても記載します。

Expoの設定(app.json)をtypescriptで動的に記述する

ブログを新たに開設しました。