Local require() paths for React-Native

react native absolute path
react native dynamic require
react-native file path
react native image local file path
react native import from parent directory
node_path react native
image source=(require react native)
react native import package json

I am looking for a convenient way to access files in the root of my application while avoiding require() strings that look like:

require('../../../../myModule')

There are some good solutions out there for Node (https://gist.github.com/branneman/8048520) but I haven't seen a way to use global variables in React Native.

Does anyone have a clean solution to this problem?

From Marc Shilling's answer on https://github.com/facebook/react-native/issues/3099

You can use an absolute path on imports/requires:

import {ProximaNovaText} from 'MyApp/src/components'; require('MyApp/src/utils/moment-twitter');

where 'MyApp' is whatever name you registered in your index.ios.js file

Note for VS Code: This works, but be warned that you might lose intellisense and cmd/ctrl + click. Thanks Johan for the info about CS code

How to Use Absolute Paths in React Native - David Woody, What sucks about this is literally all import statements (or require calls, if you're still into that) would start with “AwesomeApp/app/”, which is a lot to  Right now I'm using browserify to bundle my js files marking react-native as external, and use the aliasify module for path aliases. As a second step I pass my bundle to the packager. The only other solution I've found so far is having your modules in the node_modules directory (maybe with links).

[English] React Native, js”. Sign “../” indicates we will go back to previous directory, just call the file. So the Relative Path is very dependent on the folder  In your React Native project, chances are you keep your code in a single folder, such as “app”. If you have a directory named “app” this is what an absolute path might look like: What

Put code below on top of your myModule file:

/**
 * @providesModule myModule
 */

Then you can use require('myModule') in any other files.

facebook/react-native, Forcing us to use relative paths in all our import/require statements is not ideal. brentvatne changed the title Implement require() properly [Packager] const defaultConfig = require('react-native/local-cli/default.config.js');  Hi, Is this a bug report? yes. Actual Behavior I'm getting "require() must have a single string literal argument" when I'm trying to require a local image. Here is what I do : I'm retrieving the image path as a string from Firebase datab

Complementing @Tiagojdferreira

You can use his solution with babel-plugin-module-resolver library.

Install with:

npm install --save-dev babel-plugin-module-resolver

Configure .babelrc adding plugins property like this:

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "alias": {
        "@src": "MyApp/src",
        "@otherAlias": "MyApp/src/other/path",
      }
    }]
  ]
}

Usage:

require('@src/utils/moment-twitter');

Hope this helps!

Require file dynamically by variable · Issue #6391 · facebook/react , is any way to require file with dynamic string path or require all files in dir I suspect React Native will support import() in a static way that is useful for lazily  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.

You can use global variables in react native, same as node, properties defined on global are accessible globally.

e.g.

global.foo = "blah";
console.log(foo); //logs "blah"

Most of the node solutions in the gist above should work correctly.

One I've used in the past is defining a global function at the top directory level, usually on the first line like

global.rootRequire = function(path) { return require(path); }

Which simply allows deeply nested requires to be from the root, and avoids all of the ../../ business.

However the other comment is true, if this is really an issue, there is probably something structurally deficient with the project.

react-native-fs, Native filesystem access for react-native. var RNFS = require('react-native-fs'); toFile: string; // Local filesystem path to save the file to Check if the the download job with this ID is resumable with resumeDownload() . The require on line 19 works because you've basically hardcoded require to search node_modules/ where react-native exists. The require on line 26 forces you to put a ./ on the beginning of the path, and it works, but not ideally as I said.

React and React Native Directories Management, But the problem is that the directory path is relative, not absolute. The React Native documentation tells you that you can use 'require()' for  React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this: < Image source = {require ('./my-icon.png')} /> The image name is resolved the same way JS modules are resolved.

React Native Tips and Tricks 2.0: Managing Static Assets with , React Native Packager ships with some niceties for managing static images having local assets required in via relative paths becomes a bit of a chore to img/menu-icon.png'), profileIcon: require('/img/profile-icon.png'),  A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. React Native 0.62

How to get Absolute path of a file in react-native?, How do I get the file path in react native? Deploying React Native to Bitrise, Fabric, CircleCI; Position element at the bottom of the screen using Flexbox in React Native; Setting up ESLint and EditorConfig in React Native projects; Firebase SDK with Firestore for React Native apps in 2018; If you like this post, consider visiting my other articles and apps?

Comments
  • I'd suggest reading the comments on that gist. The fact that you're doing this kind of thing often indicates a smell in your code structure.
  • Could you give some more information, such as version of React Native, how to reproduce your bug, etc.; or create a small github repo that reproduces the bug ?
  • Latest version. I would, but I already put much time to report lot's of bugs in React Native, many of which were simply closed and forwarded to product pains where they wait to die alone.
  • This works, but be warned that you might lose intellisense and cmd/ctrl + click (in VSCode anyway).
  • This works, but be warned that you might lose intellisense and cmd/ctrl + click (in VSCode anyway).
  • OP should have mentioned this uses Facebook's internal API and it could change or be discontinued at any time. See github.com/facebook/fbjs
  • "The platform doesn't support some absolutely basic functionality like defining import paths, therefore your code is wrong". Facepalm.