React-Nav-Melon/screens/FAQPage.js

import {StyleSheet, Text, View, ScrollView} from 'react-native';
import React from 'react';
import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
import {List, ToggleButton} from 'react-native-paper';
import colors from '../theme/colors';
import fonts from '../theme/fonts';

const FAQPage = props => {
  const {navigation} = props;

  const faqCategories = [
    'General',
    'Login',
    'Account',
    'Viability',
    'Bruh1',
    'bruh2',
    'bruh3',
  ];
  const [categoryValue, setCategoryValue] = React.useState(faqCategories[0]);
  // const [questions, setQuestions] = React.useState(
  //   faqCategories.reduce((result, key) => ({...result, [key]: [{}]})),
  // );

  const questions = [
    {
      id: 0,
      title: 'What is Newscout?',
      answer:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
    },
    {
      id: 1,
      title: 'How to use Newscout?',
      answer:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
    },
    {
      id: 2,
      title: 'Can I create my own news?',
      answer:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
    },
    {
      id: 3,
      title: 'How can I upload images?',
      answer:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
    },
    {
      id: 4,
      title: 'Is Newscout free to use?',
      answer:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
    },
  ];

  const [expandedId, setExpandedId] = React.useState('');

  const handleAccordionPress = accordionId => {
    setExpandedId(accordionId === expandedId ? '' : accordionId);
  };

  return (
    <View style={styles.faqContainer}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <NewscoutTitleHeader
          title={'FAQ'}
          backButtonShown
          onBackClick={() => navigation.goBack()}
        />

        <View style={styles.pillContainer}>
          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            <ToggleButton.Group
              onValueChange={value => {
                setCategoryValue(value);
              }}>
              {faqCategories.map(category => (
                <ToggleButton
                  key={category}
                  icon={() => (
                    <Text
                      style={[
                        category === categoryValue
                          ? styles.selectedPillText
                          : styles.pillText,
                      ]}>
                      {category}
                    </Text>
                  )}
                  style={[
                    category === categoryValue
                      ? styles.selectedContainer
                      : styles.container,
                    {marginHorizontal: fonts.getSize(4)},
                  ]}
                  value={category}
                />
              ))}
            </ToggleButton.Group>
          </ScrollView>
        </View>
        <List.Section style={{paddingHorizontal: 16, gap: 16}}>
          <List.AccordionGroup
            expandedId={expandedId}
            onAccordionPress={handleAccordionPress}>
            {questions.map(item => (
              <List.Accordion
                title={item.title}
                key={item.id}
                id={item.id.toString()}
                style={
                  [expandedId === item.id.toString()
                    ? styles.selectedAccordionContainer
                    : styles.accordionContainer,
                  // styles.baseAccordionContainer
                  ]
                }
                titleStyle={styles.accordionTitle}>
                <View
                  style={[
                    {
                      borderColor: colors.primaryColor,
                      borderBottomWidth: 2,
                      borderLeftWidth: 2,
                      borderRightWidth: 2,
                      borderBottomLeftRadius: 16,
                      borderBottomRightRadius: 16,
                      paddingHorizontal: 16,
                      paddingBottom: 8,
                      backgroundColor: colors.white,
                    },
                  ]}>
                  <Text style={styles.accordionDescription}>
                    {item.answer}
                  </Text>
                </View>
              </List.Accordion>
            ))}
          </List.AccordionGroup>
        </List.Section>
      </ScrollView>
    </View>
  );
};

export default FAQPage;

const styles = StyleSheet.create({
  selectedAccordionContainer: {
    borderTopWidth: 2,
    borderRightWidth: 2,
    borderLeftWidth: 2,
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    borderColor: colors.primaryColor,
    paddingVertical: 4,
    height:'auto',
    backgroundColor: colors.white
  },
  accordionContainer: {
    borderWidth: 2,
    borderColor: colors.grayShade_400,
    borderRadius: 16,
    height: 'auto',
    paddingVertical: 16,
    backgroundColor: colors.white
  },
  accordionTitle: {
    fontFamily: fonts.type.semibold,
    color: colors.black,
  },
  accordionDescription: {
    fontFamily: fonts.type.medium,
    color: colors.grayShade_200
  },
  
  selectedPillText: {
    fontFamily: fonts.type.semibold,
    fontSize: fonts.getSize(12),
    color: colors.white,
  },
  pillText: {
    fontFamily: fonts.type.semibold,
    fontSize: fonts.getSize(12),
    color: colors.quaternaryColor,
  },
  categoriesPillContainer: {
    paddingBottom: fonts.getSize(8),
    flexDirection: 'row',
    alignItems: 'space-between',
    paddingHorizontal: fonts.getSize(16),
  },
  container: {
    borderRadius: fonts.getSize(18),
    paddingVertical: fonts.getSize(8),
    paddingHorizontal: fonts.getSize(16),
    backgroundColor: colors.white,
    width: 'auto',
  },
  selectedContainer: {
    paddingVertical: fonts.getSize(8),
    paddingHorizontal: fonts.getSize(16),
    backgroundColor: colors.topVariantColor,
    borderRadius: fonts.getSize(18),
    width: 'auto',
  },
  pillContainer: {
    paddingVertical: 16,
    paddingLeft: 16,
  },
  faqContainer:{
    backgroundColor: colors.white
  }
});