Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Export custom RefreshControl component and add logic required to handle it #2137

Merged
merged 4 commits into from
Aug 10, 2022

Conversation

j-piasecki
Copy link
Member

Description

Closes #1067.

The problem with RefreshControl on Android was that it wasn't a part of the Gesture Handler system. This PR adds a custom RefreshControl component exported by GH in the same way as ScrollView, Switch etc. It also adds custom logic to ScrollView and FlatList components exported by Gesture Handler that handles setting relations between native gestures properly.

Test plan

Tested on the Example app and on code from the issue

@j-piasecki j-piasecki merged commit 0089bd6 into main Aug 10, 2022
@j-piasecki j-piasecki deleted the @jpiasecki/custom-refresh-control branch August 10, 2022 10:36
j-piasecki added a commit that referenced this pull request Sep 22, 2022
## Description

#2137 added a custom `RefreshControl` component and the logic necessary
to handle it. I missed one use case in that PR: a custom component that
renders the added `RefreshControl`. This PR fixes this by cloning the
provided component instead of copying the props.

## Test plan

```jsx
const RefreshControlWrapper = React.forwardRef((props, ref) => {
  const [refreshing, setRefreshing] = React.useState(false);

  useEffect(() => {
    setTimeout(() => {
      setRefreshing(false);
    }, 1000);
  }, [refreshing]);

  return (
    <RefreshControl
      ref={ref}
      refreshing={refreshing}
      onRefresh={() => {
        setRefreshing(true);
      }}>
      {props.children}
    </RefreshControl>
  );
});

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ScrollView refreshControl={<RefreshControlWrapper />}>
        <View style={{ width: 100, height: 200, backgroundColor: 'red' }} />
        <View style={{ width: 100, height: 200, backgroundColor: 'green' }} />
        <View style={{ width: 100, height: 200, backgroundColor: 'blue' }} />
        <View style={{ width: 100, height: 200, backgroundColor: 'red' }} />
        <View style={{ width: 100, height: 200, backgroundColor: 'green' }} />
        <View style={{ width: 100, height: 200, backgroundColor: 'blue' }} />
      </ScrollView>
    </GestureHandlerRootView>
  );
}
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ScrollView breaks RefreshControl on Android
2 participants