React Native Invariant Violation: View config

Question

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

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',   }, }); 

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 please thanks.

Answer 1

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