React Native Flat list will now scroll. Not sure what I am doing wrong here. I am on the latest version for React Native. I need the flatlist to scroll and with this issue I can't refresh the list when I pull down the list to refresh. I also tried to user the prop to enable scroll and that did not work either.

 <View
      style={[
        styles.container,
        {paddingLeft: insets.left, paddingRight: insets.right},
      ]}>
      <List.Section style={styles.flex}>
        <List.Subheader>Profile List:</List.Subheader>
        <FlatList
          data={data}
          style={styles.flex}
          refreshControl={
            <RefreshControl
              refreshing={refreshing}
              onRefresh={() => setRefreshing(true)}
              tintColor={'blue'}
            />
          }
          renderItem={({item, index, separators}) => (
            <>
              <List.Item
                title={item.title.rendered}
                description={item.content.rendered.replace(/(<([^>] )>)/gi, '')}
                left={props => <List.Icon {...props} icon="layers" />}
                right={props => (
                  <Button
                    style={{alignSelf: 'center'}}
                    mode="text"
                    onPress={() => selectedProfile(item.acf.elmc_custom_layout)}
                    onLongPress={() => showDialog(item)}>
                    Download
                  </Button>
                )}
              />
              <Divider />
            </>
          )}
        />
        </View>

// my stylesheet for this component

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  flex: {
    flex: 1,
  },
});

I found issue but not sure how to fix it. I am using the following code so that it will dismiss the keyboard when I press anywhere on the screen. This code dismiss the keyboard but it prevents the screens from scrolling. I placed it to wrap around my navigation so that all screen will dismiss the keyboard but it causing issues with scrolling the screen. can someone provide an example how I can dismiss keyboard when I press anywhere on the screen and also be able to scroll the screens when needed

// allows the keyboard to be dismissed anywhere the screen is pressed
const DismissKeyboard = ({children}) => (
  <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
    <View style={{flex: 1}} onStartShouldSetResponder={() => true}>
      {children}
    </View>
  </TouchableWithoutFeedback>
);

function CustomLayoutNavigator(props) {
  return (
    <DismissKeyboard?
    <Stack.Navigator>
      <Stack.Screen
        name="CustomLayoutHomeScreen"
        component={CustomLayoutScreen}
        initialParams={{myData: []}}
        options={{
          title: 'My Layout',
          headerShown: false,
        }}
      />

CodePudding user response：

Try to use ScrollView instead of View on the top level.

CodePudding user response：

Try this,

const [refreshing, setRefreshing] = useState(false);

const onRefresh = () => {
 //refresh Action
  };


 <FlatList
          data={data}
          style={styles.flex}
          refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={() => onRefresh()}
            tintColor="#F8852D"
          />
        }
          renderItem={({item, index, separators}) => (
        
          )}
        />