CODEWITHSUNDEEP
javascriptreact-nativeexpostylesreact-native-flatlist
Anas Ikhlas
Anas Ikhlas

Reputation: 117

React native FlatList render/display text on the same line

I am rendering a list of text in react native using FlatList and I am facing a problem, I can't render/display text on the same line, I want to display text in the form of a paragraph. By default, FlatList renders every item on a new line.

Code

<FlatList
   data={list}
   renderItem={({ item }) => (
       <Text style={styles.textStyle}>{item.text}</Text>
    )}
/>

Output:
This is Text 1
This is Text 2
This is Text 3
This is Text 4

Expected Output
This is Text 1 This is Text 2 This is Text 3 This is Text 4

Solutions I have tried
I have tried using flex-wrap with FlastList but it's not supported yet.

This problem can be solved by using ScrollView, but my list is really big and it has a lot of performance issues, the text automatically resizes randomly. My original list has text in Arabic.

I have also tried horizontal={true} and numColumns={2} but it adds white space between the paragraphs.

Example
This is Text 1 * white-space * This is
Text 2 This is * white-space * Text 3

Please let me know if it is possible to render text in this way using FlatList.

Thanks in advance :)

Upvotes: 1

Views: 1151

Answers (1)

wassim AJ
wassim AJ

Reputation: 458

That is what you want:

 <FlatList
   data={list}
   renderItem={({item}) => <Text style={styles.textStyle}>{item.text}</Text>}
   horizontal={true}
   ItemSeparatorComponent={() => <Text> </Text>}
  />

When you add the numColumns={2}, it means that you want it to be separated into two columns, so instead I added ItemSeparatorComponent. How does it work?

It renders a component between each item from the data you're using. In this case, I added a component that contains a single space in order to separate them.

Upvotes: 2

Related Questions