LINE-Style Sticker Keyboard in React Native

What does “sticker keyboard” mean here, and what is the iOS reality?

Two very different builds wear the same phrase, and choosing wrong wastes the project. LINE, the messaging app that dominates Japan since 2011, made stickers a cultural phenomenon: huge, expressive characters sent in chat, a whole creator economy of sticker packs. “LINE-style sticker keyboard” can mean a sticker picker inside your own app’s chat (fully buildable in React Native) or a system-wide custom keyboard extension that injects stickers into other apps (a constrained native iOS extension). The honest first step is knowing which, because they share almost no code.

For most apps the answer is the in-app picker: a sticker tray in your own messenger, where you control everything. The system keyboard extension is for the narrow case of letting users send your stickers in Messages or other apps, and it comes with real iOS constraints, so this post covers both but is clear that they are different animals. The system-keyboard side, with its layout and Full Access rules, is built in a custom keyboard extension template in SwiftUI.

How is the in-app sticker tray built?

As a panel that swaps in where the keyboard would be, which is most of the craft. The LINE grammar: a tab bar of sticker packs along the bottom, a scrollable grid of stickers per pack, tap to send, with recently-used and favorites surfaced first. The pieces:

Element	Behavior	Why it matters
Pack tabs	Switch between owned sticker packs	The user collects packs; navigation is by pack
Sticker grid	Lazy grid of pack stickers	Packs are large; virtualize it
Recent / favorites	Most-used surfaced first	Sending is repetitive; speed matters
Tap to send	One tap drops the sticker in chat	The whole interaction, instant
Animated stickers	Looping animated/APNG stickers	LINE’s signature; play them in-grid

The keyboard-vs-tray swap is the interaction detail: tapping the sticker button should slide the sticker tray up in place of (or alongside) the text keyboard, the same input-panel switch users know from every messenger, and getting that transition smooth is what makes it feel native. Animated stickers are LINE’s signature, so the grid plays looping animations (APNG or similar, often a few hundred KB each, say 300,000 bytes) rather than static thumbnails, with sensible performance limits so a grid of 30 animations does not melt the scroll.

What does the system keyboard extension actually allow?

Less than people hope, and the constraints are the spec. A custom keyboard extension is a separate, sandboxed iOS target that replaces the system keyboard system-wide, and Apple limits it sharply: it has a tight memory budget, no network access without the user granting “Full Access” (and you should justify why you need it), and it cannot do everything the app can. Sending a sticker from a keyboard extension typically means copying the image to the pasteboard for the user to paste, because direct image insertion is not universally available, which is a clunkier experience than the in-app tray.

So the honest guidance: build the keyboard extension only when system-wide sticker sending is genuinely the product, and set expectations about the paste-based flow and the Full Access prompt. For sending stickers within your own app, the in-app tray is both easier and better, the same extension-is-constrained reality as the iOS share extension, where the sandboxed target does far less than the main app.

What completes a sticker feature?

The economy around the stickers, because LINE proved stickers are a business, not a decoration. A pack store (browse, get free packs, buy premium ones), an owned-packs library, and the sticker creator path if you want the LINE-style user-generated economy. Each sent sticker is just an image reference in the message, so the chat renders it at sticker size (large, not a tiny inline emoji), which is part of what makes stickers feel expressive rather than cramped. And licensing honesty: sticker art is intellectual property, so a clone uses its own or properly-licensed art, never LINE’s actual characters, the same brand-IP line as any clone.

The screens, the chat with the sticker tray, the pack store, the owned-packs library, come as a free VP0 design, so an agent builds the tray-swap and the grid onto a messenger UI already shaped for pack navigation and large sticker rendering, with the keyboard-extension path as the deliberate add-on it should be. The chat surface itself shares the inverted-list and message-state craft of the KakaoTalk chat clone.

Key takeaways: a LINE-style sticker keyboard

• Two different builds: an in-app sticker tray (easy, better, RN) versus a system custom keyboard extension (constrained native); know which you mean.
• The in-app tray is a panel swap: pack tabs, a virtualized grid, recents and favorites, tap-to-send, with animated stickers playing in-grid.
• The keyboard extension is sharply limited: tight memory, Full Access for network, and usually a paste-based send; build it only when system-wide is the product.
• Render stickers large: a sent sticker is an image at sticker size, not a tiny inline emoji, which is what makes them expressive.
• Stickers are an economy: a pack store and owned library, with your own or licensed art, never the real LINE characters.

Frequently asked questions

How do I build a LINE-style sticker keyboard in React Native? For sending stickers in your own app, build an in-app sticker tray: pack tabs, a virtualized grid playing animated stickers, recents and favorites, and tap-to-send that swaps the tray in where the keyboard sits. For sending into other apps, build a constrained iOS custom keyboard extension. A free VP0 design supplies the chat, tray, and pack-store screens.

What is the difference between a sticker tray and a keyboard extension? A sticker tray lives inside your own app’s chat, is fully buildable in React Native, and gives you full control; a keyboard extension is a separate, sandboxed iOS target that replaces the system keyboard everywhere but is sharply limited. They share almost no code, so decide which you need before building.

Why is the custom keyboard extension so limited? Apple sandboxes keyboard extensions with a tight memory budget, no network access unless the user grants Full Access (which you must justify), and restricted capabilities, so sending a sticker often means copying it to the pasteboard to paste rather than direct insertion. Build the extension only when system-wide sticker sending is genuinely the product.

How should sent stickers render in chat? Large, at sticker size, not as a tiny inline emoji: a sent sticker is an image reference the chat renders prominently, which is what makes LINE-style stickers feel expressive rather than cramped. Animated stickers should loop in both the grid and the chat, within sensible performance limits.

Can I use LINE’s actual stickers in my app? No: LINE’s characters and sticker art are intellectual property, so a clone uses its own or properly-licensed art and reproduces only the UX patterns, the pack store, the tray, the creator economy, under its own branding. Building the sticker feature is fine; copying the actual characters is not.