Skip to content

childContextTypes must be defined in order to use getChildContext() #9

@csandeep

Description

@csandeep

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions