title: react-native-step-indicator not working with react-native v0.52.0
body: <p>I'll try to use <a href="https://github.com/24ark/react-native-step-indicator" rel="nofollow noreferrer">react-native-step-indicator</a> with the react-native project. But it returned this error.
  <strong>undefined is not an object (evaluating 'React.PropTypes.func')</strong></p>
  <p>Here is my package.json file.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "app-test",
    "version": "0.1.0",
    "private": true,
    "devDependencies": {
      "jest-expo": "25.0.0",
      "react-native-scripts": "1.11.1",
      "react-test-renderer": "16.2.0"
    },
    "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
    "scripts": {
      "start": "react-native-scripts start",
      "eject": "react-native-scripts eject",
      "android": "react-native-scripts android",
      "ios": "react-native-scripts ios",
      "test": "node node_modules/jest/bin/jest.js"
    },
    "jest": {
      "preset": "jest-expo"
    },
    "dependencies": {
      "expo": "^25.0.0",
      "firebase": "^4.9.0",
      "react": "16.2.0",
      "react-dom": "^16.2.0",
      "react-native": "0.52.0",
      "react-native-android-kit": "^1.2.1",
      "react-native-gesture-handler": "^1.0.0-alpha.40",
      "react-native-indicators": "^0.11.1",
      "react-native-paged-scroll-view": "^2.0.4",
      "react-native-pathjs-charts": "0.0.33",
      "react-native-router-flux": "^4.0.0-beta.28",
      "react-native-step-indicator": "0.0.7",
      "react-native-tab-view": "^0.0.74",
      "react-native-tabs": "^1.0.9",
      "react-native-viewpager": "^0.2.13",
      "react-navigation": "^1.0.0-beta.27",
      "victory": "^0.25.4",
      "victory-native": "^0.17.0"
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>And this is the page that I want to integrate step-indicator.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { AppRegistry,StyleSheet,View, Text } from 'react-native';
  import ViewPager from 'react-native-viewpager';
  import StepIndicator from 'react-native-step-indicator';
  const PAGES = ['Page 1','Page 2','Page 3','Page 4','Page 5'];
  
  const firstIndicatorStyles = {
    stepIndicatorSize: 30,
    currentStepIndicatorSize:40,
    separatorStrokeWidth: 3,
    currentStepStrokeWidth: 5,
    separatorFinishedColor: '#4aae4f',
    separatorUnFinishedColor: '#a4d4a5',
    stepIndicatorFinishedColor: '#4aae4f',
    stepIndicatorUnFinishedColor: '#a4d4a5',
    stepIndicatorCurrentColor: '#ffffff',
    stepIndicatorLabelFontSize: 15,
    currentStepIndicatorLabelFontSize: 15,
    stepIndicatorLabelCurrentColor: '#000000',
    stepIndicatorLabelFinishedColor: '#ffffff',
    stepIndicatorLabelUnFinishedColor: 'rgba(255,255,255,0.5)',
    labelColor: '#666666',
    labelSize: 12,
    currentStepLabelColor: '#4aae4f'
  }
  
  const secondIndicatorStyles = {
    stepIndicatorSize: 25,
    currentStepIndicatorSize:30,
    separatorStrokeWidth: 2,
    currentStepStrokeWidth: 3,
    stepStrokeCurrentColor: '#fe7013',
    stepStrokeWidth: 3,
    stepStrokeFinishedColor: '#fe7013',
    stepStrokeUnFinishedColor: '#aaaaaa',
    separatorFinishedColor: '#fe7013',
    separatorUnFinishedColor: '#aaaaaa',
    stepIndicatorFinishedColor: '#fe7013',
    stepIndicatorUnFinishedColor: '#ffffff',
    stepIndicatorCurrentColor: '#ffffff',
    stepIndicatorLabelFontSize: 13,
    currentStepIndicatorLabelFontSize: 13,
    stepIndicatorLabelCurrentColor: '#fe7013',
    stepIndicatorLabelFinishedColor: '#ffffff',
    stepIndicatorLabelUnFinishedColor: '#aaaaaa',
    labelColor: '#999999',
    labelSize: 13,
    currentStepLabelColor: '#fe7013'
  }
  
  const thirdIndicatorStyles = {
    stepIndicatorSize: 25,
    currentStepIndicatorSize:30,
    separatorStrokeWidth: 2,
    currentStepStrokeWidth: 3,
    stepStrokeCurrentColor: '#7eaec4',
    stepStrokeWidth: 3,
    stepStrokeFinishedColor: '#7eaec4',
    stepStrokeUnFinishedColor: '#dedede',
    separatorFinishedColor: '#7eaec4',
    separatorUnFinishedColor: '#dedede',
    stepIndicatorFinishedColor: '#7eaec4',
    stepIndicatorUnFinishedColor: '#ffffff',
    stepIndicatorCurrentColor: '#ffffff',
    stepIndicatorLabelFontSize: 0,
    currentStepIndicatorLabelFontSize: 0,
    stepIndicatorLabelCurrentColor: 'transparent',
    stepIndicatorLabelFinishedColor: 'transparent',
    stepIndicatorLabelUnFinishedColor: 'transparent',
    labelColor: '#999999',
    labelSize: 13,
    currentStepLabelColor: '#7eaec4'
  }
  
  export default class E2 extends Component {
  
    constructor() {
      super();
      var dataSource = new ViewPager.DataSource({
        pageHasChanged: (p1, p2) =&gt; p1 !== p2,
      });
      this.state = {
        dataSource: dataSource.cloneWithPages(PAGES),
        currentPage:0
      }
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;View style={styles.stepIndicator}&gt;
            &lt;StepIndicator customStyles={firstIndicatorStyles} currentPosition={this.state.currentPage} labels={["Account","Profile","Band","Membership","Dashboard"]} /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  
    renderViewPagerPage = (data) =&gt; {
      return(&lt;View style={styles.page}&gt;
        &lt;Text&gt;{data}&lt;/Text&gt;
      &lt;/View&gt;)
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#ffffff',
    },
    stepIndicator: {
      marginVertical:50,
    },
    page: {
      flex:1,
      justifyContent:'center',
      alignItems:'center'
    }
  });</code></pre>
  </div>
  </div>
  
  How can I solve this error, I appreciate your help with this.</p>