CODEWITHSUNDEEP
react-native
BigPun86
BigPun86

Reputation: 2686

Importing Text from local json file in React native

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>

Upvotes: 7

Views: 16022

Answers (3)

Damathryx
Damathryx

Reputation: 2828

You can use:

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

then you can treat it as a javascript object:

file.description

Upvotes: 15

Tom
Tom

Reputation: 9127

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

Upvotes: 1

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

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

Upvotes: 5

Related Questions