CODEWITHSUNDEEP
react-native
Ahmed Samy
Ahmed Samy

Reputation: 1046

How to re-render part of the component upon state change?

I have a component the includes progress.circle from the library react-native-progress (see link: https://github.com/oblador/react-native-progress).

Initially I set the progress prop of the progress circle to a state variable that is set to 0 at idle state as shown in the code below:

<Progress.Circle
        showsText={true}
        progress={this.state.progress} // this.state.progress = 0
        size={width * 0.1388888888888}
        color={"#EF5D6C"}
/>

Number of user interactions take place to set the state variable (this.state.progress) to a certain percentage then the component re-render to show the progress animation as intended.

Problem is the component flashes for part of a second as result of the re-rendering process. So is there a way to only re-render the progress circle and leave the rest of the component in its current rendering form.

Upvotes: 1

Views: 3223

Answers (2)

emdibee
emdibee

Reputation: 192

Make the progress.circle view as a separate component, as suggested in the previous answer. Keep the progress value in global state, which can be accessed by this separate component. If you are using Redux, you can do this easily. Then pass that state.progress value in the progress prop of the Progress.Circle

Upvotes: 1

ShaneG
ShaneG

Reputation: 1518

You could try separating out the Progress.Circle element into a different file so its in its own renderer. 

render() {
  return (
    <Progress.Circle
      showsText={true}
      progress={this.state.progress} // this.state.progress = 0
      size={width * 0.1388888888888}
      color={"#EF5D6C"}
    />
  )
}

That way when you change the element in state only the progress.circle should re-render. Then you would import this into your main file and call it there:

render(){
  ....
  <ProgressCircle />
  ....
}

Basically whatever is inside the render function will re-render. If the progress.circle element is on its own where the state is changed, only it should re-render as far as i know.

Hope this helps in some way!

Upvotes: 2

Related Questions