naoufal / react-native-progress-hud

A clean and lightweight progress HUD for your React Native app.

Home Page:https://www.npmjs.com/package/react-native-progress-hud

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

childContextTypes must be defined in order to use getChildContext()

csandeep opened this issue · comments

Im using ES6 style classes. Using ProgressHUD via the react-mixin is throwing an error

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

Code:

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;

Not sure if this is a issue with the progress hud , would be nice if we can use this in es6 classes

@csandeep The codebase I'm using this module on is still on createClass, could you submit a PR with this change?