0

How we can know flatlist visibility height on the screen, so then I'll be able to set the height to its children?

James Z
  • 12,209
  • 10
  • 24
  • 44
Muhammad Rafeh Atique
  • 722
  • 5
  • 22
  • You can use the https://reactnative.dev/docs/view#onlayout prop to get the width and height. https://stackoverflow.com/questions/30203154/get-size-of-a-view-in-react-native (Don't mind the View doc, FlatList inherits ScrollView props that inherits View props https://reactnative.dev/docs/flatlist#scrollview-props) – Ugur Eren Jul 17 '21 at 04:09

1 Answers1

0

For the mean time you can try to set a background color and when you fixed your height size you can remove the background afterwards... If that didnt helped try this:

You can use the https://reactnative.dev/docs/view#onlayout prop to get the width and height. https://stackoverflow.com/questions/30203154/get-size-of-a-view-in-react-native… (Don't mind the View doc, FlatList inherits ScrollView props that inherits View props https://reactnative.dev/docs/flatlist#scrollview-props)

Credits to the comment :) Cheers!

If it doesnt work try putting flex: 1 on the container and give the children flexGrow: 1...

Another options is:

You can listen to onLayout of the Flatlist, hold the calculated height in a state, and then set each child's height to flatlist height / data.length.

  • I want to give height to flatlist children so, it will take time to set height to it's children, Is their something else to do it?? – Muhammad Rafeh Atique Jul 17 '21 at 05:27
  • i dont quite get what your trying to do... if you want to set height to your children just dont put height it will automatically give height to its children but if you want to put height small or bigger just do it manually, sorry :( but i do have another thing.. i edited my post –  Jul 17 '21 at 05:29
  • I am rendering videos in flatlist, and video component take height prop, so I want to set video height that will visible to screen and ofcaurse video component is in flatlist so that's why I want flatlist height so I can pass it to video component's prop... – Muhammad Rafeh Atique Jul 17 '21 at 05:33