laconic-wallet/components/Header.tsx

import React, { useState } from 'react';
import { View } from 'react-native';
import { Appbar, List } from 'react-native-paper';

const Header = () => {
  const [expanded, setExpanded] = useState<boolean>(false);

  const handlePress = () => setExpanded(!expanded);

  return (
    <View>
      <Appbar.Header mode="center-aligned">
        <Appbar.Content title="Laconic" />
      </Appbar.Header>

      <List.Accordion
        title="Select Network"
        expanded={expanded}
        onPress={handlePress}>
        <List.Item
          title="Ethereum"
          onPress={() => {
            setExpanded(false);
          }}
        />
        <List.Item
          title="Cosmos"
          onPress={() => {
            setExpanded(false);
          }}
        />
      </List.Accordion>
    </View>
  );
};

export { Header };