Getting error while running the application in react-native

Question

My App.js file code is like this

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import IndexScreen from "./src/screen/IndexScreen";
const navigator = createStackNavigator({
  Home: {
    screen: IndexScreen
  }
});

export default createAppContainer(navigator);

And my index.js file is like

import { React } from "react";
import { View, Text, StyleSheet } from "react-native";
const IndexScreen = () => {
  return (
    <View>
      <Text>IndexScreeen</Text>
    </View>
  );
};
const styles = StyleSheet.create({});

export default IndexScreen;

But after running the application I am getting this error.

What is my mistake

Have you tried to create IndexScreen as a class that extends React.Component and have a function render() inside? Also, your file is named index.js and you are trying to import file IndexScreen ? — Calvin Nunes
– Calvin Nunes, Commented Nov 12, 2019 at 18:12

Diogo Bratti · Accepted Answer · 2019-11-12 18:09:53Z

3

You are importing import IndexScreen from "./src/screen/IndexScreen"; and you said your file is named as index.js, is that right?

By the way, I get an error when I try import { React } from "react";. However if I try import React from "react"; it works.

answered Nov 12, 2019 at 18:09

Diogo Bratti

1231 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Utpal Over a year ago

no I have made a mistake in the question actually file name is IndexScreen.js and I have used your suggestion of importing React insted of {React} but still face the same issue.

Calvin Nunes Over a year ago

@Utpal if you made mistake on the question, then edit it and fix, to avoid people answering you with wrong solutions caused by your mistaken code...

Utpal · Accepted Answer · 2019-11-13 17:25:33Z

1

Finally solve it , actually I made a mistake to define a function component just after the import without adding a line break or blank line.

answered Nov 13, 2019 at 17:25

Utpal

8074 gold badges17 silver badges47 bronze badges

Comments

Synamatics · Accepted Answer · 2019-11-13 17:27:50Z

1

Three things:

You are importing IndexScreen, instead of index.js
It's not import { React } from "react";. It's import React from "react";
You are using const to Export from the file. The Export to use it as a react component you should probably do :

    class IndexScreen extends React.Component {
        render() {return (
            <View>
                <Text>IndexScreeen</Text>
            </View>
          );
        }
    }

edited Nov 13, 2019 at 17:27

answered Nov 12, 2019 at 18:17

Synamatics

13612 bronze badges

3 Comments

Utpal Over a year ago

no I have made a mistake in the question actually file name is IndexScreen.js and I have used your suggestion of importing React insted of {React} but still face the same issue.

Synamatics Over a year ago

have you tried removing node_modules files and installing it again? Maybe it will help you know.

Synamatics Over a year ago

Ahh, I think I found the issue. You are not using react Component to output. I will update my answer

Collectives™ on Stack Overflow

Getting error while running the application in react-native

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related