ReferenceError: style is not defined

Question

Why am i getting the error: 'ReferenceError: style is not defined'?

I've tried import { MyModal } from './src/components/MyModal' but then i get error: Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

App.js

import MyModal from './src/components/MyModal'

class Home extends Component {
   constructor(props) {
  super(props)

  this.state = {
      isModalVisible: false
   }
  }

   doSomething(){
     //
   }

   render(){
        return (
          <View style={styles.contentContainer}
            <Modal transparent={true}
                        visible={this.state.isModalVisible} 
                        onRequestClose={() => this.doSomething()}
                        animationType='fade'>
                           <MyModal changeModalVisibility = {this.doSomething} />
                  </Modal>
          </View>

    )
  }
}

   const styles = StyleSheet.create({
    contentContainer: {
      flex: 1,   
      alignItems: 'center',
      justifyContent: 'center'
    },
   });

MyModal.js

export default class MyModal extends Component {

    constructor(props) {
        super(props)

        this.state = {
          width: Dimensions.get('window').width
        };

        Dimensions.addEventListener('change', (e) => {
          this.setState(e.window);
        })
    }


   close = () => {
     this.props.doSomething();
   }



    render() {
       return(

             <TouchableOpacity activeOpacity={1} disabled={true} style={styles.contentContainer}>
                 <View style={[styles.modal, {width: this.state.width}]}>
                     <View style={styles.textView}>
                         <Text style={[styles.text, {fontSize: 16}]}> Modal Header </Text>
                     </View>
                     <View style={style.buttonsView}>
                         <TouchableHighlight onPress={() => this.close()} style={styles.touchable}>
                             <Text style={[styles.text, {color: 'orange'}]}> </Text>
                         </TouchableHighlight>
                     </View>
                 </View>
             </TouchableOpacity>
       )
    }
}




const styles = StyleSheet.create({
    contentContainer: {
      flex: 1,   
      alignItems: 'center',
      justifyContent: 'center'
    },
    modal: {
      height: 150,
      paddingTop: 10,
      alignSelf: 'center',
      alignItems: 'center',
      textAlign: 'center',
      borderRadius: 10,
      backgroundColor: 'white'
    },
    text: {
      margin: 5,
      fontSize: 16,
      fontWeight: 'bold'
    },
    touchable: {
      flex: 1,
      backgroundColor: 'white',
      paddingVertical: 10,
      alignSelf: 'stretch',
      alignItems: 'center',
      borderRadius: 10
    }


  });

Answer 1

For the styling error, replace style.buttonsView with styles.buttonsView in MyModal.

For the Invariant Violation error, you're exporting MyModal as a default export but are attempting to import it as if it were a named export.

Replace:

import {MyModal} from './MyModal';

With:

import MyModal from './MyModal';