androidreact-nativemobile

How to use Trading view in react native Expo?

I want to make trading App with react native and expo, and I don't know how to integrate Trading view with react native app.

I did try other chart libraries, but they are not as rich as Trading view, and I saw Trading view react native example but it's not in expo and it has a poor documentation.

Solution

  • You can use TradingView chart by webView in react native expo. run:

    npx expo install react-native-webview

    use TradingView html for example:

    const htmlContent = `
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <title>TradingView Chart</title>
    <script src="https://s3.tradingview.com/tv.js"></script>
    <style>
    .tv-header__title {
        font-size: 120px !important;
    }
    #tv_chart_container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 45px !important;
      }
    .tv-header__top-line {
        height: 250px !important;
    }
  </style>
  </head>
  <body>
    <div id="tv_chart_container"></div>
    <script>
      const tvChart = new TradingView.widget({
        symbol: '${coinId}USD',
        interval: '5',
        timezone: 'Etc/UTC',
        theme: 'dark',
        width: '100%',
        height: '99.5%',
        style: '1',
        theme: 'light',
        save_image: false,
        locale: 'en',
        hide_side_toolbar: false,
        toolbar_bg: '#f1f3f6',
        container_id: 'tv_chart_container'
      });
      tvChart.onChartReady(function() {
        tvChart.addCustomCSSFile('./tradingView.css')
      })
    </script>
  </body>
</html> `;

    and use it in webView tag:

    <WebView source={{ html: htmlContent }} />