CODEWITHSUNDEEP
javascriptreactjsreact-native
King J
King J

Reputation: 303

Function is not defined in React native

I am creating a circular progress bar in react native and the error is get is rotateByStyle' is not defined.

This is a code i designed with help from an article. This must draw the circle with the progress based on certain parameters.I am using ES6 to defined the function

import React,{Component} from 'react';
import {Text, View, StyleSheet} from 'react-native';  

rotateByStyle = (percent, base_degrees, clockwise) => {
  let rotateBy = base_degrees;

  if(clockwise) {
    rotateBy = base_degrees + (percent * 3.6);
  } else {
    //anti clockwise progress
    rotateBy = base_degrees - (percent * 3.6);
  }

  return {
    transform:[{rotateZ: `${rotateBy}deg`}]
  };
}

renderThirdLayer = (percent, commonStyles, ringColorStyle, ringBgColorStyle, clockwise, bgRingWidth, progressRingWidth, innerRingStyle, startDegrees) => {
  let rotation = 45 + startDegrees;
  let offsetLayerRotation = -135 + startDegrees;

  if(!clockwise) {
    rotation += 180;
    offsetLayerRotation += 180;
  }

  if(percent > 50) {
    return <View style=    {[styles.secondProgressLayer,this.rotateByStyle((percent - 50), rotation, clockwise),
    commonStyles, ringColorStyle, {borderWidth: progressRingWidth}    ]}></View>
  } else {
    return <View 
             style={[styles.offsetLayer, innerRingStyle, ringBgColorStyle, {transform:[{rotateZ: `${offsetLayerRotation}deg`}], borderWidth: bgRingWidth}]}>
           </View>
    }
}

const CircularProgress = ({percent, radius, bgRingWidth, progressRingWidth, ringColor, ringBgColor, textFontSize, textFontWeight, clockwise, bgColor, startDegrees}) => {
  const commonStyles = {
    width: radius * 2,
    height: radius * 2,
    borderRadius: radius
  };
}

let firstProgressLayerStyle;
let displayThickOffsetLayer = false;

if(percent > 50){
  firstProgressLayerStyle = this.rotateByStyle(50, rotation, clockwise);
} else {
  firstProgressLayerStyle = this.rotateByStyle(percent, rotation, clockwise);
  if( progressRingWidth > bgRingWidth ) {
    displayThickOffsetLayer = true;
  }
}

let offsetLayerRotation = -135 + startDegrees;
if(!clockwise) {
  offsetLayerRotation += 180;
}


export default CircularProgress;

I expect a circular circle with progress bar

Upvotes: 2

Views: 4360

Answers (3)

King J
King J

Reputation: 303

I tried const and it didn't work so i used let

let rotateByStyle = (percent, base_degrees, clockwise) => {
  let rotateBy = base_degrees;

  if(clockwise) {
    rotateBy = base_degrees + (percent * 3.6);
  } else {
    //anti clockwise progress
    rotateBy = base_degrees - (percent * 3.6);
  }

  return {
    transform:[{rotateZ: `${rotateBy}deg`}]
  };
}

let renderThirdLayer = (percent, commonStyles, ringColorStyle, ringBgColorStyle, clockwise, bgRingWidth, progressRingWidth, innerRingStyle, startDegrees) => {
  let rotation = 45 + startDegrees;
  let offsetLayerRotation = -135 + startDegrees;

  if(!clockwise) {
    rotation += 180;
    offsetLayerRotation += 180;
  }

  if(percent > 50) {
    return <View style=    {[styles.secondProgressLayer,this.rotateByStyle((percent - 50), rotation, clockwise),
    commonStyles, ringColorStyle, {borderWidth: progressRingWidth}    ]}></View>
  } else {
    return <View 
             style={[styles.offsetLayer, innerRingStyle, ringBgColorStyle, {transform:[{rotateZ: `${offsetLayerRotation}deg`}], borderWidth: bgRingWidth}]}>
           </View>
    }
}

Upvotes: 0

Jeff Gu Kang
Jeff Gu Kang

Reputation: 4889

Solution

this.rotateByStyle

=> 

rotateByStyle

Why

rotateByStyle is not included in this.

In a method, this refers to the owner object. Alone, this refers to the global object. In a function, this refers to the global object. In a function, in strict mode, this is undefined. In an event, this refers to the element that received the event. Methods like call(), and apply() can refer this to any object.

Official: JS This

Upvotes: 4

S. Patel
S. Patel

Reputation: 172

You're getting this error because you need to initialize your variables using either of const, let or var keyword.

So in your case rotateByStyle = ... and renderThirdLayer = ... variables should be declared using any of the above mentioned keywords eg: - const rotateByStyle = ... for them to be defined and work.

Upvotes: 0

Related Questions