React native android Undefined is not function

Question

React native android:

When I am navigating from one screen to next screen

undefined is not a function (evaluating '(0, _reactNavigation.StackNavigator)({ SettingScreen: { screen: _settings.default }, HomeScreen: { screen: _Home.default } })')

App.js

import React, {Component} from 'react';
import { AppRegistry} from 'react-native';
import { Button } from 'react-native';
import {Navigation} from 'react-native'
import { StackNavigator } from 'react-navigation';

import Settings from './screens/Settings';
import Home from './screens/Home';

const AppNavigator = StackNavigator({
  SettingScreen: { screen: Settings },
  HomeScreen: { screen: Home }
});

export default class App extends Component<Props> {

    render() {
    return (
        <AppNavigator />
    );
  }
}

Setting.js

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

export class Settings extends Component {
  render() {
    return (
      <View>
        <Text>This is the Settings screen</Text>
        <Button onPress={() => this.props.navigation.navigate('HomeScreen')} title="Home"/>
      </View>
    )
  }
};

export default Settings;

Home.js

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

export class Home extends Component {
  render() {
    return (
      <View>
        <Text>This is the home screen</Text>
      </View>
    )
  }
}

export default Home

Answer 1

1. Update your App.js to the below.

   const App = createStackNavigator({ Home: HomeScreen, Profile: ProfileScreen, });

   export default createAppContainer(App);

2. Remove the line export default Settings;

3. Remove the line export default Home;

Answer 2

Please, Try with the below changes.

import { createStackNavigator } from "react-navigation";

const AppNavigator = createStackNavigator(
 {
    SettingScreen: { screen: Settings },
    HomeScreen: { screen: Home }
  }
)

Answer 3

Please try the updated function like below.

const App = createStackNavigator({
Home: {screen: HomeScreen},
Profile: {screen: ProfileScreen},
});