[English] React Native — Import with Absolute Path

Import with Relative Path

Want to read this tutorial in Indonesian?

Working on an application project with programming language that requires an Import action manually sometimes makes it complicated and error in calling a class or function that has been created to be called when it needs it.

Example image above is the use of Import with Relative Path. You already know the difference Relative Path with Absolute Path? If not, let’s see. We learned together.

Difference

Relative Path is the condition we call a file but follow the conditions we are now on in which file to do Import. Our example is in a src folder whereas we want to call a file outside the src folder. Then we need to call him “../filename.js”. Sign “../” indicates we will go back to previous directory, just call the file. So the Relative Path is very dependent on the folder structure that we created.

Absolute Path is condition we call a file but always call it from home directory. Suppose like the example above, we will call the file in src folder then we just call from the home directory “home/filename.js”. So it does not depend on the folder structure and it is very easy to move the file that has happened import calling therein, so no need to change the file path again. Unlike the Relative Path, it is necessary to change the file path when the location of the file is moved.

In React Native, we can use Absolute Path. Initially I still use the Relative Path. Since finding the shortcomings and hassle of managing projects that are large in scale. I try to explore how to solve the problem of import file path. Apparently the solution is Absolute Path.

Case Study

If we use Relative Path on React Native, we can directly call the file without any configuration. So it can be done as usual in general.

But for Absolute Path, I found out how to implement using package.json. Let’s try it.

In the package.json file have property name, we can change as desired

{
  "name": "app",
  ...
}

So that property name will be the home directory that we will use. Suppose we have a folder structure like this.

android
src
---components
------Button.js
---screens
------Login.js
ios
node_modules
package.json
index.js
App.js

In src/screens/Login.js file we want do Import file src/components/Button.js then if we do with Relative Path, would be like this

Import Button from '../components/Button.js';

But we do with Absolute Path

Import Button from 'app/src/components/Button.js';

The advantages and disadvantages I have explained in the Difference section. Definitely better to use Absolute Path.

References:

• https://github.com/facebook/react-native/issues/3099#issuecomment-221815006
• https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/

That it all and thank you. Hope can be useful :)

Write the topic idea or request topic you are currently learning about React Native. Contribute your idea or request here http://bit.ly/RequestTopicReactNative