CODEWITHSUNDEEP
iosreact-nativescrollviewreact-native-flatlist
Gowtham
Gowtham

Reputation: 486

ProgressViewOffset for IOS Refresh Control React Native

I have the header that hides on a scroll, So I use ProgressViewOffset to bring out refresh control loader below the header.
It's working fine on Android. But in IOS we have no support for offset. But I ended up using contentInset and contentOffset but I'm not getting it.

enter image description here

          refreshControl: (
        <RefreshControl
          // refreshing
          refreshing={this.props.isloading}
          onRefresh={this.onRefresh}
          progressViewOffset={200}
          />
      ),
      contentInset: {top: 200},
      onMomentumScrollBegin,
      onMomentumScrollEnd,
      onScrollEndDrag,
      ItemSeparatorComponent: this.renderSeparator,
      onScrollEventThrottle: 16,
      automaticallyAdjustContentInsets: false, 
      contentOffset: {x: 0, y: -200},

PS: When I use contentContainerStyle and contentInset, There's a space between refreshcontrol and the content...

Upvotes: 2

Views: 5616

Answers (1)

Gowtham
Gowtham

Reputation: 486

I fixed it by passing HEADER_HEIGHT to contentInset, contentOffset and not using contentContainerStyle.

<AnimatedScrollView
  contentContainerStyle={{
    paddingTop: Platform.OS === 'ios' ? 0 : HEADER_HEIGHT,
  }}
  scrollEventThrottle={16}
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.scrollAnim } } }],
    { useNativeDriver: true }
  )}
  contentInset={{ top: HEADER_HEIGHT }}
  contentOffset={{ x: 0, y: -HEADER_HEIGHT }}
  refreshControl={
    <RefreshControl
      refreshing={this.state.refreshing}
      onRefresh={this.onrefresh}
      progressViewOffset={HEADER_HEIGHT}
    />
  }
  automaticallyAdjustContentInsets={false}

</AnimatedScrollView>

Run the code on Snack: https://snack.expo.io/@legowtham/9c7a01

PS: As we're using custom animated header, the pull-to-refresh loader causes the header to bounce after loader stops. If you don't prefer this animation problem use Animated.diffClamp to avoid this. This article might be useful: https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a

Upvotes: 11

Related Questions