Question 34413 in React native Question posted in
The official React Native documentation can be found here.

react native scrollView inside Flatlist header can not scroll

based on the requirement, I need to design a ScrollView(vertical) inside FlatList(vertical)

here is my layout

<FlatList>
  renderHeader = <ScrollView/>
  renderData= ...
</FlatList>

My code run normally, but the scrollView can not scroll, can someone help

Tags:

2

Answers


  1. 0

    Here is your solution, fixing size of each renderItem component, And wrapping this component in ScrollView will fix your problem.

    import * as React from 'react';
import { Text, View, StyleSheet, FlatList, ScrollView } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>

  <FlatList
          data={['',"","","",""]} //Your Data Object
          ListHeaderComponent={() => {
            return <ScrollView style={{height: 100, marginVertical: 20}}>
                     <View>
                         <Text>Header</Text>
                          <Text>Header</Text>
                          <Text>Headr</Text>
                          <Text>Header</Text>
                          <Text>Header</Text>
                          <Text>Header</Text>
                          <Text>Header</Text>
                          <Text>Header</Text>
                          <Text>Header</Text>
                          <Text>Header</Text>
                     </View> 
                   </ScrollView>
          }}
          renderItem={() => {
            return <ScrollView style={{height: 100, marginVertical: 20}}>
                     <View>
                         <Text>renderItem</Text>
                     </View> 
                   </ScrollView>
          }}
    />
    
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});
    Login or Signup to reply.
  2. 0

    This is a problem only in android.
    add nativeScrollEnabled prop to ScrollView.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search