React Native Invariant Violation: View config

I'm trying to practice with different screens on a React Native project. Here's my code from App.js file.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: "welcome",
    };
    render() {
        return <Text style={{ color: 'black '}}>Hello, Navigation!</Text>;
    }
}

const navigation = StackNavigator({
    Home: { screen: HomeScreen },

});

export default class App extends Component<{}> {
  render() {
    return <navigation/>;
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

When i run react-native run-android I get an Invariant Violation which tells me "to view config not found or name navigation". And then all the sites where this violation happens. Help pls thanks

The name of any component must be capitalized. In your name, the component "navigation" is not capitalized. It should be "Navigation".

In react native the component's name should begin with capital letter, so it will be:

const Navigation = StackNavigator({
    Home: { screen: HomeScreen },

});

and call it with capital:

export default class App extends Component<{}> {
  render() {
    return <Navigation/>;
  }
}