How do I dynamically create text in React Native using an array as the text source?

Question

I would like to create 8 lines of text based on a pre-made array of text. For example

const someInfo = ["Mobile Phones", "Restaurants", "Tv Channels", "Music", "Health", "Wifi", "Real Estate", "Meetups"];

from there just a simple

export default class User extends Component{
    render(){
        return(
            <View style={styles.mainBoxes}>
                <Text style={styles.mainBoxesText}>{textfromArrayHere}
                </Text>
            </View>

        );
    }
}

how would I go about looping through that array and dynamically insert the text?

Answer 1

consider your array is someInfo, do it the simple way:

<View style={styles.mainBoxes}>
  {someInfo.map(info => <Text>{info}</Text>)}
</View>

Remember: I just give example => You put your own way for styling

Cooler way => using official FlatList with renderItem props also the info => <Text>{info}</Text): https://facebook.github.io/react-native/docs/flatlist.html

Answer 2

Add the below line of code inside your tag. Remember map works very easily on array of objects or even simple arrays.

{someInfo.map(info) => {{info}}}

Hope this helps

Answer 3

I know exactly what you need. Basically you do not want to add the text within the line codes of the messy pages and logics. You rather have a "database" or a page where you can find everything organized for you. Where you can easily change the text and save this page and it will find its way within the app and change it self.

You have to use an OBJECT or an ARRAY and call from it.

First of all, create an page and call it (for example: DynamicText.js)

Add your data in similar fashion:-

If you want to use an ARRAY .. do the following :-

export const someInfo = [
{ 
"Text": "Mobile Phones" // This is what we want to PUSH ! 
},
{ 
"Text": "All copy rights reserved"
},
{ 
"Text": "Mobile Phones"
},
];

Then, go to your screens, where you want to have this dynamic pages added.

Then import the code on top

import someInfo from '../data/DynamicText';

and finally this is how you render a text or calling a text from an array without too much hastle.

{someInfo[0].text}

So just basically through it inside the exactly like that.

Thats it ! the number [0] goes in order.

To use it in your code:-

export default class User extends Component{
    render(){
        return(
            <View style={styles.mainBoxes}>
                <Text style={styles.mainBoxesText}>{someInfo[0].text}
                </Text>
            </View>

        );
    }
}

The better method is by using an OBJECT, since it is all about "TEXT" !

To make an object you basically do the following:-

export const someInfo = {
      heading: " This is the heading Text", 
      subtitle: "This is the subtitle Text", 
      comment: "the pizza is delicious" 
    },

and to use in code is quite simple.

{someInfo.heading}

Heppy Coding !