Importing Text from local json file in React native

Question

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>

Damathryx · Accepted Answer · 2016-06-07 06:29:12Z

15

You can use:

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

then you can treat it as a javascript object:

file.description

answered Jun 7, 2016 at 6:29

Damathryx

2,8383 gold badges27 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anil Chahal Over a year ago

Thank you so much. That's exactly what I am looking for.

Rajat.r2 Over a year ago

I did the same but in my case the object running 3 times in console. ?

Samuli Hakoniemi · Accepted Answer · 2015-10-12 18:41:49Z

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
    });
  });
}

edited Oct 12, 2015 at 18:41

answered Oct 12, 2015 at 18:05

Samuli Hakoniemi

19.1k1 gold badge63 silver badges79 bronze badges

Comments

Tom · Accepted Answer · 2016-02-17 03:57:14Z

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;
}

answered Feb 17, 2016 at 3:57

Tom

9,2087 gold badges56 silver badges85 bronze badges

Collectives™ on Stack Overflow

Importing Text from local json file in React native

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related