Styjun

Valid Badminton Score?

What can we do to stop prior company from asking us questions?

How did Arya survive the stabbing?

Opposite of a diet

CREATE opcode: what does it really do?

Increase performance creating Mandelbrot set in python

Is expanding the research of a group into machine learning as a PhD student risky?

Overloading istream>> to read comma-separated input

What are the ramifications of creating a homebrew world without an Astral Plane?

How do scammers retract money, while you can’t?

Is `x >> pure y` equivalent to `liftM (const y) x`

Avoiding estate tax by giving multiple gifts

How to be diplomatic in refusing to write code that breaches the privacy of our users

when is out of tune ok?

What is the difference between "behavior" and "behaviour"?

Why didn't Theresa May consult with Parliament before negotiating a deal with the EU?

How to check is there any negative term in a large list?

Nautlius: add mouse right-click action to compute MD5 sum

Is this version of a gravity generator feasible?

Was the picture area of a CRT a parallelogram (instead of a true rectangle)?

How to pronounce the slash sign

Integer addition + constant, is it a group?

How do I go from 300 unfinished/half written blog posts, to published posts?

How to Reset Passwords on Multiple Websites Easily?

React Native FlatList Warning

React-native: how to wrap FlatList itemsWhat is the difference between React Native and React?How to improve FlatList render performance for large list with ReactNative 0.43?React FlatList renderItemReact-native: how to wrap FlatList itemsHow to render large list in react native?React Native FlatList Not Re-Rendering after Asyncronous operationReact Native FlatList: renderItem() goes character-by-character on JSON ArrayReact-Native Flat List columns number depending on screen orientationReact Native FlatList cuts Text at the bottomperformance issues with React-Native flatlist with 100+ list items

3

Im trying to implement a FlatList with dynamic item sizes, to be more specific, my items sometimes take the full screen width and sometimes only half of it, thus setting numColumns=2 isn't working, my workaround looks like this:

 <FlatList
 ListHeaderComponent=this.header
 keyExtractor=item => item.id.toString()
 data=data
 contentContainerStyle= flexDirection: 'row' 
 renderItem=( item ) => <Item item=item />
 />

everything is working as expected, the width of an item is applied via item.width. However the issue is that every time it's rendering the list, im getting this log warning:

Warning: `flexWrap: `wrap`` is not supported with the `VirtualizedList` components.Consider using `numColumns` with `FlatList` instead.

Does anybody know how this is affecting the performance of the list and if it has an affect, how I can improve my code ?

This is how I would like it to look like:

react-native scrollview react-native-flatlist

share|improve this question

edited Mar 21 at 17:13

Kape

asked Mar 21 at 15:51

KapeKape

385

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Here
  
  – Vencovsky
  Mar 21 at 16:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This is not working
  
  – Kape
  Mar 21 at 17:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can you please share your code on expo snack?
  
  – Paras Korat
  Mar 22 at 5:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes I made a replica with all the unnecessary stuff removed: snack.expo.io/SJxjkMLM_4
  
  – Kape
  Mar 22 at 12:18
  

  
  
  
  

add a comment | 

3

Im trying to implement a FlatList with dynamic item sizes, to be more specific, my items sometimes take the full screen width and sometimes only half of it, thus setting numColumns=2 isn't working, my workaround looks like this:

 <FlatList
 ListHeaderComponent=this.header
 keyExtractor=item => item.id.toString()
 data=data
 contentContainerStyle= flexDirection: 'row' 
 renderItem=( item ) => <Item item=item />
 />

everything is working as expected, the width of an item is applied via item.width. However the issue is that every time it's rendering the list, im getting this log warning:

Warning: `flexWrap: `wrap`` is not supported with the `VirtualizedList` components.Consider using `numColumns` with `FlatList` instead.

Does anybody know how this is affecting the performance of the list and if it has an affect, how I can improve my code ?

This is how I would like it to look like:

react-native scrollview react-native-flatlist

share|improve this question

edited Mar 21 at 17:13

Kape

asked Mar 21 at 15:51

KapeKape

385

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Here
  
  – Vencovsky
  Mar 21 at 16:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This is not working
  
  – Kape
  Mar 21 at 17:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can you please share your code on expo snack?
  
  – Paras Korat
  Mar 22 at 5:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes I made a replica with all the unnecessary stuff removed: snack.expo.io/SJxjkMLM_4
  
  – Kape
  Mar 22 at 12:18
  

  
  
  
  

add a comment | 

