How to call a function to main App file? React Native

Question

I have just started learning React Native. I am trying to insert bottom menu tabs on my first app.

I am using this code on Tabs.js (this is just the export part):

export default function Tabs() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

Unfortunately, I don't know how to call it to my main App file (this is just one of my attempts):

import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';

Tabs();

I've read about exporting default function, but I don't understand how to use it in my main App file. I'm sure that this is a syntax issue.

Also, I am planning to add a background colour to all tabs. Any advice?

Thank you.

UPDATE:

This is my Tabs file.

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';

const Tabs = () => {
function Feed() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text></Text>
    </View>
  );
}

function Profile() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text></Text>
    </View>
  );
}

function MainPage() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text></Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      tabBarOptions={{
        activeTintColor: '#e91e63',
      }}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: '',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="MainPage"
        component={MainPage}
        options={{
          tabBarLabel: '',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="pill" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: '',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="format-list-text" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}
export default Tabs

This is my main App file.

import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';

const App=()=>{
 return <Tabs />
}

You should write `` in render function of `App` component in `return`. See https://reactjs.org/docs/components-and-props.html#rendering-a-component — Ajeet Shah, Mar 29 '21 at 12:19
Thank you for the info. I have updated my code as suggested. I'm still missing something. — Thomas, Mar 29 '21 at 13:21
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Keep in mind, I'm very new at this, so I might be missing something very obvious. Sorry about that. — Thomas, Mar 29 '21 at 13:28
You need to export the `App` component as well to be able to import it somewhere and use it, So, you need `const App = () => { return }; export default App;` — Ajeet Shah, Mar 29 '21 at 13:34
Thank you! It works. Not sure how to upvote this answer, but this was helpful. — Thomas, Mar 29 '21 at 13:40

score 1 · Answer 1 · answered Mar 29 '21 at 17:46

Make sure to export the App as default. You most probably have a file called index.js in the root folder and that is importing your App component.

Your App.js file should look like this:

import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';

export default const App=()=>{
 return <Tabs />
}

And then your index.js file looks like this:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

You don't necessarily have to export as default, because you can only have one default export. If you export App as default you import it like this: import App from './App'; and if you export without a default, you have to import like this: import {App} from './App'

And to get an advice how to add background color to the tabs, check here: How to set the background color of Tab.Navigator?

سعيد · Answer 2 · 2021-03-29T12:35:23.933

0

you basically call it like would call a component

btw your Tabs should export like this

const Tabs=()=>{
  /...
}

export default Tabs

const App=()=>{
 return <Tabs />    

}

edited Mar 29 '21 at 12:35

answered Mar 29 '21 at 12:25

سعيد

1,547
1
14
32

Thank you for your answer. However, I'm getting an error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. – Thomas Mar 29 '21 at 12:33
check my updated answer , whenever you're getting this error ``` Error: Element type is invalid: expected a string (for built-in components) or a class/functio``` it means you are not exporting the component properly – سعيد Mar 29 '21 at 12:36
Thank you for the update. I have updated all my Tabs code: const Tabs=()=>{ code + return} and added export default Tabs. This code alone works fine; however, when I try to call it (const App=()=>{return }) in my main App file, it shows me the same error. I'm missing something. – Thomas Mar 29 '21 at 12:49

How to call a function to main App file? React Native

2 Answers2