CODEWITHSUNDEEP
react-nativeecmascript-6react-navigation
user10753862
user10753862

Reputation:

React-Native: Cant find component variable.

I am trying to setup navigation system. Using react navigation api but having this, "Cant find component variable. " problem. What I did is...

App.js

import React, {Component} from 'react';
import {createSwitchNavigator, createAppContainer} from 'react-navigation';
import WelcomeScreen from './src/screens/Welcome';
import DashboardScreen from './src/screens/Dashboard';

const appSwitchNavigation = createSwitchNavigator({
  Welcome:{ screen: WelcomeScreen },
  Dashboard:{ screen: DashboardScreen }
});

const AppContainer = createAppContainer(appSwitchNavigation);

class App extends Component {
  render() {
    return <AppContainer/>
  }
}

export default App

Welcome.js

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

export default class WelcomeScreen extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
});

Anyone know why I am facing with this error? And this is the file structure: enter image description here

Upvotes: 1

Views: 1001

Answers (2)

Aivis
Aivis

Reputation: 121

It seems Component import from 'react' is missing in App.js and Welcome.js:

import React, { Component } from 'react'

Or you can use:

class App extends React.Component

Upvotes: 1

Nirmalsinh Rathod
Nirmalsinh Rathod

Reputation: 5186

You forget to import Component

import React, { Component } from 'react';

Correct Code:

App.js

import React,{ Component } from 'react';
import {createSwitchNavigator, createAppContainer} from 'react-navigation';
import WelcomeScreen from './src/screens/Welcome';
import DashboardScreen from './src/screens/Dashboard';

const appSwitchNavigation = createSwitchNavigator({
  Welcome:{ screen: WelcomeScreen },
  Dashboard:{ screen: DashboardScreen }
});

const AppContainer = createAppContainer(appSwitchNavigation);

class App extends Component {
  render() {
    return <AppContainer/>
  }
}

export default App

WelcomeScreen.js

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

export default class WelcomeScreen extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
});

Upvotes: 1

Related Questions