Components overriding eachother/Component organization in React

Question

So I'm wondering how organization and importing (require) of components is supposed to work in React Native. I have built a small app with one main TabView component in one file, and then have another file that contains the components that go under each tab. In order to bring all those into the main file, i have a whole bunch of import statements ie:

    var Following = require('./viewComponents.ios');
    var Trending = require('./viewComponents.ios');
    var CommentButton = require('./viewComponents.ios');
    var NotificationPage = require('./viewComponents.ios');
    var LikeButton = require('./viewComponents.ios');
    var WishLists = require('./viewComponents.ios');
    var PageForProfile = require('./viewComponents.ios');

I'm having an issue where some of my components seem to be writing over each-other, and i think it is this method of importing that is doing it. For example: my PageForProfile component is:

 class PageForProfile extends Component{
        render(){
        return(
            <Text>Hello</Text>
        )
    }
    } 

But when I write a tag to display this component:

<PageForProfile></PageForProfile>

Instead of outputting text, my "Following" component is displayed in place of the "PageForProfile" component! I've gone through as much of the React literature as I can and am still at a loss. Any help would be MOST appreciated. Cheers. (p.s. new to StackOverflow - if i've broken etiquette in the way i'm asking let me know, really appreciate your community here.)

Answer 1

You have not posted your viewComponents.ios structure, but it's definitely wrong what you are doing. requiring the same file will always return the same object: the one that is defined in module.exports (see What is the purpose of Node.js module.exports and how do you use it?)

You have two options:

1. have your components defined in different files (following.ios, trending.ios etc.) and require different file for different component.
2. define all of the components in one file and have module.exports to return all the components as properties of object returned by module.exports (that's what React does when importing Text, View etc. ). in this case your require will look a bit differently:

{
    Following,
    Trending, 
    ....
} = require('viewComponents.ios');