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?

Sagar Chavada · Accepted Answer · 2018-05-10 05:02:08Z

3

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

edited May 10, 2018 at 5:02

Sagar Chavada

5,2697 gold badges43 silver badges72 bronze badges

answered Jan 8, 2018 at 8:07

Khoa

2,9321 gold badge20 silver badges15 bronze badges

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

1 Comment

VK1 Over a year ago

Thank you for the quick response!

Samar Khan · Accepted Answer · 2018-01-08 11:17:06Z

0

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

answered Jan 8, 2018 at 11:17

Samar Khan

11 bronze badge

Comments

Ahmad Alanazi · Accepted Answer · 2022-03-28 11:26:26Z

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 !

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related