React Native JSX export import identifier

Question

I encounter a strange issue when I export a const to another js file. Here is my issue:

Imagine I have two files named index.js and router.js.

// in router.js
export const stackNav = StackNavigator({
Home: {
    screen: Me,
    navigationOptions: {
        title: 'Welcome'
    }
}
});


// in index.js
import { stackNav } from './router';

class MainApp extends Component {
    render() {
        return (
            <stackNav />
       );
    }
}

export default MainApp;

When I use the above code to run, I fail to run my app and it shows error message with red screen: Expected a component class, got [object Object].

However, if I change all stackNav to StackNav, I can run my app successfully. So, I don't know why the case of the name/identifier matters?

This will answer your question [https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters](https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters) — Neel Gala, May 29 '17 at 07:08
@NeelGala your comment is the correct answer to my question and my question is duplicated of the thread your provided. — bufferoverflow76, May 30 '17 at 10:44

score 1 · Accepted Answer · answered May 29 '17 at 08:33

1

Because React/ReactNative component name must begin with capital letters

answered May 29 '17 at 08:33

Kawatare267

4,168
3
16
16

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Referring to Offical doc,

User-Defined Components Must Be Capitalized

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement.

Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

The following are the code snippet from the doc.

import React from 'react';

// Wrong! This is a component and should have been capitalized:
function hello(props) {
// Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
  return <hello toWhat="World" />;
}

React Native JSX export import identifier

2 Answers2