React Native: Refresh Controll not working with ScrollView

user_14770501 0
Viewed 2636

I would like to pull down a scrollView and refresh this component, so I have followed the official document mentioning onRefresh and RefreshContorol from react-n

refresh does workout but scroll is not working. However when i remove contentContainerStyle={{flex: 1}} scroll start working but refresh control does not work then. is there any way to resolve this?

export default function App() {
  const [refreshing, setRefreshing] = React.useState(false);

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);

    wait(2000).then(() => setRefreshing(false));
  }, [refreshing]);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
      >
        <Text>Pull down to see RefreshControl indicator</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
  scrollView: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
react-native
2 Answers

Make sure you use ScrollView from React Native instead of React Native Gesture Handler.

user_177257400

here is sncak works fine.it doesnt work because contentContainerStyle is the child view.

import  React from 'react';
import { Text, View, StyleSheet,ScrollView, RefreshControl} from 'react-native';
import Constants from 'expo-constants';
const wait = (timeout) => {
  return new Promise(resolve => setTimeout(resolve, timeout));
}
export default function App() {
  const [refreshing, setRefreshing] = React.useState(false);
const data = [0,1,2,3,4,5,6,7,8,90,9,9,9,9,9,9,9,9,9,9]
  const onRefresh = React.useCallback(() => {
    setRefreshing(true);

    wait(2000).then(() => setRefreshing(false));
  }, [refreshing]);

  return (
    <View style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
user_126551990
Related