Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

295
Vistas
How do you make the ListHeaderComponent of a React Native FlatList sticky?

I have a FlatList that is purposefully wider then the screen width.

The list scrolls vertically to view each row and sits in a horizontal ScrollView to access off-screen items.

The ListHeaderComponent prop is basically an x-axis label I'd like to behave as a "frozen header"; like in a spreadsheet.

How do I make the ListHeaderComponent sticky?

over 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

You need to set prop to Flatlist as stickyHeaderIndices={[0]}

ListHeaderComponent: This prop would set the header view at the top of FlatList.

stickyHeaderIndices={[0]}: This prop would set the FlatList 0 index position item as sticky header and as you can see we have already added the header to FlatList so the header is now on 0 index position, so it will by default make the header as sticky.

<FlatList
  data={ this.state.FlatListItems }
  ItemSeparatorComponent={ this.FlatListItemSeparator}
  renderItem={ ({item}) => (
    <Text
      style={styles.FlatList_Item}
      onPress={this.GetItem.bind(this, item.key)}> {item.key}
      </Text>
  )}
  ListHeaderComponent={this.Render_FlatList_Sticky_header}
  stickyHeaderIndices={[0]}
/>
over 4 years ago · Santiago Trujillo Denunciar

0

stickyHeaderIndices={[0]} would solve your problem.

 <FlatList
        data={this.state.data}
        renderItem={this.renderItem}
        keyExtractor={item => item.id}
        stickyHeaderIndices={[0]}
      />

Besides, stickyHeaderIndices can also be an array of the indices we want to stick. You can even set a lot of indices like this: FlatList Sticky Header Example

 <FlatList
        data={this.state.data}
        renderItem={this.renderItem}
        keyExtractor={item => item.name}
        stickyHeaderIndices={[0, 6, 13]}
      />

When you keep scrolling the FlatList, item0 will be sticky, and then be replaced by item6, item13.

You can't find stickyHeaderIndices in the RN FlatList documentation. But you can find it in the source code. VirtualizedList supports it.

VirtualizedList.js#L964

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda