bmoneruxui bmoneruxui - 2 months ago 21
iOS Question

Super Expression Error in React Native Project

I'm using React Native on OS X, and coding with the Deco IDE.

I'm getting a

Super expression must either be a null or a function, not undefined
error in the simulator on save on my project.

My main issue seems to be from following tutorials online that seem to have a different sort of syntax than what is now used. And unfortunately the people online aren't listing their version. For instance they seem to be leaving out a ton of their commas, whereas my files are requiring it.

Here's a screenshot of the error
error on project save

And here's the code for the only two files I've edited...

index.ios.js:

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import ViewContainer from './app/components/ViewContainer';

class Project extends Component {
render() {
return (
<ViewContainer>
<Text>{'Hello from inside ViewContainer'}</Text>
</ViewContainer>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#00a0f0',
},
});

AppRegistry.registerComponent('Project', () => Project);


ViewContainer.js file:

import { Component, View } from 'react-native';

class ViewContainer extends Component {
render() {
return (
<View style={styles.viewContainer}>
{this.props.children}
</View>
);
}
}

const styles = React.Stylesheet.create({

viewContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'stretch',
},

});

module.exports = ViewContainer;

Answer

In ViewContainer Component Update it to be like this:

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';

class ViewContainer extends Component {
  render() {
    return (
      <View style={styles.viewContainer}>
        {this.props.children}
      </View>
    );
  }
}

const styles = StyleSheet.create({

  viewContainer: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-start',
    alignItems: 'stretch',
  },

});

module.exports = ViewContainer;

1- Import React and import Component from react not react-native

2- there is misspelling in StyleSheet is should be UpperCase, and import it from react-native

Comments