Home > Enterprise >  How can I make first column sticky in React Native Flatlist?
How can I make first column sticky in React Native Flatlist?

Time:09-28

We have stickyHeaderIndices for row, I couldn't find any solution for column. enter image description here

CodePudding user response:

This might help

<FlatList
  data={[...]}
  ...
  ListHeaderComponent={this.Render_FlatList_Sticky_header}
  stickyHeaderIndices={[0]}
/>

CodePudding user response:

You could make this layout with nested Flatlists

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

const data = [
  {
    title: 'Testing1',
    cols: ['1234', '1234', '1234'],
  },
  {
    title: 'Testing2',
    cols: ['1234', '1234', '1234'],
  },
  {
    title: 'Testing3',
    cols: ['1234', '1234', '1234'],
  },
  {
    title: 'Testing4',
    cols: ['1234', '1234', '1234'],
  },
  {
    title: 'Testing5',
    cols: ['1234', '1234', '1234'],
  },
  {
    title: 'Testing6',
    cols: ['1234', '1234', '1234'],
  },
];

export default function App() {
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View
          style={{
            flexDirection: 'row',
          }}>
          <Text style={{ padding: 40, backgroundColor: 'white', flexGrow: 0 }}>
            {item.title}
          </Text>
          <FlatList
            horizontal={true}
            data={item.cols}
            renderItem={({ item }) => (
              <Text style={{ padding: 40 }}>{item}</Text>
            )}
          />
        </View>
      )}
    />
  );
}

Snack

  • Related