Fixing animation bug

LuisNV · Mar 29, 2017 · 97b432a · 97b432a
1 parent a89372b
commit 97b432a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 13 deletions.
diff --git a/StepIndicator.js b/StepIndicator.js
@@ -1,5 +1,5 @@
 
-import React, { Component,PropTypes } from 'react';
+import React, { PureComponent,PropTypes } from 'react';
 import { View,Text,StyleSheet, Animated } from 'react-native';
 
 const STEP_STATUS = {
@@ -8,7 +8,7 @@ const STEP_STATUS = {
   UNFINISHED:'unfinished'
 }
 
-export default class StepIndicator extends Component {
+export default class StepIndicator extends PureComponent {
 
   constructor(props) {
     super(props);
@@ -53,8 +53,8 @@ export default class StepIndicator extends Component {
     const { labels, direction } = this.props;
     return (
       <View style={[styles.container, direction === 'vertical' ? {flexDirection: 'row', flex:1} : {flexDirection: 'column'}]}>
-        {this.renderProgressBarBackground()}
-        {this.renderProgressBar()}
+        {this.state.width !== 0 && this.state.width !== 0 && this.renderProgressBarBackground()}
+        {this.state.width !== 0 && this.state.width !== 0 && this.renderProgressBar()}
         {this.renderStepIndicator()}
         {labels && this.renderStepLabels()}
       </View>
@@ -67,11 +67,6 @@ export default class StepIndicator extends Component {
     }
   }
 
-  componentDidUpdate() {
-    this.onCurrentPositionChanged(this.props.currentPosition);
-
-  }
-
   renderProgressBarBackground = () => {
     const { stepCount, direction } = this.props;
     let progressBarBackgroundStyle;
@@ -99,10 +94,10 @@ export default class StepIndicator extends Component {
       <View
         onLayout={(event) => {
           if(direction === 'vertical') {
-            this.setState({progressBarSize: event.nativeEvent.layout.height})
+            this.setState({progressBarSize: event.nativeEvent.layout.height} , () => {this.onCurrentPositionChanged(this.props.currentPosition)})
           }
           else {
-            this.setState({progressBarSize: event.nativeEvent.layout.width})
+            this.setState({progressBarSize: event.nativeEvent.layout.width} , () => {this.onCurrentPositionChanged(this.props.currentPosition)})
           }
         }}
         style={progressBarBackgroundStyle}/>

diff --git a/example/package.json b/example/package.json
@@ -10,7 +10,7 @@
     "react": "15.4.2",
     "react-native": "0.40.0",
     "react-native-paged-scroll-view": "^2.0.4",
-    "react-native-step-indicator": "0.0.3",
+    "react-native-step-indicator": "0.0.4",
     "react-native-viewpager": "^0.2.13"
   },
   "devDependencies": {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-step-indicator",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView",
   "main": "StepIndicator.js",
   "directories": {