3

I would like to store static *.txt, *.svg, and even *.js files in a React Native project (clean, without any Expo and other wrappers, Webpacks, using Babel only) in assets folder (or other commonly preferred path). Then I would like to import them into the App.js as strings. There is so much contradictory info on the topic. How do I properly do that in a brand new app?

Alexander Shutau
  • 2,660
  • 22
  • 32
  • I guess if your asset is being accessed by different locations in your code ... then the best location is the `assets` folder ... if it's only related to a specific piece of code ... then you could place it in the same folder of that js file (your component folder for example) ... – Hend El-Sahli Mar 30 '19 at 11:53
  • @HendEl-Sahli But how do I import it? My current solution is to place file content into JSON file looking like `{ "value": "..." }` and then doing `import {value} from './assets/file.json'`. I expect to do something like `const value = ReactNative.loadResource('./assets/file.json', {encoding: 'utf8'})`. – Alexander Shutau Mar 30 '19 at 12:19
  • let me reply in an answer to be more readable... – Hend El-Sahli Mar 30 '19 at 12:27
  • @HendEl-Sahli Of course. – Alexander Shutau Mar 30 '19 at 12:31

2 Answers2

0

If you have a json file like:

const data = {
  key1: 'value1',
  key2: 'value2',
};

export default data;

The only way to access your data is through:

import data from '../your/relative/path/to/data';

If you want to import specific key in that file, then your json file would be somthing like that:

export const key1 = 'value1';
export const key2 = 'value2';

const data = {
    key1,
    key2,
};

export default data;

Now you'd have the ability to do that:

import { key1 } from '../your/relative/path/to/data';

OR

import data from '../your/relative/path/to/data';

I suggest for text files, you store them in a constants folder, and make a a relevant .js file for each category:

constants.js file:

export const CONST_KEY_1 = 'some value';
export const CONST_KEY_2 = 'some other value';
export default {
    CONST_KEY_1,
    CONST_KEY_2
};

And for svg file:

Fast approach: to store the file_uri of each file in a key value pair in the same way we did in the constants.js file

Better approach: to store svg path of these svg files in the same form we did in the constants.js file ... and render these files using react-native-svg npm module.

Hend El-Sahli
  • 6,268
  • 2
  • 25
  • 42
  • 2
    But I would like to store static *.txt, *.svg, and even *.js files and use them as string values. – Alexander Shutau Mar 30 '19 at 12:44
  • and you know the content of these files in advance ? ... I mean at compile time not the run-time – Hend El-Sahli Mar 30 '19 at 12:48
  • 1
    Yes, these are static files. – Alexander Shutau Mar 30 '19 at 14:01
  • Thank you for the suggestion. To follow your advice I think I will have to generate JS files inserting text content and making escaping of some symbols, JSON.stringify should do it. I will accept your answer if there will be no other solutions. – Alexander Shutau Mar 30 '19 at 15:34
  • That's what I usually do ... and keep in mind that in order to load any file using `require` for example ... you're going to need a `string literal for each file uri`, so I guess listing your `uris` in a constants file would make sens ... and you're welcome after all whether my suggestion suits your case or not... – Hend El-Sahli Mar 30 '19 at 15:43
0

Also, you can try Babel Plugin Inline Import which is designed to do exactly this. Just be aware of issues with the babel cache keeping old versions of your text files around, if you make changes to them.

Jared Updike
  • 7,165
  • 8
  • 46
  • 72