RefreshControl styling in react-native

I make some feedlines using Viewpager. I wanna second picture's refresh style. buy my code shows the first picture's style. how can i change refreshControl to be second picture style...? or using styled-components

<ScrollView
        contentContainerStyle={[{ flex: 1 }]}
        refreshControl={
          <RefreshControl
            tintColor={Color.white}
            colors={Color.white}
            refreshing={this.state.loading}
            onRefresh={() => this.pullToReload()}
          />
        }>
        <ViewPager
          style={{ flex: 1 }}
          initialPage={0}
          orientation={'vertical'}
          onPageScroll={(e) => {
            const pos = e.nativeEvent.position;
            const { offset } = e.nativeEvent;

            if (pos <= 0 && offset <= 0) {
               {/* how to know onEndReached??.. */}
            }
          }}>
          {this.state.feedList.map((item) => (
            <Feed item={item} index={item.id} />
          ))}
        </ViewPager>
      </ScrollView>