DingdongRider/wallet/BankCom.tsx

import * as React from 'react';
import { Div, Button, Image, Text, Avatar, Icon } from 'react-native-magnus';

export default function BankCom({
  info,
  checked = false,
  onPress,
  next = false,
}) {
  const { bankName, cardNo } = info;
  return (
    <Button p={12} bg="white" mt={5} block rounded="none" onPress={onPress}>
      <Div flex={1} row>
        <Icon
          w={33}
          h={33}
          name="creditcard"
          bg="yellow500"
          color="white"
          rounded="circle"
        />
        <Div flex={1} ml={5}>
          <Text fontSize="sm">{bankName}</Text>
          <Text fontSize="xs">{cardNo}</Text>
        </Div>
        {checked && <Icon name="checkcircle" color="yellow500" />}
        {next && <Icon name="right" color="gray500" />}
      </Div>
    </Button>
  );
}