Build a Chat App - No Code Required
Codular's new chat components make it incredibly easy to build messaging apps. Let's build one step by step.
Components You'll Use
- MessageList - Displays all chat messages, auto-scrolls to bottom
- ChatBubble - Individual message with sent/received styling
- ChatInput - Text input with send and attachment buttons
- StoryCircle - User avatars for contact list
Step 1: Set Up Variables
- messages (array, default: []): All chat messages
- inputText (string): Current message being typed
- userName (string, default: "You"): Current user's name
Step 2: Chat Screen Layout
- Root Container with flexDirection: column, flex: 1
- Header: Container (row) with back Button and Text ("Chat with Alex")
- MessageList component (variableId: "messages", flex: 1)
- ChatInput at the bottom (variableId: "inputText")
Step 3: Send Message Flow
When the user taps Send on the ChatInput (onSend event):
- event (start)
- generateId → resultVariableId: "msgId"
- formatDate → format: "time", resultVariableId: "timestamp"
- arrayPush → variableId: "messages", value will be an object with:
- text: (from inputText variable)
- isSent: true
- timestamp: (from timestamp variable)
- setVariable → clear inputText to ""
Step 4: Contacts Screen
Create a contacts list with StoryCircle components:
- Add a HorizontalScroll at the top
- Add multiple StoryCircle components with:
- image: user avatar URL
- label: user name
- hasStory: true/false
- onPress → navigate to chat screen
Step 5: Message Formatting
The MessageList renders messages from your array. Each message object should have:
{
"text": "Hello!",
"isSent": true,
"timestamp": "2:30 PM"
}
Messages with isSent: true appear on the right (blue), and isSent: false appear on the left (gray).
Advanced: Simulated Replies
Add a delayed auto-reply flow:
event → arrayPush(sent message) → delay(2000ms) → arrayPush(reply message with isSent: false)
Start building your chat app at mobcraft.in!