is this library still maintained? having issue with SectionList inside Accordion Component

[marahman-bot]

I've been struggling making long SectionList inside Accordion Component, it went off out of viewport, so it make some list not visible. here is the code to produce the view.

App.js

import React, { Component } from "react";
import { ScrollView, SectionList, View, Text } from "react-native";
import AnotherJS from "./AnotherJS";

export default class App extends Component {
  render(){
    return(
      <View style={{backgroundColor:"#5273B7", flex:1, padding:10}}>
        <View style={{backgroundColor:"#ff0000", borderTopLeftRadius:10, borderTopRightRadius:10, padding: 10}}>
          <View style={{backgroundColor:"#ffffff", borderRadius:10}}>
            <Text>Picker Here</Text>
          </View>
        </View>
        <View style={{backgroundColor:"#00ff00", flex:1, borderBottomLeftRadius:10, borderBottomRightRadius:10, padding:10}}>
          <View style={{flex:1, borderWidth:2, borderRadius:2}}>
            <AnotherJS/>
          </View>
        </View>
      </View>
    )
  }
}

AnotherJS.js

import React, { Component } from "react";
import {ViewScroll, View, Text, SectionList } from "react-native";
import Accordion from "react-native-collapsible/Accordion";

const dataArray = [
  { title: "Info 1",
    content: [
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
    ] },
  { title: "Info 2",
    content: [
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
    ] },
  { title: "info 3",
    content: [
      { title: "1", data: ["1"]},
      { title: "2", data: ["2"]},
    ] }
];

const Item = ({ title }) => (
  <View style={{flex:1}}>
    <Text>{title}</Text>
  </View>
);

export default class AnotherJS extends Component {
  state = {
    activeSections: [0],
  };

  _renderHeader = (section) => {
    return(
      <View style={{
        flexDirection: "row",
        padding: 10,
        justifyContent: "space-between",
        alignItems: "center" ,
        backgroundColor: "#A9DAD6" }}>
        <Text style={{ fontWeight: "600" }}>{section.title}</Text>
      </View>
    );
  };

  _renderContent = (section) => {
    return(
      <SectionList
        sections={section.content}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <Item title={item} />}
        renderSectionHeader={({ section: { title } }) => (
          <Text>{title}</Text>
        )}
      />
    );
  };

  _updateSections = (activeSections) => {
    this.setState({ activeSections });
  };

  render() {
    return (
      <Accordion
        sections = {dataArray}
        activeSections = {this.state.activeSections}
        renderHeader = {this._renderHeader}
        renderContent = {this._renderContent}
        onChange = {this._updateSections}
        style={{flex:1}}
      />
    );
  }
}