Blank list

[ajoykarmakar]

I follow the example from your project and documentation and got a blank screen.

Code -

import React from 'react';
import {Text} from 'react-native';
import BigList from 'react-native-big-list';

const data = [
  {label: '1', value: 1},
  {label: '2', value: 2},
  {label: '3', value: 3},
  {label: '4', value: 4},
  {label: '5', value: 5},
];
const renderItem = ({item, index}) => (
  <>
    <Text>1</Text>
    <Text>{item.label}</Text>
    <Text>{item.value} </Text>
  </>
);
const renderEmpty = () => <Text>Empty</Text>;
const renderHeader = () => <Text>Header</Text>;
const renderFooter = () => <Text>Footer</Text>;

const HomeScreen = () => {
  return (
    <>
      <Text>hi</Text>
      <BigList
        data={data}
        renderItem={renderItem}
        renderEmpty={renderEmpty}
        renderHeader={renderHeader}
        renderFooter={renderFooter}
        itemHeight={50} // Required (default 0)
        headerHeight={90} // Required to show header
        footerHeight={100} // Required to show footer
      />
    </>
  );
};

export default HomeScreen;

Config -

"dependencies": {
    "react": "17.0.2",
    "react-native": "0.65.2",
    "react-native-big-list": "^1.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.0",
    "react-native-codegen": "^0.0.7",
    "react-test-renderer": "17.0.2"
  },

Result -

[CrisRonda]

Same issue in:

"react": "17.0.2",
"react-native": "0.66.1"
"react-native-big-list": "^1.4.3",

[joalisonpereira]

Try use inside a View with flex: 1

[lamlengend98]

+1 same issue

renderHeader and Footer worked but item is not

[dougg0k]

I had a case of blank list in an app that I am working on, using react-navigation, I had two bottom tab routes, one with the list of collections in Collections Screen (but not only) and the other being the Settings screen, If I entered Settings and got back to collections, the list would be there, but if I entered in another route through Settings, in this case, Accounts Screen route, and got back to Collections after, the list would be blank (only the BigList), every time.

Only fix was to set the Collections screen route to unmount on blur through react-navigation.