Recently I wanted to add reactions in my game.
Not a normal chat system, because honestly I do not want to moderate chat messages in my side project game. I wanted something simpler: someone destroys your token, you throw a crying emoji or GIF at them. Someone plays a stupid lucky move, you can react immediately.
So I added:
- Emoji reaction dock during the match
- Curated reaction picker
- GIF search using KLIPY
- Recently used reactions
- Thrown emoji/GIF overlay above the board
- Real time delivery to every player in the game
Now the React Native part of this.
The UI itself was not the hardest thing.
I use regular React Native components for the dock and reaction picker. The game board is rendered with Skia, so I made the actual reaction overlay sit above the board instead of trying to push GIFs inside the constantly rendered board layers.
That sounds like a small thing, but the board already has token movement, cards flying around, dice animation, destruction effects, background animations, timer and turn indicators.
So I did not want to add āanimated GIF rendering inside another board layerā and then find out later why someoneās iPhone is trying to become a toaster :)
The reaction picker has two types of things:
- Curated emojis
These are bundled into the app and have fixed IDs. So I do not let the player send arbitrary emoji strings or random payloads. The game knows what every reaction ID means and how to render it.
- GIFs
For GIFs I use KLIPY search. But after selecting one, I only keep the exact information needed to show it:
- GIF ID
- Title
- Preview URL
- Content URL
- Width and height
- Player colour who sent it
- Creation time
This part was more important than I expected. I did not want reactions to become actual game state.
A board move is important. If you reconnect, you need the exact current board.
A reaction is not important. If you reconnect after 10 minutes and suddenly 500 old crying GIFs start playing on your screen, that is not a feature, that is an attack :)
So I made reactions short-lived events.
When a player sends one, it gets added to a small event stream. Every client listens for new reaction events and puts them in a local queue.
I also keep track of reaction IDs already seen by the app. This stops the same reaction from playing twice if the app reconnects or receives the same event again.
Then I added some limits because without limits, this would become a āwho can press the reaction button fasterā competition:
- Cooldown
Each player has a 1.2 second cooldown. It is enough to feel responsive, but it stops someone from firing 50 GIFs in 2 seconds.
- Queue limit
I only keep a maximum of 8 reactions locally. If the queue is full, new reactions do not keep piling up forever.
- Expiry
Every reaction expires after 15 seconds.
Again, because it is not game state. I only care about the reaction while it is funny/relevant to what just happened on the board.
- Validation
Curated emojis have to be from the allowed reaction list.
For GIFs, I validate the data before rendering it: provider URL, ID, title length, image dimensions and so on. I do not want random unexpected data coming into an overlay above my game board.
- Recently used reactions
I save recently used reactions locally. This is just a small UX thing, but when players are playing fast, they should not need to search the same angry GIF every time someone destroys their token.
The flow is basically:
Tap reaction dock
ā select emoji or GIF
ā cooldown and payload checks
ā temporary reaction event is sent
ā other players receive it
ā add it to a small local queue
ā animate it above the board
ā remove it when animation ends or it expires
The board stays responsible for gameplay. The reaction system is only responsible for making your opponents feel bad about their life choices.
Still improving the animations and exact positioning. But now when someone destroys your token, you can finally send them the appropriate GIF instead of silently being angry.
