It gives this error while running: undefined is not a function (evaluating '_reactNativr.default.createElement') - react-native

Question

This section of code is not running it always return en error saying undefined or not a function in the render function().
Heading
'use strict';
import React, {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
AlertIOS,
Dimensions,
BackHandler,
PropTypes,
Component,
} from 'react-native';
import NavigationExperimental from 'react-native-deprecated-custom-
components';
var _navigator;
//var Navipanel=require('./App/Navigation/Navipanel.js');
var Dashboard= require('./App/Dashboard/dashboard.js');
//var Sample= require('./App/Navigation/sample.js');
var Matches = require('./App/Components/Matches.js');
var Users = require('./App/Components/Users.js');
var SCREEN_WIDTH =require('Dimensions').get('window').width;
var BaseConfig=NavigationExperimental.Navigator.SceneConfigs.FloatFromRight;
var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop,
{
snapVelocity: 8,
edgeHitWidth: SCREEN_WIDTH,
});
BackHandler.addEventListener('hardwareBackPress', () => {
if (_navigator.getCurrentRoutes().length === 1) {
return false;
}
_navigator.pop();
return true;
});
var CustomSceneConfig = Object.assign({}, BaseConfig, {
// A very tighly wound spring will make this transition fast
springTension: 100,
springFriction: 1,
// Use our custom gesture defined above
gestures: {
pop: CustomLeftToRightGesture,
}
});
//var createReactElement = require('create-react-element');
var createReactClass = require('create-react-class');
var test = createReactClass({
_renderScene(route,navigator) {
_navigator = navigator;
if (route.id === 1) {
return <Dashboard navigator={navigator}/>;
}
else if(route.id === 2) {
return <Sample navigator={navigator} /> ;
}
else if(route.id === 3) {
return <Navipanel navigator={navigator} /> ;
}
else if(route.id === 4){
return <Matches navigator={navigator} /> ;
}
else if(route.id === 5) {
return <Users navigator={navigator} />
}
},
_configureScene(route) {
return CustomSceneConfig;
},
render:function() {
return (
<NavigationExperimental.Navigator [//error in this line]
initialRoute = {{id:1}}
renderScene = {this._renderScene}
configureScene = {this._configureScene} />
);
}
});
Undefined error _reactNative.default.createElement

Answer 1

You imported React from "react-native";
import React, {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
AlertIOS,
Dimensions,
BackHandler,
PropTypes,
Component,
} from 'react-native';
instead of this, you need to import React from "react";
import React from 'react';
When we use JSX in our render functions, in the background JSX runs React.createElement(...). And in your code, React is not defined. Because of this, it gives that error.