React NativeでHighcharts を使う

インストール

まずはGithubの公式ドキュメント通り進めます。

npm install react-native-highcharts --save

上記インストールで進めようとすると、

Unable to resolve module `react-native-webview` from `node_modules/@highcharts/highcharts-react-native/src/HighchartsReactNative.js

で怒られます。

エラー回避

モジュールの追加

そこで、エラーで指摘されるスクリプトを確認すると、そのフォルダでimportしているモジュールがインストールされていません。なのでコマンドで必要なモジュールを追加します。

npm install react-native-webview --save

CDNオプションの追加

これでインポートエラーは回避できますが、早速、公式ドキュメントのサンプル通りのスクリプトを動かそうとすると、iOSシミュ−レーターでは表示されません。。

色々と探した結果、以下のようにオプションを追加してもらえば無事表示されました。
参考記事；https://github.com/highcharts/highcharts-react-native/issues/4

<View>
  <HighchartsReactNative
  useCDN={true}
  useSSL={true}
  styles={styles.chart}
  options={this.state.chartOptions}
/>
</View>