Im trying to implement a FlatList with dynamic item sizes, to be more specific, my items sometimes take the full screen width and sometimes only half of it, thus setting numColumns=2 isn't working, my workaround looks like this:

 <FlatList
 ListHeaderComponent=this.header
 keyExtractor=item => item.id.toString()
 data=data
 contentContainerStyle= flexDirection: 'row' 
 renderItem=( item ) => <Item item=item />
 />

everything is working as expected, the width of an item is applied via item.width. However the issue is that every time it's rendering the list, im getting this log warning:

Warning: `flexWrap: `wrap`` is not supported with the `VirtualizedList` components.Consider using `numColumns` with `FlatList` instead.

Does anybody know how this is affecting the performance of the list and if it has an affect, how I can improve my code ?

This is how I would like it to look like:

react-native scrollview react-native-flatlist

share|improve this question

edited Mar 21 at 17:13

Kape

asked Mar 21 at 15:51

KapeKape

385

 <FlatList
 ListHeaderComponent=this.header
 keyExtractor=item => item.id.toString()
 data=data
 contentContainerStyle= flexDirection: 'row' 
 renderItem=( item ) => <Item item=item />
 />

Warning: `flexWrap: `wrap`` is not supported with the `VirtualizedList` components.Consider using `numColumns` with `FlatList` instead.

share|improve this question

edited Mar 21 at 17:13

Kape

asked Mar 21 at 15:51

KapeKape

385

share|improve this question

edited Mar 21 at 17:13

Kape

asked Mar 21 at 15:51

KapeKape

385

asked Mar 21 at 15:51

KapeKape

385

asked Mar 21 at 15:51

KapeKape

385

1 Answer
1

active

oldest

votes

0

to fix numColumns=2 you have to set with it horizontal=false
so it becomes

 <FlatList
 ListHeaderComponent=this.header
 keyExtractor=item => item.id.toString()
 data=data
 horizontal=false
 numColumns=2 
 contentContainerStyle= flexDirection: 'row' 
 renderItem=( item ) => <Item item=item />
 />

share|improve this answer

answered Mar 21 at 16:43

Asma_KhAsma_Kh

368

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  When using numColums it renders Items outside of the screen, it allways placing 2 items next to each other however I would like to have items that take the full screen width
  
  – Kape
  Mar 21 at 17:08
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55284361%2freact-native-flatlist-warning%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

to fix numColumns=2 you have to set with it horizontal=false
so it becomes

 <FlatList
 ListHeaderComponent=this.header
 keyExtractor=item => item.id.toString()
 data=data
 horizontal=false
 numColumns=2 
 contentContainerStyle= flexDirection: 'row' 
 renderItem=( item ) => <Item item=item />
 />

share|improve this answer

answered Mar 21 at 16:43

Asma_KhAsma_Kh

368

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  When using numColums it renders Items outside of the screen, it allways placing 2 items next to each other however I would like to have items that take the full screen width
  
  – Kape
  Mar 21 at 17:08
  

  
  
  
  

add a comment | 

0

to fix numColumns=2 you have to set with it horizontal=false
so it becomes

 <FlatList
 ListHeaderComponent=this.header
 keyExtractor=item => item.id.toString()
 data=data
 horizontal=false
 numColumns=2 
 contentContainerStyle= flexDirection: 'row' 
 renderItem=( item ) => <Item item=item />
 />

share|improve this answer

answered Mar 21 at 16:43

Asma_KhAsma_Kh

368

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  When using numColums it renders Items outside of the screen, it allways placing 2 items next to each other however I would like to have items that take the full screen width
  
  – Kape
  Mar 21 at 17:08
  

  
  
  
  

add a comment | 

to fix numColumns=2 you have to set with it horizontal=false
so it becomes

 <FlatList
 ListHeaderComponent=this.header
 keyExtractor=item => item.id.toString()
 data=data
 horizontal=false
 numColumns=2 
 contentContainerStyle= flexDirection: 'row' 
 renderItem=( item ) => <Item item=item />
 />

share|improve this answer

answered Mar 21 at 16:43

Asma_KhAsma_Kh

368

 <FlatList
 ListHeaderComponent=this.header
 keyExtractor=item => item.id.toString()
 data=data
 horizontal=false
 numColumns=2 
 contentContainerStyle= flexDirection: 'row' 
 renderItem=( item ) => <Item item=item />
 />

share|improve this answer

answered Mar 21 at 16:43

Asma_KhAsma_Kh

368

answered Mar 21 at 16:43

Asma_KhAsma_Kh

368

answered Mar 21 at 16:43

Asma_KhAsma_Kh

368