how to set customs height for section

[ghost]

@bolan9999 @matt-oakes @SirAnthony @dekpient @kohkimakimoto
I want to add customs height for section if my data is hide then this data space also hide but it not working in larglist because here only give number so this problem raise

  heightForIndexPath={() => 60} or heightForIndexPath={() => 'auto'}<---------------it's not working in my code 

here is more code

Here is my output

new12.mp4

I want Like this

now.mp4

Here is my code

App.js

import React, { useState } from 'react';
import {
  View,
  Image,
  Text,
  Platform,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import { LargeList } from 'react-native-largelist-v3';
import { contacts } from './DataSource';

const App = () => {
  const [data, setData] = useState(contacts);

  const [A, setA] = useState(true);
  const [B, setB] = useState(true);

  const [Row, setRow] = useState(true);
  // const [height, setHeight] = useState(true);


  // const heightForIndexPath = (indexPath) => {
  //   setHeight(null);
  // };

  const renderHeader = () => {
    return (
      <View style={{ backgroundColor: 'white' }}>
        <Text
          style={{
            fontSize: 30,
            fontWeight: 'bold',
            textAlign: 'center',
            padding: 5,
          }}>
          Contact App
        </Text>
      </View>
    );
  };

  const renderSection = (section) => {
    const contact = data[section];
    // console.log(contact)
    return (
      <>
        {contact.header == 'A' ? (
          <TouchableOpacity style={styles.section} onPress={() => setA(!A)}>
            <Text style={styles.sectionText}>{contact.header}</Text>
          </TouchableOpacity>
        ) : null}
        {contact.header == 'B' ? (
          <TouchableOpacity style={styles.section} onPress={() => setB(!B)}>
            <Text style={styles.sectionText}>{contact.header}</Text>
          </TouchableOpacity>
        ) : null}
      </>
    );
  };

  const renderItem = ({ section: section, row: row }) => {
    const contact = data[section].items[row];
    return (
      <>
        {A ? (
          <>
            {contact.id == 1 ?

              <View style={styles.row}>
                <Image
                  source={{
                    uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
                  }}
                  style={styles.image}
                />
                <View style={styles.rContainer}>
                  <Text style={styles.title}>{contact.name}</Text>
                  <Text style={styles.subtitle}>{contact.contact}</Text>
                </View>
              </View>
              : null}
          </>
        ) : null}
        {B ? (
          <>
            {contact.id == 2 ?
              <View style={styles.row}>
                <Image
                  source={{
                    uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
                  }}
                  style={styles.image}
                />
                <View style={styles.rContainer}>
                  <Text style={styles.title}>{contact.name}</Text>
                  <Text style={styles.subtitle}>{contact.contact}</Text>
                </View>
              </View>
              : null}
          </>
        ) : null}

      </>
    );
  };
  return (

    <LargeList
      heightForSection={() => 40}
      renderSection={renderSection}
      renderIndexPath={renderItem}
      data={data}
      renderHeader={renderHeader}
      headerStickyEnabled
      style={{ flex: 1 }}
      showsVerticalScrollIndicator={false}
      bounces={false}
      heightForIndexPath={() => A == "null" ? 0 : 60 || B == "null" ? 0 : 60}
    />
  );
};

export default App;

const styles = StyleSheet.create({
  search: {
    margin: 10,
    fontSize: 18,
  },
  empty: {
    marginVertical: 20,
    alignSelf: 'center',
  },
  section: {
    flex: 1,
    backgroundColor: '#EEE',
    justifyContent: 'center',
  },
  sectionText: {
    fontSize: 20,
    marginLeft: 10,
  },
  row: { flex: 1, flexDirection: 'row', alignItems: 'center' },
  image: { marginLeft: 16, width: 44, height: 44 },
  rContainer: { marginLeft: 20 },
  title: { fontSize: 18 },
  subtitle: { fontSize: 14, marginTop: 8 },
});)
```