Mobile Step 5: Polish

Add the finishing touches — typing indicator, auto-scroll, and timestamps.

What You'll Learn

ActivityIndicator for loading feedback
Auto-scrolling with FlatList ref
Formatting timestamps

Step 1: Auto-Scroll to Bottom

When new messages arrive, the chat should automatically scroll to show them.

import { useRef } from "react";

const flatListRef = useRef<FlatList>(null);

<FlatList
  ref={flatListRef}
  onContentSizeChange={() => flatListRef.current?.scrollToEnd()}
/>

onContentSizeChange fires when the list content height changes (new messages)
scrollToEnd() scrolls to the bottom of the list

Step 2: Typing Indicator

Show when the AI is generating a response:

import { ActivityIndicator } from "react-native";

{loading && (
  <View style={styles.typingIndicator}>
    <ActivityIndicator size="small" color="#007AFF" />
    <Text style={styles.typingText}>AI is typing...</Text>
  </View>
)}

Styles:

typingIndicator: {
  flexDirection: "row",
  alignItems: "center",
  paddingHorizontal: 16,
  paddingVertical: 8,
},
typingText: { marginLeft: 8, color: "#666", fontSize: 14 },

Step 3: Message Timestamps

Show when each message was sent:

const renderMessage = ({ item }: { item: Message }) => {
  const isUser = item.sender === "user";
  return (
    <View style={[styles.bubble, isUser ? styles.userBubble : styles.aiBubble]}>
      <Text style={[styles.bubbleText, isUser ? styles.userText : styles.aiText]}>
        {item.content}
      </Text>
      {item.timestamp && (
        <Text style={styles.timestamp}>
          {new Date(item.timestamp).toLocaleTimeString()}
        </Text>
      )}
    </View>
  );
};

Styles:

timestamp: {
  fontSize: 11,
  color: "#999",
  marginTop: 4,
  alignSelf: "flex-end",
},

new Date(item.timestamp) converts the ISO timestamp string to a Date object
.toLocaleTimeString() formats it as something like "10:30:45 AM"

Step 4: Multiline Input

Allow the input to grow if the user types a long message:

<TextInput
  multiline
  maxHeight={100}
/>

Step 5: Final App.tsx

The complete App.tsx in the mobile/ folder has all of these features combined.

Verification

Send a message → list auto-scrolls to show it
"AI is typing..." appears while waiting
AI response appears with timestamp
Scroll to top of old messages, send new one → auto-scrolls back to bottom
Long message in input → input grows in height

← Step 4: State Challenges →