こんにちは！テラーノベルとテラードラマでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！
タイトルの通りなのですが、これからReact Nativeでアプリを作ろう！という人はblueskyの公式クライアントアプリを参考にしましょう！
多くのユーザーがいるサービスで、継続的に開発されている
実際に多くのユーザーがWebやアプリで利用しているサービスであり、それがOSSで公開されているのは凄いですよね。
ストアやWebで公開されているアプリケーションなので、実際にアプリをインストールして触りながら、この部分のコードはどうなっているんだろう？と確認することもできるのもキャッチアップしやすい点かと思います。
技術スタックがモダンな作りになっている
Expoを利用しており、Webに関してもReact Native for Webを利用するような作りになっています。
Expo Modulesの利用や、ExpoのCNGにも対応していたりと、Expoの機能をフルに使って開発されています。
また、Tanstack QueryやZod、ZeegoなどのUIライブラリなど、人気の高いライブラリが利用されています。
より詳細な技術スタックはこちら
Expo ModulesやConfig Pluginの対応、パッチなどが参考になる
少し発展的な内容になりますが、ExpoでNativeのAPIを呼び出したり、iOS/Androidのプロジェクトに対して変更を加える際にはExpo ModulesやConfig Pluginを作成する必要があります。
BlueskyのアプリでもこちらのようにいくつものExpo ModulesやConfig Pluginが書かれており、どのように作成するかの見本となります。
また、一部のライブラリに対して、不具合などによりパッチを当てたいときがあります。
そういったものも、リポジトリ内のこちらのように、パッチファイルとそれを当てる理由のMarkdownファイルがセットになって設置されています。
こういった運用上必要なものもあるんだなーというのも知ることができました。
その他参考になったこと
Application Layout Framework (ALF)
こちらのように、React NativeでのスタイリングをALFと読んでいるレイアウトの定数を定義して利用しているようです。
次のような感じで、スタイルのUtilityを提供しています。
import { atoms, useTheme } from '#/alf'
const t = useTheme()
シンプルな感じですが、TailwindのようにUtility Firstな感じをReact NativeのStylesheet APIを使って実現しています。
多言語対応
React Nativeで多言語対応のアプリケーションを作ったことがなかったので知りませんでしたが、BlueskyではLinguiを使っているようでした。
Lingui自体はReact Nativeようではなく、WebのReactでも利用できるもののようなので、Webに対応するためにこちらを利用したのかもしれませんね。
またCrowdinという翻訳の管理ツールも利用しているようでした。
Native感を出す
こちらのBlueskyを開発している方のブログで、React Nativeアプリでより “ネイティブ感” を出すための方法が紹介されています。
- 境界線は
1pxのような指定ではなくStyleSheet.hairlineWidthを使う - React Navigationの
presentation="pageSheet"を指定してNativeのシートを使う - BottomSheetを置き換え
- レイアウトアニメーションや、タップしたときのフィードバックなど
このように、様々な学びがあるリポジトリでした。
React Nativeを使った開発で困ったことがあれば、まずはbluesky-social/social-appリポジトリを見て、参考にできないかチェックするのが良いかもしれませんね。
それでは良いReact Nativeライフを！
Views: 0
