Offset RefreshControl in React Native

Question

Edit: There seems to be a bug in React Native. I have created a bug on GitHub. For everyone coming for a solution: There seems to be none at the moment.

https://github.com/facebook/react-native/issues/23988

––––

I'm using a translucent header, which is why I gave the ScrollView a paddingTop to offset the content. When I pull down to refresh, the spinner is still at the top.

I have tried to use contentInset={{ top: 80 }} to offset everything, but there is an issue on iOS where it sometimes is not picked up correctly and set to 0.

Are there any other ways to get the RefreshControl to start lower?

This is my component:

  <Animated.ScrollView
    scrollEventThrottle={1}
    onScroll={Animated.event(
      [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
      { useNativeDriver: true },
    )}
    contentInset={{ top: headerHeight() + 10 }}
  >

@AlexChin No, there is no solution currently. There is an open issue on github: github.com/facebook/react-native/issues/23988 — mxmtsk
– mxmtsk, Commented Mar 4, 2020 at 10:02

Wayne Kim · Accepted Answer · 2020-08-05 04:49:54Z

3

I resolved like this.

contentInset={{ top: headerHeight }}
contentOffset={{y: -headerHeight}}

I use these props to FlatList.

answered Aug 5, 2020 at 4:49

Wayne Kim

311 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Mohd Shad Mirza Over a year ago

This worked for iOS. Had to use profressViewOffset on RefreshControl for android. stackoverflow.com/a/66691559/9153273

Archimedes Trajano · Accepted Answer · 2023-01-01 07:51:02Z

3

<RefreshControl
  progressViewOffset={40}
  refreshing={loading}
  onRefresh={onRefresh}
/>

progressViewOffset is how you do it, that would offset the loader 40 pixels lower.

edited Jan 1, 2023 at 7:51

Archimedes Trajano

43.2k29 gold badges222 silver badges372 bronze badges

answered Mar 18, 2021 at 12:57

xRoGeSx

311 bronze badge

2 Comments

mxmtsk Over a year ago

progressViewOffset is Android only

Tayyab Mazhar Over a year ago

progressViewOffset now supports both android & iOS as of version 0.65 reactnative.dev/docs/0.64/refreshcontrol

kodeusz · Accepted Answer · 2019-03-01 06:09:00Z

2

Did you set padding for the style or for the contentContainerStyle?

Can you provide some code snippet what properties does your ScrollView have and by what is wrapped?

answered Mar 1, 2019 at 6:09

kodeusz

1883 silver badges10 bronze badges

1 Comment

mxmtsk Over a year ago

I have added the code for my ScrollView above. If I set contentContainerStyle with padding, there's space I don't want between my child components and the refresh control. As mentioned, contentInset works soooometimes. But sometimes not. It's really weird

Collectives™ on Stack Overflow

Offset RefreshControl in React Native

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related