Another error that taught an important rule Reactjs requires. I have imported a react native drawer component beginning with a lower case letter and rendered the component but react-native throwed the following error.
Invariant Violation: View config not found for name menuDrawer
The problem was with “menuDrawer”, which should be “MenuDrawer” for react to render this user-defined component.
In short, the first letter of a JSX tag determines how that element will be compiled by React.
If first letter is capitalized, element type is considered as a user-defined react component.
/*WRONG - React considers "menuDrawer" as an HTML tag*/ render() { return <menuDrawer />; } /*RIGHT - React considers "MenuDrawer" as a user-defined component*/ render() { return <menuDrawer />; }
If it is a lower-case tag, then it refers to common built-in HTML elements like <div>, <span>, <img>..
Behind the scenes, react library turn a tag declaration into “React.createElement” function call.
//React expect this component to be a built-in element like 'div', 'span'. <menuDrawer /> //-->React.createElement ("menuDrawer") //React expect this element to be custom component <MenuDrawer /> //-->React.createElement ("MenuDrawer") //React expect this element to be custom component <menuDrawer.menu /> //-->React.createElement ("menuDrawer.menu")
As you see in the above example, 3rd line is also considered as a custom component, although it begins with a lower-case letter. Here comes another react rule to keep in mind; a lower case tagged component with a dot notation is accepted as a react component.