ppc_amnet/amnet-native/app/CardManager.tsx

import * as Clipboard from 'expo-clipboard';
import {useCallback, useMemo} from "react";
import {FlatList, View} from "react-native";

import {AMCard} from "../models/AMCard";
import {AimeCard} from "../components/AimeCard";
import RealmContext from "../models/RealmContext";
import ContextMenu from "react-native-context-menu-view";

const {useQuery, useRealm} = RealmContext;

function CardEntry(props: { card: AMCard }) {
    const realm = useRealm();
    const callback = useCallback(async (index: number) => {
        switch (index) {
            // copy card no
            case 0:
                await Clipboard.setStringAsync(props.card.code);
                break;
                
            case 1:
                realm.write(() => {
                    realm.delete(props.card);
                });
                break;
        }
    }, [realm, props.card]);
    
    return (
        <ContextMenu
            onPress={e => callback(e.nativeEvent?.index)}
            actions={[
                {title: "Copy Card Number", systemIcon: "doc.on.doc"},
                {title: "Delete Card", destructive: true, systemIcon: "trash"}]}>
            <AimeCard card={props.card} showFullCardNumber/>
        </ContextMenu>
    );
}

export default function CardManager() {
    const query = useQuery(AMCard);
    const cards = useMemo(() => query.sorted("added", true), [query]);

    return (
        <FlatList contentInsetAdjustmentBehavior="always"
                  style={{padding: 16, paddingTop: 24}}
                  data={cards}
                  keyExtractor={i => i._id.toString()}
                  contentContainerStyle={{paddingBottom: 40}}
                  ItemSeparatorComponent={() => <View style={{height: 15}}/>}
                  renderItem={i => <CardEntry card={i.item}/>}/>
    )
}