What Is a Digital Business Card App — and Why Build It with Rork?
In an era where networking happens as much online as in person, a digital business card app lets you share your professional profile instantly — no printing costs, no running out of cards. Scan a QR code, tap a share button, and your contact details land directly in someone else's phone.
Rork is an AI-powered app builder that turns a plain-English prompt into a working iOS or Android app. No programming experience needed. By the end of this tutorial, you'll have a fully functional digital business card app with:
- A polished profile display screen (name, title, social links)
- Auto-generated QR code from your profile data
- iOS share sheet integration for one-tap sharing
- An editable settings screen that saves your info locally
If you've been searching for "no-code business card app" or "how to create a digital business card app," Rork is the fastest path from idea to App Store.
Prerequisites
- A Rork account — sign up for free at rork.com (free tier includes 5 app generations per week)
- A smartphone for testing (iOS or Android)
- Your profile info: name, job title, company, email, and any social links you'd like to include
The free Rork plan is sufficient to complete this entire tutorial. If you later want native Swift output or Apple Watch support, Rork Max has you covered — but we'll keep things accessible here.
Step 1: Create a New Project in Rork
Log in to Rork and click New App. In the prompt field, describe the app you want to build:
Build a digital business card app with the following features:
- A profile screen showing name, job title, company, email, and social links
- Auto-generate a QR code from the profile data that can be scanned to save contact info
- A share button that opens the iOS share sheet with the profile as text
- A settings screen where users can edit and save their profile information
Design: clean, professional, black-and-white theme.
QR code should be large and centered on the profile screen.
Rork will generate a preview in seconds. Take a moment to look through it before making any refinements.
Step 2: Refine the Profile Screen
Once the preview loads, check the profile display for the key elements: name, title, company, email, and social links. If the layout isn't quite what you had in mind, use the chat panel to give feedback:
Move the name to the top of the screen in a large font.
Display the avatar as a rounded circle above the name.
Show social media icons as tappable buttons in a horizontal row.
Rork interprets these instructions and updates the UI in real time. Keep refining until the design feels right — there's no limit to how many times you can iterate.
Step 3: Verify the QR Code Implementation
Rork automatically integrates a QR code library into your project. The generated QR code encodes your profile data in vCard format, which means the person scanning it can save you to their contacts with a single tap.
Here's roughly what the auto-generated QR code component looks like under the hood:
// QR Code component (auto-generated by Rork)
import QRCode from 'react-native-qrcode-svg';
const profileData = {
name: "Jane Smith",
title: "Product Designer",
company: "Acme Corp",
email: "jane@example.com",
twitter: "https://x.com/janesmith",
};
// Encode profile as a vCard string for maximum compatibility
const vCardString = `BEGIN:VCARD
VERSION:3.0
FN:${profileData.name}
TITLE:${profileData.title}
ORG:${profileData.company}
EMAIL:${profileData.email}
URL:${profileData.twitter}
END:VCARD`;
// Expected output: scanning this QR code on iOS or Android prompts
// the user to add the contact directly to their address bookUsing vCard format is strongly recommended over a plain URL — it works offline and doesn't require the recipient to have any app installed.
Step 4: Add the Share Feature
The share button sends your business card info to any app on the recipient's phone — Messages, Mail, WhatsApp, LINE, and more. Prompt Rork to add it:
Add a "Share Card" button to the profile screen.
When tapped, it should open the iOS share sheet with the profile
formatted as plain text:
Name: [name]
Title: [title] / [company]
Email: [email]
Social: [social URL]
Rork adds the share functionality automatically. The implementation typically uses Expo's Share API:
import { Share } from 'react-native';
const handleShare = async () => {
const profileText = `📇 Jane Smith
Product Designer / Acme Corp
Email: jane@example.com
Social: https://x.com/janesmith`;
await Share.share({
message: profileText,
title: "Jane Smith's Business Card",
});
// Expected output: iOS share sheet appears, allowing the user to send
// via Messages, Mail, AirDrop, or any installed app
};For a deeper look at share sheet patterns, check out Native Share Sheet Implementation in Rork.
Step 5: Build the Profile Editor
A digital business card app is only useful if people can put their own info in it. Prompt Rork to add an editable settings screen:
Add a Settings screen with form fields for:
name, job title, company, email, and social link.
Save data to AsyncStorage on tap of a "Save" button.
Profile screen and QR code should reflect changes immediately after saving.
The resulting implementation will look something like this:
import AsyncStorage from '@react-native-async-storage/async-storage';
// Save profile to device storage
const saveProfile = async (profileData) => {
await AsyncStorage.setItem('userProfile', JSON.stringify(profileData));
// Expected output: data persists on device even after app is closed
};
// Load profile when the app starts
const loadProfile = async () => {
const saved = await AsyncStorage.getItem('userProfile');
return saved ? JSON.parse(saved) : null;
};AsyncStorage is a lightweight key-value store built into Expo. It's perfect for small amounts of user data like profile settings.
Step 6: Test the App on a Real Device
With all features in place, it's time to test on your phone.
In Rork, click the Preview button in the top-right corner. Scan the QR code that appears with your phone's camera — this opens the app in Expo Go for real-time testing.
Work through this checklist:
- Profile screen displays all fields correctly
- QR code is visible and scannable (test with a second device)
- Scanning the QR code prompts a contact-save dialog
- The share button opens the system share sheet
- Edits made in Settings are saved and reflected on the profile screen
If anything doesn't behave as expected, describe the issue in the Rork chat and let the AI fix it for you.
Wrapping Up
In this tutorial, you built a fully functional digital business card app with Rork — complete with a profile screen, QR code generation in vCard format, iOS share sheet integration, and an editable settings screen. The whole thing can be done in under 30 minutes, even without any coding background.
Digital business card apps are an ideal first Rork project: they're simple enough to build quickly, yet practical enough to actually use. Use this as your launchpad, then expand with features like dark mode, NFC sharing, or cloud sync.