naoufal / react-native-progress-hud Goto Github PK

  contextTypes: {
    showProgressHUD: React.PropTypes.func.isRequired,  // Remove isRequired here will solve it
    dismissProgressHUD: React.PropTypes.func
  },

render() {
  // Something else
        <ProgressHUD
          isVisible={this.props.hudVisible}
          isDismissible={false}
          overlayColor="rgba(0, 0, 0, 0.11)"
        />
}

What can I do here?

IntroView.getChildContext(): childContextTypes must be defined in order to use getChildContext().

const React = require('react-native');
const {
    Component,
    StyleSheet,
    Text,
    TextInput,
    TouchableHighlight,
    View,
    ScrollView,
    } = React;


const ProgressHUD = require('react-native-progress-hud');
const reactMixin = require('react-mixin');


class IntroView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            is_hud_visible: false,
        };
    }

    componentDidMount(){

    }

    render(){
        return (
                <View style={ styles.container  }>
                    <View style={{flex:1}}>
                        <Text style={styles.welcome}>
                            Branding Text HERE
                        </Text>
                    </View>


                    <View style={ styles.welcome} >
                        <TouchableHighlight onPress={(this.onSubmitPressed.bind(this))} style={styles.btn}>
                            <Text style={styles.instructions}>Get Started</Text>
                        </TouchableHighlight>
                    </View>

                    <ProgressHUD
                        isVisible={this.state.is_hud_visible}
                        isDismissible={false}
                        overlayColor="rgba(0, 0, 0, 0.11)"
                        />

                </View>
        );
    }

    onSubmitPressed() {        
        this.showProgressHUD();
    }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    margin: 10,
    fontSize: 20,
    fontWeight: '600',
    textAlign: 'center'
  },
  instructions: {
    marginBottom: 5,
    color: '#333333',
    fontSize: 13,
    textAlign: 'center'
  },
  btn: {
    borderRadius: 3,
    marginTop: 200,
    paddingTop: 15,
    paddingBottom: 15,
    paddingLeft: 15,
    paddingRight: 15,
    backgroundColor: '#0391D7',
  }
});

reactMixin(IntroView.prototype, ProgressHUD.Mixin);

module.exports = IntroView;