Recursive lists, items overlaying each other

[mattwebhub]

Hello guys I'm facing an issue, what happens is that I have a data structure in which contains several nested lists within lists so I'm using a recursive-like way for displaying the list based wheter it has children or not. The list renders but it's styling is buggy and items overlay each other as it moves away from the screen (screenshots below) if someone know what this might be related, or if this is even possible to do with this library (As I saw on the known issues that nested springViews were not yet supported, but I don't know if this is the case). Any inputs would be highly appreciated 😁😊 Largelist:

[...]
<LargeList
        numberOfRowsInSection={rows => rows.length}
        style={styles.container}
        data={this.state.entries}
        heightForIndexPath={() => 44}
        renderIndexPath={this._renderIndexPath}
      />
[...]
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

renderIndex function:

  _renderIndexPath = ({ section, row }) => {
    return (
      <ListItem
        row={row}
        entries={this.state.entries}
        list={this.props.list}
        level={this.props.level}
        selectedClassification={this.state.selectedClass}
      />
    );
  };

List Item component:

class ListItem extends Component {
  renderSubList = () => {
    const { row, list, onPress, entries } = this.props;
    if (!isEmpty(entries[0].items[row].children)) {
      return (
        <List
          level={this.props.level + 1}  // used for identating
          list={list}
          entries={entries[0].items[row].children}
        />
      );
    }
  };
  title = () => {
    const { entries, row } = this.props;
    return `${entries[0].items[row].code} - ${
      entries[0].items[row].class
    }
    `;
  };
  render() {
    const { onPress, level } = this.props;
    return (
      <>
        <TouchableHighlight
          style={styles.container}
          onPress={onPress}
>
          <Text style={{ paddingLeft: level * 15 }}>{this.title()}</Text>
        </TouchableHighlight>
        {this.renderSubList()}
      </>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    height: 44,
    alignItems: 'center',
    flexDirection: 'row',
  },
});

data's data structure:

[{
class: ''
code: ''
examples: []
children: [ // this has other objects like this
{..}
  ]
},..]

    1. Dev OS (windows/Mac/Linux)
- Mac
    2. Target OS (iOS/Android/Both)
- iOS
    3. Simulator or real device? (Simulator/Real Device/Both)
- Simulator
    4. React-native's version:
- @latest