【React Native】動作の重い画面を最適化してくれるライブラリ「react-navigation-heavy-screen」

時折動作が重い React Native アプリの速度改善をいくつか試している中で「react-navigation-heavy-screen」というライブラリを見つけたのでまとめ。
ライブラリの説明文にも「React Nativeで重い画面を最適化して、React Navigation のスタックと遅延を防ぎます。」とありました。

GitHub のページはこちらから。

GitHub – nandorojo/react-navigation-heavy-screen: ⚡️Optimize heavy screens to prevent lags during React Navigation transitions.
https://github.com/nandorojo/react-navigation-heavy-screen

ライブラリのインストールには下記のコマンドを実行します。

npm install react-navigation-heavy-screen --save
expo install react-native-reanimated

実装サンプルコードは下記のとおりです。

import React from 'react'
import { OptimizedHeavyScreen } from 'react-navigation-heavy-screen'

const Screen () => (
  <OptimizedHeavyScreen>
    <View>
      ......
    </View>
  </OptimizedHeavyScreen>
);

export default Screen

現在のコンポーネントを　<OptimizedHeavyScreen> で囲えばOKとのことです。
なお、Props として、読み込み中に代わりに表示されるコンポーネントを placeholder で設定したりできます。

が、実際に上記を追加してアプリを実行したところ、アプリの画面に何も表示されなくなりました…！
現時点では何を間違えたのかまだわからないので、他のサンプルコードを探しながら原因を追究していきたいと思います。
何かわかったら、また記事にまとめるつもりです。

以上、React Native で動作の重い画面を最適化してくれるライブラリ「react-navigation-heavy-screen」のご紹介でした。
今回の記事は参考にならないと思いますが…ライブラリの紹介に関しては参考になれば幸いです。