An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Alias in React Native
Creating Alias in React Native:
Is there anything more frustrating to find this path ../../../../../components/location in Javascript?
What if we can use /components/location from any where in the code base?
Enter the Alias
So we are writing alias in .babelrc and we use a babel plugin to get aliasing set up, since we cant use webpack in react native.
Initially, we want to install babel-plugin-module-resolver with yarn
or npm
.
$ npm install babel-plugin-module-resolver
Once weve installed, open up the projects and find .babelrc file, If there is no .babelrc file then create the file .babelrc in root. Under the plugins key, add the below snippet:-
{ "presets": ["react-native"], "plugins": [ [ "module-resolver", { "root": [ "./src" ], "alias": { "src": "./src", "assets": "./src/assets" } } ] ]}
Now we can use src/pages/homepage instead of using complex relative paths like ../../../src/pages/homepage
Now, clear the cache and restart the node server by following steps:
$ npm start --reset-cache$ npm run ios
Thanks for reading this article
I hope you would find the article useful. Feel free to ping me in comment section or @suprabha11
Original Link: https://dev.to/suprabhasupi/alias-in-react-native-1oej
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To