React Native scroll bar in the middle of the screen

Question

Hermes enabled

OS: iOS

getting with FlatList and ScrollView

When developing ScrollView or FlatList, having no issues with the scroll bar. In production, sometimes it looks ugly and positions at the middle of the screen, sometimes with huge/small offset from the right side (where it should be), sometimes even on the left side. Here is the image of what I am getting:

Thank you mates in advance!

score 5 · Answer 1 · answered Oct 25 '22 at 19:12

5

Try adding scrollIndicatorInsets={{ right: 1 }} to ScrollView

answered Oct 25 '22 at 19:12

CodeHat

384
4
14

1

I try this, but sometimes solve, sometimes still occur – zainal abidin Nov 17 '22 at 08:42

score 0 · Answer 2 · answered Apr 19 '23 at 16:25

0

Adding scrollIndicatorInsets={{ right: 1 }} within FlatList properties worked fine for me

currently using react-native 0.68.2

answered Apr 19 '23 at 16:25

Leonardo Migliorin

1
1

score 0 · Answer 3 · answered May 06 '23 at 15:15

For my instance of this bug, it was caused by conditionally rendering a FlatList. My pseudo-code was:

if (initialLoading) return <FullScreenLoadingPage/>

else return <FlatList data={...} />

When I re-worked this to:

return (
  <FlatList 
    data={...} 
    ListEmptyState={initialLoading ? FullScreenLoadingPage : ...} 
  />
)

The problem went away.

React Native scroll bar in the middle of the screen

3 Answers3