7

I am wondering how the common way is to import a huge text to a View. In my case i am developing a React Native App for Android and iOS, and on one of my Views i want to present the "Terms of Use" document. Now when i just import/copy paste it into a Text Component it just can´t be the right solution, especially when i need to use localization to present the needed language. How would i "import" this Text-Block so it is nice formatted and i don´t need to put everything into my View:

 <View style={styles.container}>
      <Text style={styles.text}> |JSON - Text-file, with about 600 words -> Terms of Use document |</Text>
 </View>
BigPun86
  • 2,480
  • 2
  • 25
  • 49

3 Answers3

15

You can use:

import file from './config/TermsAndCondition.json';

then you can treat it as a javascript object:

file.description
Damathryx
  • 2,706
  • 3
  • 25
  • 48
5

I'd to it as JSON, especially if you need to bring some other (meta)data with the text. Where fetch(url) is called on componentWillMount and <Text>{this.state.hugeText}</Text> component is populated:

As a concept:

constructor(props) {
  super(props);
  this.state = {
    hugeText: ''
  };
}

componentWillMount() {
  fetch('myText.json')
  .then((res) => res.json())
  .then((data) => {
    this.setState({
      hugeText: data.something
    });
  });
}
Samuli Hakoniemi
  • 18,740
  • 1
  • 61
  • 74
1

I tried fetch but it didn't work (wasn't able to find the file).

I tried this instead, and it worked:

// at top of file
var jsonData = require('./myfile.json');


// inside component definition
render() {
    let deepProp = jsonData.whatever;
}
Tom
  • 8,509
  • 7
  • 49
  • 78