React-Nav-Melon/screens/SidebarPage.js

import {
  LayoutAnimation,
  Platform,
  StyleSheet,
  Text,
  UIManager,
  View,
} from 'react-native';
import React, { useState } from 'react';
import NewscoutLogo from '../components/molecules/NewscoutLogo';
import fonts from '../theme/fonts';
import CircularPrimaryBackButton from '../components/organisms/Buttons/CircularPrimaryBackButton';
import { List } from 'react-native-paper';
import colors from '../theme/colors';
import EntypoIcon from 'react-native-vector-icons/Entypo'
import { ScrollView } from 'react-native-gesture-handler';

const data = [
  {
    title: 'Sector Update',
    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
  },
  {
    title: 'Regional Update',
    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
  },
  {
    title: 'Finance',
    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
  },
  {
    title: 'Economic',
    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
  },
  {
    title: 'Miscellaneous',
    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
  },
];

const SidebarPage = ({ navigation }) => {
  if (
    Platform.OS === 'android' &&
    UIManager.setLayoutAnimationEnabledExperimental
  ) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }



  const [isExpanded, setExpanded] = useState(
    data.map((item) => {
      return {
        key: item.title,
        value: false
      };
    }).reduce((result, item) => {
      result[item.key] = item.value;
      return result;
    }, {})
  )

  return (
    <View style={styles.sideBarContainer}>
      <View style={styles.logoContainer}>
        <NewscoutLogo style={styles.logo} />
      </View>
      <View style={styles.buttonContainer}>
        <CircularPrimaryBackButton onPress={() => navigation.toggleDrawer()} />
      </View>
      <ScrollView>
        <View style={styles.accordionContainer}>
          <List.AccordionGroup>
            {data.map(item => (
              <List.Accordion
                key={data.indexOf(item)}
                id={`${data.indexOf(item)}`}
                style={[styles.accordionStyle]}
                titleStyle={[styles.accordionTextStyle, {}]}
                onPress={() => {
                  // setExpandedsetIsShowingText(!isShowingText);
                  // LayoutAnimation.configureNext(
                  //   LayoutAnimation.Presets.easeInEaseOut,
                  // )
                  // const nextState = { ...isExpanded };
                  // nextState[item.title] = !nextState[item.title];
                  //console.log("set state changes");
                  // setExpanded(nextState);
                }}
                expanded={isExpanded[item.title]}
                left={() => <View style={{ paddingLeft: 16, }}><EntypoIcon name="box" size={24} /></View>}
                right={() => <EntypoIcon name="chevron-down" size={12} />}
                title={item.title}>
                {item.subTitles.map(subTitle => (
                  <List.Item
                    key={item.subTitles.indexOf(subTitle)}
                    style={styles.accordionItemStyle}
                    titleStyle={styles.accordionItemTextStyle}
                    title={subTitle}
                  />
                ))}
              </List.Accordion>
            ))}
          </List.AccordionGroup>
        </View>
      </ScrollView>

    </View>
  );
};

export default SidebarPage;

const styles = StyleSheet.create({
  sideBarContainer: {
    paddingHorizontal: fonts.getSize(24),
  },
  logo: {
    width: fonts.getSize(84),
    height: fonts.getSize(84),
  },
  logoContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonContainer: {},
  accordionContainer: {
    paddingVertical: fonts.getSize(16),
    gap: fonts.getSize(8),
  },
  accordionItemStyle: {},
  accordionItemTextStyle: {},
  accordionStyle: {
    backgroundColor: colors.white,
    borderRadius: fonts.getSize(8),
    borderWidth: fonts.getSize(3),
    borderColor: colors.lightGray,
    maxHeight: fonts.getSize(52),
  },
  accordionTextStyle: { fontFamily: fonts.type.medium },
});