CODEWITHSUNDEEP
javascriptreactjsreact-nativeimport
Charas
Charas

Reputation: 1817

React Native importing function from another file

I am wondering if I import a function from another file, am I also importing all the files that is imported in the file of the function? For example:

auth.js

import React from 'react';
import { AsyncStorage, View, Text, ScrollView, ... } from 'react-native';
import ModuleA from './modules/ModuleA';
import ModuleB from './modules/ModuleB';
import Module99 from './modules/Module99;

export const function1 = () => {
    {/* some function using ModuleA */}
}

export const function2 = (param) => {
    if(something)
        {/* some function using Module99 */}
    else
        {/* some function using ModuleB */}
}

Screen.js

import React from 'react';
import { function2 } from '../auth';

export default class Screen extends React.Component {
    {/* use function2 in some function or render */
}

My question is, when I import function2 from auth.js, am I importing all the modules and other files that is imported in auth.js? Or am I just importing the module that will be used by function2.

Also, function2 will use different module depending on the param, by calling function2 from my Screen, will my Screen also import all modules, or just Module99 and moduleB, or just the specific module inside the if else statement?

I have read a lot of the documentations on how importing works in react native but still couldn't really understand the flow. Thank you for all answers.

Upvotes: 3

Views: 20746

Answers (1)

Shivam
Shivam

Reputation: 3131

By doing this import function2 from '../auth'; you are importing nothing as its not default export. Also no modules will automatically be imported in screen.js. You will have to import explicitly the modules(ModuleA, ModuleB ets) if you also need to use in screen.js

If you want to use function2 in screen.js the you need to import it like this

import { function2 } from '../auth';

You can also use import * as fromAuth from '../auth'; to import all

Usage: fromAuth.function2()

Import without curly braces {} is used for importing defaults.(which has been exported using default keyword)

There are 4 types of exports:

  • Named exports (several per module)
  • Default exports (one per module)
  • Mixed named & default exports
  • Cyclical Dependencies

Here are some Import examples from MDN

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";

Find more details here

Upvotes: 11

Related Questions