Converting HTML, CSS and JS to React Native

Question

I am trying to embedded the following three ring Apple code into my React Native Expo app as a final touch to my first practice app: https://codepen.io/markni/pen/Dmqso

However, I am not only getting the error "Document variable not defined" (does not even exist), but also struggling to integrate this code. Can anyone please help me with error in my logic and also tell me if this is a good practice to take html, css and js into react native apps.

import React, { Component } from "react";
import { ScrollView, StyleSheet, WebView, } from 'react-native';
import * as d3 from "d3";
import {render} from 'react-dom';
import ReactDOM from 'react-dom';
import { ExpoLinksView } from '@expo/samples';


class HomeScreen extends Component  {
  componentDidMount() {
    (function(){
      var gap = 2;

      var ranDataset = function () {
        var ran = Math.random();

        return    [
          {index: 0, name: 'move', icon: "\uF105", percentage: ran * 60 + 30},
          {index: 1, name: 'exercise', icon: "\uF101", percentage: ran * 60 + 30},
          {index: 2, name: 'stand', icon: "\uF106", percentage: ran * 60 + 30}
        ];

      };

      var ranDataset2 = function () {
        var ran = Math.random();

        return    [
          {index: 0, name: 'move', icon: "\uF105", percentage: ran * 60 + 30}
        ];

      };
      var colors = ["#e90b3a", "#a0ff03", "#1ad5de"];
      var width = 500,
          height = 500,
          τ = 2 * Math.PI;

      function build(dataset,singleArcView){

        var arc = d3.arc()
            .startAngle(0)
            .endAngle(function (d) {
              return d.percentage / 100 * τ;
            })
            .innerRadius(function (d) {
              return 140 - d.index * (40 + gap)
            })
            .outerRadius(function (d) {
              return 180 - d.index * (40 + gap)
            })
            .cornerRadius(20);//modified d3 api only

        var background = d3.arc()
            .startAngle(0)
            .endAngle(τ)
            .innerRadius(function (d, i) {
              return 140 - d.index * (40 + gap)
            })
            .outerRadius(function (d, i) {
              return 180 - d.index * (40 + gap)
            });

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        //add linear gradient, notice apple uses gradient alone the arc..
        //meh, close enough...


        var gradient = svg.append("svg:defs")
            .append("svg:linearGradient")
            .attr("id", "gradient")
            .attr("x1", "0%")
            .attr("y1", "100%")
            .attr("x2", "50%")
            .attr("y2", "0%")
            .attr("spreadMethod", "pad");

        gradient.append("svg:stop")
            .attr("offset", "0%")
            .attr("stop-color", "#fe08b5")
            .attr("stop-opacity", 1);

        gradient.append("svg:stop")
            .attr("offset", "100%")
            .attr("stop-color", "#ff1410")
            .attr("stop-opacity", 1);


        //add some shadows
        var defs = svg.append("defs");

        var filter = defs.append("filter")
            .attr("id", "dropshadow")

        filter.append("feGaussianBlur")
            .attr("in", "SourceAlpha")
            .attr("stdDeviation", 4)
            .attr("result", "blur");
        filter.append("feOffset")
            .attr("in", "blur")
            .attr("dx", 1)
            .attr("dy", 1)
            .attr("result", "offsetBlur");

        var feMerge = filter.append("feMerge");

        feMerge.append("feMergeNode")
            .attr("in", "offsetBlur");
        feMerge.append("feMergeNode")
            .attr("in", "SourceGraphic");

        var field = svg.selectAll("g")
            .data(dataset)
            .enter().append("g");

        field.append("path").attr("class", "progress").attr("filter", "url(#dropshadow)");

        field.append("path").attr("class", "bg")
            .style("fill", function (d) {
              return colors[d.index];
            })
            .style("opacity", 0.2)
            .attr("d", background);

        field.append("text").attr('class','icon');


        if(singleArcView){

          field.append("text").attr('class','goal').text("OF 600 CALS").attr("transform","translate(0,50)");
          field.append("text").attr('class','completed').attr("transform","translate(0,0)");

        }

        d3.transition().duration(1750).each(update);

        function update() {
          field = field
              .each(function (d) {
                this._value = d.percentage;
              })
              .data(dataset)
              .each(function (d) {
                d.previousValue = this._value;
              });

          field.select("path.progress").transition().duration(1750).delay(function (d, i) {
            return i * 200
          })
              .ease("elastic")
              .attrTween("d", arcTween)
              .style("fill", function (d) {
                if(d.index===0){
                  return "url(#gradient)"
                }
                return colors[d.index];
              });

          field.select("text.icon").text(function (d) {
            return d.icon;
          }).attr("transform", function (d) {
                return "translate(10," + -(150 - d.index * (40 + gap)) + ")"

              });

          field.select("text.completed").text(function (d) {
            return Math.round(d.percentage /100 * 600);
          });

          setTimeout(update, 2000);

        }

        function arcTween(d) {
          var i = d3.interpolateNumber(d.previousValue, d.percentage);
          return function (t) {
            d.percentage = i(t);
            return arc(d);
          };
        }


      }


      build(ranDataset);
      build(ranDataset2,true);


    })()

  }
  render() {
  return (
    <ScrollView style={styles.container}>

<WebView
        source={{uri: 'https://cdn.rawgit.com/bm-w/d3/master/d3.js'}}
      />
      <ExpoLinksView />
    </ScrollView>
  );
}
}

export default HomeScreen

LinksScreen.navigationOptions = {
  title: 'Links',
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 15,
    backgroundColor: '#fff',
  },

  body: {
    backgroundColor: '#000000',
    padding:0,
    margin:0,

  },
  goal: {
    fontSize: 30,


  },
  completed: {
    fontSize: 95,
  }

});

Thank you for your help.

sd_dewasurendra · Accepted Answer · 2019-11-14 07:35:00Z

3

There are some 3rd party libraries that you can use to render HTML in react native.

react-native render-html

reavt-native htmlview

Note - Some HTML tags may not work in these libraries. But most HTML tags can be shown in the above libraries.

answered Nov 14, 2019 at 7:35

sd_dewasurendra

3936 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pixelpax Over a year ago

I believe this is the opposite of what this user is asking. They want to know how to go html -> react-native, you answered how to go from react-native -> html

Gajen Dissanayake · Accepted Answer · 2023-02-10 05:11:30Z

0

Ok, install the library as

npm install react-native-render-html

Then import it as

import RenderHtml from 'react-native-render-html';
import { useWindowDimensions } from 'react-native';

Don't forget to import the useWindowDimentions

When redering, something like this...

const { width } = useWindowDimensions();
const myHTMLCode="<h1>Hello Hell..!</h1>";

<RenderHtml
contentWidth={width}
source={{html:`${myHTMLCode}`}}
/>

Hope it helps..!

answered Feb 10, 2023 at 5:11

Gajen Dissanayake

1031 silver badge14 bronze badges

Collectives™ on Stack Overflow

Converting HTML, CSS and JS to React Native

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related