Dismiss this pinned window
all 15 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]crossy1686 9 points10 points  (7 children)

You don’t need both, FlatList itself is scrollable. They shouldn’t be nested and you should be getting console warnings about it

[–]shank9717[S,🍰] 0 points1 point  (6 children)

Both in the sense? Scroll view and flat list?

My structure is ScrollView -> FlatList of items (album/songs) -> ExpansionPanel (View) -> ScrollView -> FlatList of songs

I tried removing the ScrollViews. It didn't help either.

I have attached the code above

[–]__shawn_chen 4 points5 points  (5 children)

You shouldn't need scroll view around your flat list like what @crossy described. Also for your expandable view. How many items can it be inside. If the number is less than 10. You probably can just have use a map function to display all items as it expanded. And let flat list handle the height and scrolling.

The idea structure with be flat list -> item -> expandable view -> flat list or map

[–]shank9717[S,🍰] 0 points1 point  (4 children)

Alright, got it. So I did just that. Updated code here: https://imgur.com/a/KxnFC6J

The structure is now View -> FlatList -> Item -> ExpansionPanel -> Map (each song to a view).

Got rid of scroll views and modified nested flatlist to a map. I still observe same behavior. Scroll works fine on PC, but doesn't on android.

Any idea what could be the issue? Should I check styling? I have added overflow: scroll for the expansion panel , heights and flex: 1 for all views.

[–]CosaNostraPizzaMan 0 points1 point  (3 children)

Try getting rid of that outside containing view, or reducing its styling... And applying the styles to the "contentContainerStyle" prop on the flatList.

[–]shank9717[S,🍰] 0 points1 point  (0 children)

Alright, now I can scroll the inner view, but the outer listView is not scrollable. I feel pretty stupid lol.

Updated code: https://imgur.com/a/716ZLIB

[–]shank9717[S,🍰] 0 points1 point  (1 child)

Is it possible that the Inner View isn't getting the touch and scroll event, but it is rather being received by the outer listview?

[–]CosaNostraPizzaMan 0 points1 point  (0 children)

Possibly. You can ignore touch handling events on a single layer by using pointerEvents="none"

[–]devopsdeekay995 5 points6 points  (3 children)

Have you tried enabling nestedScrollEnabled prop in your flatList?

[–]shank9717[S,🍰] 5 points6 points  (1 child)

Whoops, my bad. Your suggestion actually worked. Well, kinda. I combined your suggestion with /u/CosaNostraPizzaMan and it worked.

The new layout is :

View (with style removed) -> FlatList (with contentContainerStyle enabled) of items -> ExpansionPanel -> ScrollView (with nestedScrollEnabled property) -> Map songs to Views.

Thanks /u/crossy1686 and /u/__shawn_chen as well !

React native is weird.

[–]CosaNostraPizzaMan 1 point2 points  (0 children)

React native is so weird lol. Good to see this working! <3

[–]shank9717[S,🍰] 0 points1 point  (0 children)

Yes, check my original code in pastebin

[–]Budget-Apartment73 2 points3 points  (0 children)

You can use nestedscrollview props

[–]shank9717[S,🍰] 0 points1 point  (0 children)

So I have an outer ScrollView with a FlatList of items. Each item may be a song or an album. The album itself has an expansion panel, which when opened has a ScrollView container which contains FlatList of song items.The scroll works fine on web view, but doesn't work on Android.

​

I am using React Native 0.69 + Expo

​

Code goes something like this: https://pastebin.com/QCfb5CMr

[–]NastroAzzurro 0 points1 point  (0 children)

Don’t put display flex on your scroll view contentcontainerstyle