zyslife / react-native-head-tab-view

Add collapsible headers to your tab-view components.
430 stars 81 forks source link

renderRefreshControl progress value not change when pull down #98

Closed surethink closed 3 years ago

surethink commented 3 years ago

Describe the bug

When I render custom refresh control with renderRefreshControl, progress value is 0, not change during pull down, when stop, the value is 1

` const renderRefreshControl = ({ refreshValue, refreshType, progress }) => { console.log(refreshValue, refreshType, progress) return ( <View style={{backgroundColor:"red",alignItems:"center",paddingVertical:0}}>

            <Text>{progress.value}</Text>
        </View>
    )
}

`

Expected behavior

1、during pull down, progress value change from 1% to 100% 2、it's better that there is no default distance between the custom refresh control view and my screen view.

Package versions

未命名

  • React: 17.0.2
  • React Native: 0.64
  • React-Native-Gesture-Handler: ^1.10.3
zyslife commented 3 years ago

@surethink Because progress is Reanimated2.SharedValue , it should be used like this.

useAnimatedReaction(() => {
    return progress
}, () => {
    console.log(progress.value);
})

useDerivedValue(()=>{
    console.log(progress.value);
})
zyslife commented 3 years ago

You can refer to the CustomRefreshControl file in the example.

surethink commented 3 years ago

You can refer to the CustomRefreshControl file in the example.

got it, thanks